更新记录

1.0.4（2026-09-09） 下载此版本

修改 /deep/ 为 ::v-deep

1.0.3（2025-10-20） 下载此版本

修改已知bug

1.0.2（2025-10-20） 下载此版本

修改已知bug

平台兼容性

uni-app(3.8.3)

uni-app x(3.8.3)

oz-timePicker

使用组件

<oz-timePicker ref="TimePickerPopupRef" :value="value" @confirm="confirm" />

引入组件

注册组件

export default {
    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();
        }
    }
}

参数

// 当前选中的值
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时，需要在类名前写::v-deep
indicatorClass: {
    type: String,
    default: 'picker-view__indicator'
},
// 设置选择器中间选中框的样式
indicatorStyle: {
    type: String,
    default: ''
},