tmui-cli 2.0.1 → 2.0.2

package/data/tmui4x/30./347/273/204/344/273/266/345/272/223//350/241/250/345/215/225/347/273/204/344/273/266//346/227/245/345/216/206 xCalendar.md"

@@ -0,0 +1,179 @@
+# 日历 xCalendar
+
+## 介绍
+
+日历面板，支持指定日期新式设置，角标，底部文本设置等暂不同时支持多选，因为不支持联合类型后期需要分开组件使用。
+
+## 平台兼容
+
+| Harmony | H5 | andriod | IOS | 小程序 | UTS | UNIAPP-X SDK | version |
+| --- | --- | --- | --- | --- | --- | --- | --- |
+| - | ☑ | ☑️ | ☑️ | ☑️ | ☑️ | 4.76+ | 1.1.18 |
+
+## 文件路径
+
+```ts
+@/uni_modules/tmx-ui/components/x-calendar-view/x-calendar-view.uvue
+```
+
+## 使用
+
+```ts
+<x-calendar-view></x-calendar-view>
+```
+
+## Props 属性
+
+| 名称 | 说明 | 类型 | 默认值 |
+| ------ | ---- | ---- | ---- |
+| modelValue | `同步当前时间v-model`<br>`不想受控:model-value`<br> | `string` | `""` |
+| model | `day:固定此值`<br> | `union` | `'day'` |
+| disabledDays | `禁用的日期字符串如"2023-12-12"`<br>`它与下面的start，end不冲突。`<br> | `Array` | `():string[] => [] as string[]` |
+| disabled | `是否禁用用户交互，相当于展示日期。`<br> | `boolean` | `false` |
+| vertical | `是否上下切换日历`<br> | `boolean` | `false` |
+| startDate | `允许选择的开始日期`<br> | `string` | `'1900-1-1'` |
+| endDate | `允许选择的结束日期`<br> | `string` | `'2100-1-1'` |
+| dateStyle | `设置指定日期的样式`<br>`数据类型见：xCalendarDateStyle_type`<br> | `Array` | `():xCalendarDateStyle_type[] => [] as xCalendarDateStyle_type[]` |
+| format | `同步vmodel时格式化模板`<br> | `string` | `'YYYY-MM-DD'` |
+| color | `选中的主题色，默认空值，取全局主题色`<br>`如果提供了dateStyle，以dateStyle为准`<br> | `string` | `''` |
+| fontColor | `默认的文字颜色`<br>`如果提供了dateStyle，以dateStyle为准`<br> | `string` | `'#333333'` |
+| fontDarkColor | `默认的暗黑文字颜色`<br>`如果提供了dateStyle，以dateStyle为准`<br> | `string` | `'#ffffff'` |
+| activeFontColor | `默认选中时的文字颜色`<br>`如果提供了dateStyle，以dateStyle为准`<br> | `string` | `'#ffffff'` |
+| rangColor | `范围选中时,范围中间的选中颜色,`<br>`如果为空,为color的透明度0.5;`<br> | `string` | `''` |
+| rangFontColor | ``<br> | `string` | `''` |
+| headBgColor | `头的背景颜色，默认为透明`<br> | `string` | `'transparent'` |
+| headFontColor | `头的文字颜色，提供了后暗黑失效会以这个为准。`<br> | `string` | `''` |
+| headStyle | `头部自定义样式。`<br> | `string` | `''` |
+| renderOnly | `循环渲染时，是否只渲染当前面板（如果你在pad等10年前的低端机上渲染日历有压力请打开此值为true)`<br>`关闭后可以提升滑动体验。`<br> | `boolean` | `true` |
+| seekDay | `你当前的一周的第一天的索引值是几：0: 周一，1: 周二，2: 周三，3: 周四，4: 周五，5: 周六，6: 周日`<br> | `number` | `0` |
+| dateStatus | `给日期设定状态`<br>`类型为：xCalendarDateStyleStatusType`<br> | `Array` | `():xCalendarDateStyleStatusType[] => [] as xCalendarDateStyleStatusType[]` |
+
+
+## Events 事件
+
+| 名称 | 参数 | 说明 |
+| ------ | ---- | ---- |
+| change | `value: string[]<br>` | 时间变化时触发 |
+| click | `value: string<br>` | 当前日历面板的日期被点击时触发 |
+| currentChange | `value: string<br>` | 当前激活面板月份改变时触发（就是当前看到的月份面板） |
+| update:modelValue | `value: string[]<br>` | 同步当前的选中的日期绑定 |
+| update:currentDate | `value: string<br>` | 同步当前查看的月份日期，请以日期形式提供值 |
+
+
+## Slots 插槽
+
+| 名称 | 说明 | 数据 |
+| ------ | ---- | ---- |
+| header | `日历头，隐藏使用空插槽，将隐藏，如果想自定，请通过ref函数来翻页控制日历走向。` | - |
+| footer | `日历尾部` | - |
+
+
+## Ref 方法
+
+| 名称 | 参数 | 返回值 | 说明 |
+| ------ | ---- | ---- | ---- |
+| next | - | `-` | 下月 |
+| prev | - | `-` | 上月 |
+| setCurrentMonth | - | `-` | 设置日历返回到本月 |
+| clear | - | `-` | 清空选择 |
+
+
+## 示例文件路径
+
+```json
+/pages/biaodan/calendar-view
+```
+
+## 示例源码
+
+```vue
+<template>
+		<!-- #ifdef MP-WEIXIN -->
+		<page-meta :page-style="`background-color:${xThemeConfigBgColor}`">
+			<navigation-bar :background-color="xThemeConfigNavBgColor"
+				:front-color="xThemeConfigNavFontColor"></navigation-bar>
+		</page-meta>
+		<!-- #endif -->
+		<x-sheet>
+			<x-text font-size="18" class=" text-weight-b mb-8">日历 xCalendar</x-text>
+			<x-text color="#999999">日历面板，支持指定日期样式设置，角标，底部文本设置等</x-text>
+			<x-text color="#999999">注意区别：appx端是canvas绘制，h5是view节点，因此appx端右角标文件只能限制2个字符，英文3个字符</x-text>
+		</x-sheet>
+
+		<x-sheet :padding="['0']" :margin="['12','0','12','12']"
+			:linear-gradient="_isDark?([] as string[]):['bottom','#d1eaed','#effdff']">
+			<x-calendar-view :dateStatus="dateStatus" @change="onchange" v-if="show" :seek-day="seekDay"
+				:date-style="dateStyle" :disabled-days="['2024-5-31']" v-model="date"></x-calendar-view>
+			<view class="pa-32">
+				<x-button :block="true" @click="setdate">设置日期样式数据</x-button>
+			</view>
+		</x-sheet>
+		<x-sheet>
+			<x-text font-size="18" class=" text-weight-b ">禁用头，尾，禁用用户操作和切换，可以实现自定日历。</x-text>
+		</x-sheet>
+		<x-sheet :padding="['0']">
+			<x-calendar-view @change="onchange" v-if="show" :seek-day="seekDay" :disabled="true" :hideHeader="true"
+				:disabledSwiper="true"></x-calendar-view>
+		</x-sheet>
+
+		<view style="height:50px"></view>
+</template>
+
+<script setup lang="uts">
+	import type { xCalendarDateStyle_type, xCalendarDateStyleStatusType } from "@/uni_modules/tmx-ui"
+	import { xConfig } from "@/uni_modules/tmx-ui"
+	const date = ref('2024-2-26')
+	const dateStyle = ref<xCalendarDateStyle_type[]>([])
+	const dateStatus = ref<xCalendarDateStyleStatusType[]>([{
+		between: {
+			start: "2024-2-1",
+			end: "2024-2-21",
+			color: "red",
+			notDate: ['2024-2-20'],
+		},
+		date: [
+			{ date: '2024-2-29', color: 'green' },
+			{ date: '2024-5-21', color: 'green' },
+			{ date: '2024-5-24', color: 'green' },
+		]
+	} as xCalendarDateStyleStatusType])
+	const show = ref<boolean>(false)
+	const seekDay = ref<number>(0)
+	const _isDark = computed(() : boolean => xConfig.dark == 'dark')
+
+	const onchange = (dates : string) => {
+		console.log(dates)
+	}
+	const setdate = () => {
+		date.value = "2024-5-8"
+
+		dateStyle.value = [
+			{ date: '2024-5-3', color: '#00aa7f', label: '推荐', fontColor: 'white' } as xCalendarDateStyle_type,
+			{ date: '2024-5-20', label: '完成', fontColor: 'orange' } as xCalendarDateStyle_type,
+			{ date: '2024-5-21', label: '爆满', fontColor: 'red' } as xCalendarDateStyle_type,
+			{ date: '2024-5-31', label: '禁用' } as xCalendarDateStyle_type,
+			{ date: '2024-5-18', dot: true } as xCalendarDateStyle_type,
+			{ date: '2024-5-17', dot: true, dotColor: "orange", dotLabel: "36" } as xCalendarDateStyle_type,
+			{ date: '2024-5-1', dot: true, dotColor: "#52c428", dotLabel: "假", label: "劳动节", fontColor: "#52c428" } as xCalendarDateStyle_type,
+			{ date: '2024-5-4', dot: true, dotColor: "#aa55ff", dotLabel: "休", label: "劳动节", fontColor: "#52c428" } as xCalendarDateStyle_type,
+		] as xCalendarDateStyle_type[]
+	}
+	const setSeekDay = (day : number) => {
+		seekDay.value = day;
+		console.log(`设置周起始日为: ${day}`);
+	}
+	onReady(() => {
+		show.value = true;
+	})
+</script>
+
+<style lang="scss">
+
+</style>
+```
+
+---
+
+## 版权
+
+@2026 tmui4x [https://xui.tmui.design](https://xui.tmui.design)

package/data/tmui4x/30./347/273/204/344/273/266/345/272/223//350/241/250/345/215/225/347/273/204/344/273/266//346/227/245/346/234/237/351/200/211/346/213/251/345/231/250 xPickerDate.md"

@@ -0,0 +1,147 @@
+# 日期选择器 xPickerDate
+
+## 介绍
+
+日期选择，可以控制显示精确到秒。默认的开始时间为当前时间的上一年，结束时间为默认当前时间
+使用时，建议不要显示过多年份以防卡太多数据。
+
+## 平台兼容
+
+| Harmony | H5 | andriod | IOS | 小程序 | UTS | UNIAPP-X SDK | version |
+| --- | --- | --- | --- | --- | --- | --- | --- |
+| ☑ | ☑ | ☑️ | ☑️ | ☑️ | ☑️ | 4.76+ | 1.1.18 |
+
+## 文件路径
+
+```ts
+@/uni_modules/tmx-ui/components/x-picker-date/x-picker-date.uvue
+```
+
+## 使用
+
+```ts
+<x-picker-date></x-picker-date>
+```
+
+## Props 属性
+
+| 名称 | 说明 | 类型 | 默认值 |
+| ------ | ---- | ---- | ---- |
+| modelValue | `当前时间,与modelStr不同，此提供的值必须是正常的时间格式`<br>`否则报错，无法运行。可以提供以下合法格式：`<br>`YYYY,YYYY-MM,YYYY-MM-DD,YYYY-MM-DD HH,YYYY-MM-DD HH:mm,YYYY-MM-DD HH:mm:ss`<br> | `string` | `""` |
+| modelStr | `当前时间经过format格式化后输出的值。`<br>`此值不会处理输入，只输出显示。`<br> | `string` | `""` |
+| modelShow | ``<br> | `boolean` | `false` |
+| title | `顶部标题`<br> | `string` | `""` |
+| cancelText | `取消按钮的文本`<br> | `string` | `""` |
+| confirmText | `确认按钮的文本`<br> | `string` | `""` |
+| start | `开始时间，请提供正确的时间格式`<br> | `string` | `""` |
+| end | `结束时间，请提供正确的时间格式`<br> | `string` | `""` |
+| type | `精确到的级别`<br>`year:年`<br>`month:年月`<br>`day:年月日`<br>`hour:年月日小时`<br>`minute:年月日小时分钟`<br>`second:年月日小时分钟秒`<br> | `ModelType` | `"day"` |
+| format | `输出时间格式，只对v-model:modelStr有效`<br>`如果桢同步对vmodel:modelValue有效需要设置formatSyncValue为true`<br>`有效格式：`<br>`YYYY年`<br>`MM月`<br>`DD日`<br>`hh小时`<br>`mm分钟`<br>`ss秒`<br> | `string` | `"YYYY-MM-DD"` |
+| formatSyncValue | `是否将format格式化的v-model:modelStr同步到v-model:modelValue`<br>`默认false,注意：如果开启了同步，你要确保format的值是正常的时间值`<br>`正常兼容以下时间格式：`<br>`YYYY,YYYY-MM,YYYY-MM-DD,YYYY-MM-DD HH,YYYY-MM-DD HH:mm,YYYY-MM-DD HH:mm:ss`<br> | `boolean` | `false` |
+| cellUnits | `上方的单位名称，'年', '月', '日', '时', '分', '秒'`<br> | `Array` | `() => [] as string[]` |
+| lazyContent | `是否懒加载内部内容。`<br>`当前你的列表内容非常多，且影响打开的动画性能时，请务必`<br>`设置此项为true，以获得流畅视觉效果。如果选择数据较少可以设置为false，获得更好的视觉效果。`<br> | `boolean` | `false` |
+| zIndex | `层级`<br> | `number` | `1100` |
+| showClose | `是否显示关闭按钮`<br> | `boolean` | `true` |
+| disabled | `是否禁用弹出`<br> | `boolean` | `false` |
+| widthCoverCenter | `宽屏时是否让内容剧中显示`<br>`并限制其宽为屏幕宽，只展示中间内容以适应宽屏。`<br> | `boolean` | `false` |
+
+
+## Events 事件
+
+| 名称 | 参数 | 说明 |
+| ------ | ---- | ---- |
+| cancel | `-` | 取消时触发 |
+| confirm | `date: string<br>` | 确认触发 |
+| change | `date: string<br>` | 滑动变换时触发 |
+| update:modelShow | `-` | 变量控制打开状态<br>等同v-model:model-show |
+| update:modelStr | `-` | 经格式化后的值。等同v-model:model-str |
+| update:modelValue | `-` | - |
+
+
+## Slots 插槽
+
+| 名称 | 说明 | 数据 |
+| ------ | ---- | ---- |
+| default | `插槽,默认触发打开选择器。你的默认布局可以放置在这里。` | label: string<br> |
+
+
+## Ref 方法
+
+| 名称 | 参数 | 返回值 | 说明 |
+| ------ | ---- | ---- | ---- |
+| - | - | - | - |
+
+## 示例文件路径
+
+```json
+/pages/biaodan/picker-date
+```
+
+## 示例源码
+
+```vue
+<template>
+	<!-- #ifdef MP-WEIXIN -->
+	<page-meta :page-style="`background-color:${xThemeConfigBgColor}`">
+		<navigation-bar :background-color="xThemeConfigNavBgColor"
+			:front-color="xThemeConfigNavFontColor"></navigation-bar>
+	</page-meta>
+	<!-- #endif -->
+	<x-sheet>
+		<x-text font-size="18" class=" text-weight-b mb-8">日期选择器 PickerDate</x-text>
+		<x-text color="#999999">日期选择，可以控制显示精确到秒。默认的开始时间为当前时间的上一年，结束时间为默认当前时间</x-text>
+	</x-sheet>
+
+
+	<x-sheet>
+		<x-picker-date v-model="modelValue" :formatSyncValue="true" start="2020-1-1" end="2025-12-5"
+			v-model:model-str="nowVal" type="minute" format="YYYY-MM-DD hh:mm">
+			<template v-slot:default="{label}">
+				<x-button :block="true">打开时间</x-button>
+			</template>
+		</x-picker-date>
+
+		<x-sheet :margin="['0','24','0','0']" color="#f5f5f5" dark-color="#333">
+			<x-text color="#999999">选中的值：{{modelValue}}</x-text>
+			<x-text color="#999999">经format的值：{{nowVal}}</x-text>
+		</x-sheet>
+	</x-sheet>
+	<x-sheet>
+		<x-button skin='thin' :block="true" @click="modelValue = '2024-3-21'">赋值2024-3-21</x-button>
+	</x-sheet>
+
+	<x-sheet>
+		<x-text font-size="18" class=" text-weight-b mb-8">内嵌日期选择器 xDateView</x-text>
+		<x-date-view v-model="modelValue2" start="2020-3-12" end="2025-10-5"></x-date-view>
+	</x-sheet>
+
+	<x-sheet>
+		<x-text font-size="18" class=" text-weight-b">精确到秒</x-text>
+	</x-sheet>
+	<x-sheet>
+		<x-picker-date type="second" v-model="modelValue3" start="2020-1-1" end="2025-12-5">
+			<template v-slot:default="{label}">
+				<x-button :block="true">打开时间</x-button>
+			</template>
+		</x-picker-date>
+	</x-sheet>
+
+</template>
+
+<script setup lang="ts">
+	const nowVal = ref("")
+	const modelValue = ref("2024-10-06 10:10:10")
+	const modelValue2 = ref("2025-4-22 10:10:10")
+	const modelValue3 = ref("2024-10-06 10:10:10")
+</script>
+
+<style lang="scss">
+
+</style>
+```
+
+---
+
+## 版权
+
+@2026 tmui4x [https://xui.tmui.design](https://xui.tmui.design)

package/data/tmui4x/30./347/273/204/344/273/266/345/272/223//350/241/250/345/215/225/347/273/204/344/273/266//346/227/266/351/227/264/345/214/272/351/227/264/351/200/211/346/213/251 xBetweenTime.md"

@@ -0,0 +1,142 @@
+# 时间区间选择 xBetweenTime
+
+## 介绍
+
+快速的时间区间选择器，方便时间选择自动判断前后时间大小并校正。
+
+## 平台兼容
+
+| Harmony | H5 | andriod | IOS | 小程序 | UTS | UNIAPP-X SDK | version |
+| --- | --- | --- | --- | --- | --- | --- | --- |
+| ☑ | ☑ | ☑️ | ☑️ | ☑️ | ☑️ | 4.76+ | 1.1.18 |
+
+## 文件路径
+
+```ts
+@/uni_modules/tmx-ui/components/x-between-time/x-between-time.uvue
+```
+
+## 使用
+
+```ts
+<x-between-time></x-between-time>
+```
+
+## Props 属性
+
+| 名称 | 说明 | 类型 | 默认值 |
+| ------ | ---- | ---- | ---- |
+| modelValue | `当前时间,与modelStr不同，此提供的值必须是正常的时间格式`<br>`否则报错，无法运行。`<br> | `Array` | `() : string[] => [] as string[]` |
+| modelStr | `当前时间经过format格式化后输出的值。`<br>`此值不会处理输入，只输出显示。`<br> | `string` | `""` |
+| modelShow | `当前打开的状态。`<br>`等同v-model:model-show`<br> | `boolean` | `false` |
+| title | `顶部标题`<br>`空默认为：请选择时间（根据语言不同也不同）`<br>`如果你提供了值，组件内的多语言失效以你设定的为准`<br> | `string` | `""` |
+| start | `开始时间,提供时，请提供完整到秒的格式`<br> | `string` | `""` |
+| end | `结束时间,提供时，请提供完整到秒的格式`<br> | `string` | `""` |
+| type | `精确到的级别,这里只是展示，具体的返回值还是完整的值。`<br>`year:年`<br>`month:年月`<br>`day:年月日`<br>`hour:年月日小时`<br>`minute:年月日小时分钟`<br>`second:年月日小时分钟秒`<br> | `ModelType` | `"day"` |
+| format | `输出时间格式，只对v-model:modelStr及输入框展示有效YYYY-MM-DD，为空时由当前语文决定`<br>`因此它可能不是一个标准时间，比如YY SS ,所以不能作为modelValue使用`<br>`有效格式：`<br>`YYYY年`<br>`MM月`<br>`DD日`<br>`hh小时`<br>`mm分钟`<br>`ss秒`<br> | `string` | `""` |
+| cellUnits | `上方的单位名称`<br>`默认为：['年', '月', '日', '时', '分', '秒']`<br> | `Array` | `() : string[] => [] as string[]` |
+| quickDate | `快速时间区间选择，如果直接填写数字字符，会以你提供的数字最近多少来天来算。`<br>`d:本日`<br>`w:本周`<br>`m:本月`<br>`y:本年`<br>`q:本季度`<br>`7:最近7天，后面的依此类推，数字的就是最近xx天。`<br>`px:前x年，p+[x]数字依此类推，表示前x年,如：p1,p2...`<br>`如果提供以下json结构，则以你自定的为准。`<br>`UTSJSONObject:{title:'本学年',start:'2025-1-1',end:'2025-12-31'} as UTSJSONObject`<br> | `Array` | `() : Array<any> => ['d', 'w', 'm', 'y', 'q'] as Array<any>` |
+| lazyContent | `是否懒加载内部内容。`<br>`当前你的列表内容非常多，且影响打开的动画性能时，请务必`<br>`设置此项为true，以获得流畅视觉效果。如果选择数据较少没有必要打开`<br>`要兼容微信,必须设置为true,非微信可以为false`<br> | `boolean` | `false` |
+| drawerSize | `如果你的快捷选择较多可能会让高度不足，需要自行设置下高。`<br> | `string` | `'540px'` |
+| disabledClear | `是否禁用清除按钮，默认不禁用，允许用户清空选择。点确认，以清空选项数据`<br> | `boolean` | `false` |
+| disabled | `是否禁用弹出`<br> | `boolean` | `false` |
+| widthCoverCenter | `宽屏时是否让内容剧中显示`<br>`并限制其宽为屏幕宽，只展示中间内容以适应宽屏。`<br> | `boolean` | `true` |
+
+
+## Events 事件
+
+| 名称 | 参数 | 说明 |
+| ------ | ---- | ---- |
+| cancel | `-` | 取消时触发 |
+| confirm | `date: string<br>` | 确认触发 |
+| change | `date: string<br>` | 滑动变换时触发 |
+| dateClick | `item: UTSJSONObject<{text:string,value:string[]}><br>` | 快速日期被选中时触发 |
+| update:modelShow | `-` | 变量控制打开状态<br>等同v-model:model-show |
+| update:modelStr | `-` | 经格式化后的值。等同v-model:model-str |
+| update:modelValue | `-` | - |
+
+
+## Slots 插槽
+
+| 名称 | 说明 | 数据 |
+| ------ | ---- | ---- |
+| default | `插槽,默认触发打开选择器。你的默认布局可以放置在这里。` | show: boolean<br>show: boolean<br>show: boolean<br>startVal: boolean<br>startVal: boolean<br>startVal: boolean<br>endVal: boolean<br>endVal: boolean<br>endVal: boolean<br> |
+
+
+## Ref 方法
+
+| 名称 | 参数 | 返回值 | 说明 |
+| ------ | ---- | ---- | ---- |
+| open | - | `-` | 打开选择器 * |
+| close | - | `-` | 关闭选择器 * |
+| clear | - | `-` | 清空选择 * |
+
+
+## 示例文件路径
+
+```json
+/pages/biaodan/between-time
+```
+
+## 示例源码
+
+```vue
+<template>
+
+	<!-- #ifdef MP-WEIXIN -->
+	<page-meta :page-style="`background-color:${xThemeConfigBgColor}`">
+		<navigation-bar :background-color="xThemeConfigNavBgColor"
+			:front-color="xThemeConfigNavFontColor"></navigation-bar>
+	</page-meta>
+	<!-- #endif -->
+	<x-sheet>
+		<x-text font-size="18" class=" text-weight-b mb-8">时间区间选择 xBetweenTime</x-text>
+		<x-text color="#999999">快速的时间区间选择器，方便时间选择自动判断前后时间大小并校正。</x-text>
+	</x-sheet>
+
+	<x-sheet>
+
+		<x-between-time start="2020-1-9" end="2026-5-26" v-model="newdata" v-model:model-str="nowVal">
+			<template v-slot:default="{show}">
+				<x-button :block="true">打开时间</x-button>
+			</template>
+		</x-between-time>
+
+		<x-sheet :margin="['0','24']" color="#f5f5f5" dark-color="#333">
+			<x-text color="#999999">选中的值：{{newdata}}</x-text>
+			<x-text color="#999999">经format的值：{{nowVal}}</x-text>
+		</x-sheet>
+		<x-button skin='thin' :block="true" @click="newdata = ['2024-3-21','2026-1-13']">赋值</x-button>
+	</x-sheet>
+
+	<x-sheet>
+		<x-text font-size="18" class="text-weight-b mb-20">设置快捷按钮</x-text>
+		<x-between-time :quick-date="['d','y','7','30','p1','p2',customDate]" start="2020-1-9" end="2026-5-26"
+			v-model="newdata" v-model:model-str="nowVal">
+			<template v-slot:default="{show}">
+				<x-button :block="true">打开时间</x-button>
+			</template>
+		</x-between-time>
+
+	</x-sheet>
+
+
+</template>
+
+<script setup lang="ts">
+	import { ref } from 'vue'
+	const nowVal = ref("")
+	const newdata = ref<string[]>([])
+	const customDate = ref<UTSJSONObject>({ title: '本学年', start: '2025-1-1', end: '2025-12-31' })
+</script>
+
+<style lang="scss">
+
+</style>
+```
+
+---
+
+## 版权
+
+@2026 tmui4x [https://xui.tmui.design](https://xui.tmui.design)

package/data/tmui4x/30./347/273/204/344/273/266/345/272/223//350/241/250/345/215/225/347/273/204/344/273/266//346/227/266/351/227/264/351/200/211/346/213/251/345/231/250 xPickerTime.md"

@@ -0,0 +1,124 @@
+# 时间选择器 xPickerTime
+
+## 介绍
+
+这是单独显示和控制选择时分秒选择器。如果你需要年月日到秒的全部选择请参考x-picker-date。
+
+## 平台兼容
+
+| Harmony | H5 | andriod | IOS | 小程序 | UTS | UNIAPP-X SDK | version |
+| --- | --- | --- | --- | --- | --- | --- | --- |
+| ☑ | ☑ | ☑️ | ☑️ | ☑️ | ☑️ | 4.76+ | 1.1.18 |
+
+## 文件路径
+
+```ts
+@/uni_modules/tmx-ui/components/x-picker-time/x-picker-time.uvue
+```
+
+## 使用
+
+```ts
+<x-picker-time></x-picker-time>
+```
+
+## Props 属性
+
+| 名称 | 说明 | 类型 | 默认值 |
+| ------ | ---- | ---- | ---- |
+| modelValue | `当前时间,与modelStr不同，此提供的值必须是正常的时间格式xx:xx:xx`<br>`否则报错，无法运行。`<br> | `string` | `""` |
+| modelStr | `当前时间经过format格式化后输出的值。`<br>`此值不会处理输入，只输出显示。`<br> | `string` | `""` |
+| modelShow | `当前打开的状态。`<br>`等同v-model:model-show`<br> | `boolean` | `false` |
+| lazyContent | `是否懒加载内部内容。`<br>`当前你的列表内容非常多，且影响打开的动画性能时，请务必`<br>`设置此项为true，以获得流畅视觉效果。如果选择数据较少没有必要打开`<br>`要兼容微信就必须打开为true,非微信可以设置为false`<br> | `boolean` | `false` |
+| title | `顶部标题`<br> | `string` | `""` |
+| cancelText | `取消按钮的文本`<br> | `string` | `""` |
+| confirmText | `确认按钮的文本`<br> | `string` | `""` |
+| start | `开始时间：请提供正确的时间格式xx:xx:xx`<br> | `string` | `""` |
+| end | `结束时间：请提供正确的时间格式xx:xx:xx`<br> | `string` | `""` |
+| type | `精确到的级别`<br>`hour:小时`<br>`minute:小时分钟`<br>`second:小时分钟秒`<br> | `union` | `"second"` |
+| format | `输出时间格式，只对v-model:modelStr有效`<br>`有效格式：`<br>`hh小时`<br>`mm分钟`<br>`ss秒`<br> | `string` | `"hh:mm:ss"` |
+| cellUnits | `上方的单位名称,'小时', '分钟', '秒数'`<br> | `Array` | `() => [] as string[]` |
+| zIndex | `层级`<br> | `number` | `1100` |
+| showClose | `是否显示关闭按钮`<br> | `boolean` | `false` |
+| disabled | `是否禁用弹出`<br> | `boolean` | `false` |
+| widthCoverCenter | `宽屏时是否让内容剧中显示`<br>`并限制其宽为屏幕宽，只展示中间内容以适应宽屏。`<br> | `boolean` | `false` |
+
+
+## Events 事件
+
+| 名称 | 参数 | 说明 |
+| ------ | ---- | ---- |
+| cancel | `-` | 取消时触发 |
+| confirm | `date: string<br>` | 确认触发 |
+| change | `date: string<br>` | 滑动变换时触发 |
+| update:modelShow | `-` | 变量控制打开状态<br>等同v-model:model-show |
+| update:modelStr | `-` | 经格式化后的值。等同v-model:model-str |
+| update:modelValue | `-` | - |
+
+
+## Slots 插槽
+
+| 名称 | 说明 | 数据 |
+| ------ | ---- | ---- |
+| default | `插槽,默认触发打开选择器。你的默认布局可以放置在这里。` | - |
+
+
+## Ref 方法
+
+| 名称 | 参数 | 返回值 | 说明 |
+| ------ | ---- | ---- | ---- |
+| - | - | - | - |
+
+## 示例文件路径
+
+```json
+/pages/biaodan/picker-time
+```
+
+## 示例源码
+
+```vue
+<template>
+
+	<!-- #ifdef MP-WEIXIN -->
+	<page-meta :page-style="`background-color:${xThemeConfigBgColor}`">
+		<navigation-bar :background-color="xThemeConfigNavBgColor" :front-color="xThemeConfigNavFontColor"></navigation-bar>
+	</page-meta>
+	<!-- #endif -->
+		<x-sheet>
+			<x-text font-size="18" class=" text-weight-b mb-8">时间选择器 PickerTime</x-text>
+			<x-text color="#999999" >这是单独显示和控制选择时分秒选择器。如果你需要年月日到秒的全部选择请参考x-picker-date。</x-text>
+		</x-sheet>
+
+		<x-sheet>
+			<x-picker-time start="08:00:00" end="20:30:30" v-model="nowVal" v-model:model-str="date" format="hh时mm分ss秒">
+				<x-button :block="true">打开时间</x-button>
+			</x-picker-time>
+
+			<x-sheet :margin="['0','12']" dark-color="#333">
+				<x-text color="#999999">选中的值：{{nowVal}}</x-text>
+				<x-text color="#999999">经format的值：{{date}}</x-text>
+			</x-sheet>
+		</x-sheet>
+		<x-sheet>
+			<x-button skin='thin' :block="true"  @click="nowVal = '12:14:30'">赋值12:14:30</x-button>
+		</x-sheet>
+	
+</template>
+
+<script setup lang="ts">
+	const date = ref("")
+	const nowVal = ref("10:00:01")
+	
+</script>
+
+<style lang="scss">
+
+</style>
+```
+
+---
+
+## 版权
+
+@2026 tmui4x [https://xui.tmui.design](https://xui.tmui.design)