88 lines
1.4 KiB
Markdown
88 lines
1.4 KiB
Markdown
### 使用组件
|
||
|
||
```html
|
||
<time-picker-popup ref="TimePickerPopupRef" :value="value" @confirm="confirm"></time-picker-popup>
|
||
```
|
||
|
||
### 引入组件
|
||
|
||
```javascript
|
||
import TimePickerPopup from '@/components/time-picker-popup/time-picker-popup.vue';
|
||
```
|
||
|
||
### 注册组件
|
||
|
||
```javascript
|
||
export default {
|
||
components: { TimePickerPopup },
|
||
data() {
|
||
return {
|
||
value: ['00', '00', '00', '00']
|
||
}
|
||
},
|
||
onReady() {
|
||
this.open();
|
||
},
|
||
methods: {
|
||
confirm(data) {
|
||
uni.showToast({
|
||
title: `${data[0]}:${data[1]}-${data[2]}:${data[3]}`
|
||
})
|
||
},
|
||
open() {
|
||
this.$refs.TimePickerPopupRef.open();
|
||
}
|
||
}
|
||
}
|
||
```
|
||
|
||
### 参数
|
||
|
||
```javascript
|
||
// 当前选中的值
|
||
value: {
|
||
type: Array,
|
||
default: () => (['00', '00', '00', '00'])
|
||
},
|
||
// 标题
|
||
title: {
|
||
type: String,
|
||
default: '时间'
|
||
},
|
||
// 取消按钮文字
|
||
cancelText: {
|
||
type: String,
|
||
default: '取消'
|
||
},
|
||
// 取消按钮颜色
|
||
canceColor: {
|
||
type: String,
|
||
default: '#666666'
|
||
},
|
||
// 确定按钮文字
|
||
confirmText: {
|
||
type: String,
|
||
default: '确定'
|
||
},
|
||
// 确定按钮颜色
|
||
confirmColor: {
|
||
type: String,
|
||
default: '#2bb781'
|
||
},
|
||
// 分割符
|
||
segmentation: {
|
||
type: String,
|
||
default: '-'
|
||
},
|
||
// 设置选择器中间选中框的类名 注意页面或组件的style中写了scoped时，需要在类名前写/deep/
|
||
indicatorClass: {
|
||
type: String,
|
||
default: 'picker-view__indicator'
|
||
},
|
||
// 设置选择器中间选中框的样式
|
||
indicatorStyle: {
|
||
type: String,
|
||
default: ''
|
||
},
|
||
```
|