更新记录
1.0.1(2025-05-15) 下载此版本
2025-05-15 Release
平台兼容性
Vue2 | Vue3 |
---|---|
× | √ |
App | 快应用 | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 |
---|---|---|---|---|---|---|
HBuilderX 4.55 | × | × | × | × | × | × |
钉钉小程序 | 快手小程序 | 飞书小程序 | 京东小程序 | 鸿蒙元服务 |
---|---|---|---|---|
× | × | × | × | × |
H5-Safari | Android Browser | 微信浏览器(Android) | QQ浏览器(Android) | Chrome | IE | Edge | Firefox | PC-Safari |
---|---|---|---|---|---|---|---|---|
√ | √ | √ | √ | 135.0.7049.115 | × | 136.0.3240.64 | √ | √ |
理论上来说小程序这些应该都支持,因为只是用了基本的js用法,没有具体测试,有问题上报即可,不定期修复 HTML
<q-progress-bar :chooseDay="date" :progressList="progressList"></q-progress-bar>
JS
const date = ref('2025-05-15')
const progressList = ref([ ['08:00:00', '08:35:00'], ['09:00:00', '14:00:00'], ['21:00:00', '22:00:00'] ])
API
// 时间段配置(必填) // 示例: [['08:00:00','12:00:00'], ['14:00:00','18:00:00']] progressList: { type: Array as () => TimeSegment[], default: () => [], },
// 当前选择日期(格式:YYYY-MM-DD) chooseDay: { type: String, default: '' },
// 进度条起始小时(24小时制) startTime: { type: Number, default: 7, },
// 进度条结束小时(24小时制) endTime: { type: Number, default: 24, },
// 进度段颜色 progressColor: { type: String, default: '#2196F3' },
// 过期时间段颜色 expireColor: { type: String, default: '#f1f2f3' },
// 空闲时间段颜色 freeTimeColor: { type: String, default: '#ffffff' },
// 是否显示圆角 isRound: { type: Boolean, default: true },
// 边框样式 borderStyle: { type: String, default: '1rpx solid #d3d3d3' }