更新记录

1.0.3(2025-10-20) 下载此版本

修改已知bug

1.0.2(2025-10-20) 下载此版本

修改已知bug

1.0.1(2025-05-21) 下载此版本

修改已知bug

查看更多

平台兼容性

uni-app(3.6.11)

Vue2 Vue3 Chrome Safari app-vue app-nvue Android iOS 鸿蒙
- - - -
微信小程序 支付宝小程序 抖音小程序 百度小程序 快手小程序 京东小程序 鸿蒙元服务 QQ小程序 飞书小程序 快应用-华为 快应用-联盟
- - - - - - - - -

oz-timePicker

示例

<template>
    <view>
        <view>{{ `${pickerValue[0]}:${pickerValue[1]}-${pickerValue[2]}:${pickerValue[3]}` }}</view>
        <button type="primary" @click="open">打开弹窗</button>
        <oz-timePicker ref="TimePickerPopupRef" :value="pickerValue" @confirm="confirm" />
    </view>
</template>

<!-- Vue 2 -->
<script>
    export default {
        data() {
                return {
                        pickerValue: ['00', '00', '00', '00']
                }
        },
        onReady() {
            this.open();
        },
        methods: {
            confirm(data) {
                this.pickerValue = data;
            },
            open() {
                this.$refs.TimePickerPopupRef.open();
            }
        }
    }
</script>

<!-- Vue 3 -->
<script setup>
import { computed, ref } from 'vue';

const pickerValue = ref(['00', '00', '00', '00']);
const TimePickerPopupRef = ref(null);

function confirm(data) {
    pickerValue.value = data;
}
function open() {
    TimePickerPopupRef.value.open();
}
</script>

参数

参数 说明 类型 默认值
value 当前选中的值 Array ['00', '00', '00', '00']
title 标题 String
cancelText 取消按钮文字 String 取消
canceColor 取消按钮颜色 String #666666
confirmText 确定按钮文字 String 确定
confirmColor 确定按钮颜色 String #2bb781
segmentation 分割符 String -
indicatorClass 设置选择器中间选中框的类名 注意页面或组件的style中写了scoped时,需要在类名前写/deep/ String picker-view__indicator
indicatorStyle 设置选择器中间选中框的样式 String
paddedDate 是否需要补0 Boolean true

事件

事件名 说明 回调参数
confirm 点击确定按钮时触发 data: ['00', '00', '00', '00']
cancel 点击取消按钮时触发

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议