@tanzhenxing/zx-time-picker NPM

zx-time-picker 时间选择器

基于 Element Plus 设计，适用于 uni-app 的时间选择器组件，支持 H5、小程序、App，兼容多端。

功能特性

支持单时间点选择、时间范围选择
支持禁用部分小时/分钟/秒
支持只读、禁用、清除
支持自定义格式化显示
响应式设计，适配移动端
完整的事件系统

基础用法

<template>
  <zx-time-picker v-model="time" placeholder="请选择时间" />
</template>
<script setup>
import { ref } from 'vue'
const time = ref('12:00:00')
</script>

选择时间范围

<zx-time-picker v-model="timeRange" is-range range-separator="至" start-placeholder="开始" end-placeholder="结束" />

禁用部分时间

<zx-time-picker v-model="time" :disabled-hours="disabledHours" :disabled-minutes="disabledMinutes" :disabled-seconds="disabledSeconds" />

属性说明

属性名	说明	类型	默认值
modelValue / v-model	绑定值，单选为字符串，范围为数组	string/array	''
is-range	是否为时间范围选择	boolean	false
format	显示在输入框中的格式	string	HH:mm:ss
value-format	绑定值的格式	string	''
readonly	完全只读	boolean	false
disabled	禁用	boolean	false
clearable	是否显示清除按钮	boolean	true
placeholder	占位内容	string	请选择时间
start-placeholder	范围选择时开始时间的占位内容	string	开始时间
end-placeholder	范围选择时结束时间的占位内容	string	结束时间
range-separator	选择范围时的分隔符	string	-
show-seconds	是否显示秒	boolean	true
prefix-icon	自定义前缀图标	string	''
suffix-icon	自定义后缀图标	string	clock
clear-icon	自定义清除图标	string	close-circle
cancel-text	取消按钮文字	string	取消
confirm-text	确认按钮文字	string	确定
title	弹窗标题	string	选择时间
disabled-hours	禁用小时选项	Function	-
disabled-minutes	禁用分钟选项	Function	-
disabled-seconds	禁用秒选项	Function	-
default-value	选择器打开时默认显示的时间	string/array	-

事件说明

事件名	说明	回调参数
update:modelValue	绑定值变化时触发	(value)
change	用户确认选定的值时触发	(value)
blur	组件失去焦点时触发	-
focus	组件获得焦点时触发	-
clear	用户点击清除按钮时触发	-
visible-change	弹窗显示/隐藏时触发	(visible)

插槽说明

名称	说明
prefix-icon	自定义前缀图标
suffix-icon	自定义后缀图标
clear-icon	自定义清除图标

使用示例

详见 src/pages/components/time/picker.vue

注意事项

组件基于原生 picker-view 实现，兼容 H5、小程序、App
禁用选项需返回对应的禁用项数组
图标可自定义为文字或自定义组件
建议配合 uni-app 3.x + Vue3 使用

参考文档

Element Plus 时间选择器

zx-time-picker 时间选择器时间选择器组件

@tanzhenxing/zx-icon

@tanzhenxing/zxui

1.0.2

2 months ago