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//345/215/225/346/273/221/345/235/227 xSlider.md"

@@ -0,0 +1,130 @@
+# 单滑块 xSlider
+
+## 介绍
+
+此为单向滑块,双向滑块见:x-slider-double
+
+## 平台兼容
+
+| Harmony | H5 | andriod | IOS | 小程序 | UTS | UNIAPP-X SDK | version |
+| --- | --- | --- | --- | --- | --- | --- | --- |
+| ☑ | ☑ | ☑️ | ☑️ | ☑️ | ☑️ | 4.76+ | 1.1.18 |
+
+## 文件路径
+
+```ts
+@/uni_modules/tmx-ui/components/x-slider/x-slider.uvue
+```
+
+## 使用
+
+```ts
+<x-slider></x-slider>
+```
+
+## Props 属性
+
+| 名称 | 说明 | 类型 | 默认值 |
+| ------ | ---- | ---- | ---- |
+| modelValue | `等同v-model当前的值`<br> | `number` | `0` |
+| max | `最大值`<br> | `number` | `100` |
+| min | `最小值`<br> | `number` | `0` |
+| disabled | `是否禁用`<br> | `boolean` | `false` |
+| step | `步进值`<br> | `number` | `0` |
+| stepCount | `步进刻度数量`<br> | `number` | `0` |
+| color | `激活时的颜色，空值取全局值`<br> | `string` | `""` |
+| bgColor | `默认的背景色`<br> | `string` | `"info"` |
+| size | `滑条的大小`<br> | `string` | `"4"` |
+| btnSize | `滑块的尺寸`<br> | `string` | `"32"` |
+| round | `滑条的圆角，空值取全局进度条值`<br> | `string` | `""` |
+| showLabel | `是否显示进度条上的label文本`<br> | `boolean` | `false` |
+| labelColor | `文本颜色`<br> | `string` | `"black"` |
+| labelFontSize | `文本文字大小`<br> | `string` | `"12"` |
+
+
+## Events 事件
+
+| 名称 | 参数 | 说明 |
+| ------ | ---- | ---- |
+| change | `-` | 拖动变换时触发 |
+| update:modelValue | `-` | - |
+
+
+## Slots 插槽
+
+| 名称 | 说明 | 数据 |
+| ------ | ---- | ---- |
+| right | `右插槽` | value: number<br>value: number<br>percentage: number<br>percentage: number<br> |
+
+
+## Ref 方法
+
+| 名称 | 参数 | 返回值 | 说明 |
+| ------ | ---- | ---- | ---- |
+| - | - | - | - |
+
+## 示例文件路径
+
+```json
+/pages/biaodan/slider
+```
+
+## 示例源码
+
+```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">滑块 Slider</x-text>
+			<x-text color="#999999" >双向和单向滑块分属两个组件</x-text>
+		</x-sheet>
+		<x-sheet>
+			<x-text font-size="18" class=" text-weight-b mb-16">单向</x-text>
+			<x-slider :model-value="64"></x-slider>
+			<x-text  font-size="18" class=" text-weight-b my-16">显示文本和颜色及刻度</x-text>
+			<x-slider :min="0" :max="100" :step="10"  :model-value="0" color="error" :show-label="true"></x-slider>
+			<x-text font-size="18" class=" text-weight-b mb-16">修改条及滑块按钮大小及,min,max</x-text>
+			<x-slider :min="50" :max="300"  v-model="nowValue" label-font-size="16" btn-size="32" size="10" color="success" :show-label="true"></x-slider>
+			
+			<view class="mt-20">
+				<x-button :block="true" @click="nowValue=200">动态赋值200</x-button>
+			</view>
+		</x-sheet>
+		
+		<x-sheet>
+			<x-text font-size="18" class=" text-weight-b mb-16">双向</x-text>
+			<x-slider-double v-model="nowValueDouble1"></x-slider-double>
+			<x-text font-size="18" class=" text-weight-b my-16">显示文本和颜色</x-text>
+			<x-slider-double v-model="nowValueDouble2" color="error" :show-label="true"></x-slider-double>
+			<x-text font-size="18" class=" text-weight-b my-16">修改条及滑块按钮大小及,min,max</x-text>
+			<x-slider-double :show-label="true" :stepCount="5" :step="50" :min="50" :max="300"  v-model="nowValueDouble" btn-size="30" size="20" color="success" ></x-slider-double>
+			
+			<view class="mt-20">
+				<x-button :block="true" @click="nowValueDouble=[50,200]">动态赋值[80,200]</x-button>
+			</view>
+		</x-sheet>
+</template>
+
+<script setup lang="ts">
+	import { ref } from 'vue'
+	const nowValue = ref(80)
+	const nowValueDouble1 = ref<number[]>([10,30])
+	const nowValueDouble2 = ref<number[]>([30,80])
+	const nowValueDouble = ref<number[]>([100,150])
+	
+</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//345/215/225/351/200/211/346/241/206 xRadio.md"

@@ -0,0 +1,220 @@
+# 单选框 xRadio
+
+## 介绍
+
+使用时,x-radio能单独使用，如果要与x-radio-group配合，从1.1.2开始允许是非直接x-radio-group子节点布局,但考虑到性能建议是直接子节点.
+
+## 平台兼容
+
+| Harmony | H5 | andriod | IOS | 小程序 | UTS | UNIAPP-X SDK | version |
+| --- | --- | --- | --- | --- | --- | --- | --- |
+| ☑ | ☑ | ☑️ | ☑️ | ☑️ | ☑️ | 4.76+ | 1.1.18 |
+
+## 文件路径
+
+```ts
+@/uni_modules/tmx-ui/components/x-radio/x-radio.uvue
+```
+
+## 使用
+
+```ts
+<x-radio></x-radio>
+```
+
+## Props 属性
+
+| 名称 | 说明 | 类型 | 默认值 |
+| ------ | ---- | ---- | ---- |
+| color | `当前主题色，空值时取全局`<br> | `string` | `""` |
+| unCheckColor | `当前未选中时主题色，空值时取全局`<br> | `string` | `""` |
+| darkUnCheckColor | `当前未选中时的暗黑主题色`<br> | `string` | `""` |
+| modelValue | `当前选中的值，受控时为v-model="x"`<br> | `union` | `""` |
+| defaultChecked | `非受控下默认选中的状态`<br> | `boolean` | `false` |
+| value | `选中的值`<br> | `union` | `"1"` |
+| unCheckValue | `未选中的值`<br> | `union` | `""` |
+| disabled | `是否禁用`<br> | `boolean` | `false` |
+| icon | `选中的图标名称。`<br> | `string` | `"checkbox-blank-circle-fill"` |
+| label | `右侧文字。`<br> | `string` | `""` |
+| hiddenCheckbox | `是否隐藏选中框。然后利用默认插槽自定义选中所有样式和状态。`<br> | `boolean` | `false` |
+| size | `尺寸`<br> | `string` | `"24"` |
+| iconSize | `中间小图标大小`<br> | `string` | `"20"` |
+| labelFontSize | `文字大小`<br> | `string` | `"15px"` |
+| labelSpace | `label和选中框间的间距`<br> | `string` | `'10'` |
+| onlyChecked | `是否允许取消选中.之前因为大家的需求不一样`<br>`有的人需要允许取消选中,有的人不需要取消选中`<br>`现在单独开这个属性各取所需,出现这个属性时,group或者单个使用时将不允许取消选中,至少保留一项选择.`<br>`这个属性我不能设置默认为true,因为要向下兼容,所有需要的人麻烦自己设置为true`<br> | `boolean` | `false` |
+
+
+## Events 事件
+
+| 名称 | 参数 | 说明 |
+| ------ | ---- | ---- |
+| change | `check: boolean<br>value: number<br>` | 用户交互切换，选中变换时触发。 |
+| click | `-` | 点击事件 |
+| update:modelValue | `-` | - |
+
+
+## Slots 插槽
+
+| 名称 | 说明 | 数据 |
+| ------ | ---- | ---- |
+| label | `默认文本插槽` | checked: boolean<br>checked: string<br>value: boolean<br>value: string<br> |
+
+
+## Ref 方法
+
+| 名称 | 参数 | 返回值 | 说明 |
+| ------ | ---- | ---- | ---- |
+| - | - | - | - |
+
+## 示例文件路径
+
+```json
+/pages/biaodan/radio
+```
+
+## 示例源码
+
+```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">单选框 xRadio</x-text>
+		<x-text color="#999999">
+			由于uniappx3.98不支持联合类型推断，因此选中和未选中值只能是string，待后续官方兼容类型推断
+			允许单个使用，与checkbox无异。组合使用时只能选一个。
+		</x-text>
+	</x-sheet>
+	<x-loading v-if="loading"></x-loading>
+	<view v-if="!loading">
+
+		<x-sheet class="flex flex-row">
+
+			<x-radio label="苹果"></x-radio>
+			<x-radio color="error" unCheckColor="black" darkUnCheckColor="#999999" class="ml-12" label="香蕉"></x-radio>
+			<x-radio color="warn" model-value="1" unCheckColor="error" class="ml-12" label="豆腐"></x-radio>
+			<x-radio :disabled="true" color="success" unCheckColor="warn" class="ml-12" label="我被禁用"></x-radio>
+		</x-sheet>
+		<x-sheet>
+			<x-radio unCheckColor="primary">
+				<template #label><x-text>由于uniappx3.98不支持联合类型推断，因此选中和未选中值只能是string，待后续官方兼容类型推断</x-text></template>
+			</x-radio>
+			<x-radio color="error" unCheckColor="error" class="mt-16">
+				<template #label><x-text>由于uniappx3.98不支持联合类型推断，因此选中和未选中值只能是string，待后续官方兼容类型推断</x-text></template>
+			</x-radio>
+			<x-radio :only-checked="true" color="error" unCheckColor="error" class="mt-16">
+				<template #label><x-text>单个使用,设置选中后不允许取消,点我!</x-text></template>
+			</x-radio>
+			<x-radio-group direction='column'>
+				<x-radio color="error" unCheckColor="error" class="mt-16">
+					<template #label>
+						<view style="width: 99%;">
+							<x-text>由于uniappx3.98不支持联合类型推断，因此选中和未选中值只能是string，待后续官方兼容类型推断</x-text>
+						</view>
+					</template>
+				</x-radio>
+			</x-radio-group>
+
+		</x-sheet>
+		<x-sheet>
+			<x-text font-size="18" class=" text-weight-b mb-8">通过插槽完全自定样式</x-text>
+			<x-text color="#999999">不需要再引入其它变量，可通过插槽变量控制样式</x-text>
+		</x-sheet>
+		<x-sheet>
+			<x-radio :hidden-checkbox="true">
+				<template #label="{checked,value}">
+					<x-sheet :margin="['0']" :color="checked?'primary':'info'"
+						class="flex flex-row flex-row-center-start">
+						<x-radio :model-value="value" color="warn"></x-radio>
+						<x-text :class="[checked?'text-white':'text-black']">{{checked}}点击我来切换选中</x-text>
+					</x-sheet>
+				</template>
+			</x-radio>
+
+			<x-radio :hidden-checkbox="true">
+				<template #label="{checked,value}">
+					<x-sheet :margin="['0','16','0','0']" :color="checked?'success':'info'"
+						class="flex flex-row flex-row-center-start">
+						<x-radio :model-value="value" :color="checked?'warn':'error'"></x-radio>
+						<x-text :class="[checked?'text-white':'text-black']">{{checked}}点击我来切换选中</x-text>
+					</x-sheet>
+				</template>
+			</x-radio>
+
+		</x-sheet>
+		<x-sheet>
+			<x-text font-size="18" class=" text-weight-b">修改选中的图标</x-text>
+		</x-sheet>
+		<x-sheet class="flex flex-row">
+			<x-radio model-value="1" icon="check-double-line" label="苹果"></x-radio>
+			<x-radio model-value="1" icon="thunderstorms-fill" color="error" class="ml-12" label="香蕉"></x-radio>
+			<x-radio model-value="1" icon="flutter-fill" color="success" class="ml-12" label="香蕉"></x-radio>
+		</x-sheet>
+
+		<x-sheet>
+			<x-text font-size="18" class=" text-weight-b mb-8">单选框组 x-radio-group</x-text>
+			<x-text color="#999999">使用时,x-radio只能是x-radio-group的直接子节点</x-text>
+			<x-text color="#999999">{{checkbox}},选项组时value是唯一值，不可重复。</x-text>
+		</x-sheet>
+
+		<x-sheet>
+			<!-- 不允许全部取消,至少要选中一项. -->
+			<x-radio-group v-model="checkbox">
+				<x-radio :onlyChecked="true" v-for="(item,index) in list" :key="index" class="pr-12 mb-12"
+					:label="item.label" :value="item.id"></x-radio>
+			</x-radio-group>
+			<x-button :block="true" @click="checkbox = '4'">赋值4</x-button>
+		</x-sheet>
+
+		<x-sheet>
+			<x-radio-group v-model="checkbox" direction="column">
+				<view hover-class="opacity-5 " :hover-stay-time="100" @click="checkbox = item.id"
+					v-for="(item,index) in list" :key="index" class="py-12 flex flex-row flex-row-center-between">
+					<x-text>{{item.label}}</x-text>
+					<x-radio style="pointer-events: none;" :value="item.id" labelSpace="0"></x-radio>
+				</view>
+			</x-radio-group>
+		</x-sheet>
+	</view>
+
+</template>
+
+<script setup lang="ts">
+	import { ref, onMounted } from 'vue'
+	type listtype = {
+		label : string,
+		id : string
+	}
+
+	const loading = ref(true)
+	const checkbox = ref("3")
+	const checkbox2 = ref("")
+	const indeterminate = ref(false)
+	const checked = ref("")
+	const list = ref<listtype[]>([
+		{ label: "香蕉", id: "1" } as listtype,
+		{ label: "豆腐", id: "2" } as listtype,
+		{ label: "苹果", id: "3" } as listtype,
+		{ label: "大豆", id: "4" } as listtype,
+		{ label: "李子", id: "5" } as listtype,
+	])
+
+	onMounted(() => {
+		loading.value = false
+	})
+</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//345/215/225/351/200/211/346/241/206/347/273/204 xRadioGroup.md"

@@ -0,0 +1,207 @@
+# 单选框组 xRadioGroup
+
+## 介绍
+
+使用时,从1.1.2开始允许是非直接xRadio子节点布局,但考虑到性能建议是直接子节点.
+
+## 平台兼容
+
+| Harmony | H5 | andriod | IOS | 小程序 | UTS | UNIAPP-X SDK | version |
+| --- | --- | --- | --- | --- | --- | --- | --- |
+| ☑ | ☑ | ☑️ | ☑️ | ☑️ | ☑️ | 4.76+ | 1.1.18 |
+
+## 文件路径
+
+```ts
+@/uni_modules/tmx-ui/components/x-radio-group/x-radio-group.uvue
+```
+
+## 使用
+
+```ts
+<x-radio-group></x-radio-group>
+```
+
+## Props 属性
+
+| 名称 | 说明 | 类型 | 默认值 |
+| ------ | ---- | ---- | ---- |
+| modelValue | `当前选中的值。null表示未选中。`<br> | `union` | `""` |
+| direction | `对齐方式`<br> | `union` | `"row"` |
+
+
+## Events 事件
+
+| 名称 | 参数 | 说明 |
+| ------ | ---- | ---- |
+| change | `val: union<br>` | 选项变化时触发。 |
+| update:modelValue | `-` | - |
+
+
+## Slots 插槽
+
+| 名称 | 说明 | 数据 |
+| ------ | ---- | ---- |
+| default | `从1.1.2开始允许是非直接xRadioGroup子节点布局,但考虑到性能建议是直接子节点.` | - |
+
+
+## Ref 方法
+
+| 名称 | 参数 | 返回值 | 说明 |
+| ------ | ---- | ---- | ---- |
+| addItem | - | `-` | 添加单选项 * |
+| getAllSelecteds | - | `-` | 获取所有选中的值 * |
+
+
+## 示例文件路径
+
+```json
+/pages/biaodan/radio
+```
+
+## 示例源码
+
+```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">单选框 xRadio</x-text>
+		<x-text color="#999999">
+			由于uniappx3.98不支持联合类型推断，因此选中和未选中值只能是string，待后续官方兼容类型推断
+			允许单个使用，与checkbox无异。组合使用时只能选一个。
+		</x-text>
+	</x-sheet>
+	<x-loading v-if="loading"></x-loading>
+	<view v-if="!loading">
+
+		<x-sheet class="flex flex-row">
+
+			<x-radio label="苹果"></x-radio>
+			<x-radio color="error" unCheckColor="black" darkUnCheckColor="#999999" class="ml-12" label="香蕉"></x-radio>
+			<x-radio color="warn" model-value="1" unCheckColor="error" class="ml-12" label="豆腐"></x-radio>
+			<x-radio :disabled="true" color="success" unCheckColor="warn" class="ml-12" label="我被禁用"></x-radio>
+		</x-sheet>
+		<x-sheet>
+			<x-radio unCheckColor="primary">
+				<template #label><x-text>由于uniappx3.98不支持联合类型推断，因此选中和未选中值只能是string，待后续官方兼容类型推断</x-text></template>
+			</x-radio>
+			<x-radio color="error" unCheckColor="error" class="mt-16">
+				<template #label><x-text>由于uniappx3.98不支持联合类型推断，因此选中和未选中值只能是string，待后续官方兼容类型推断</x-text></template>
+			</x-radio>
+			<x-radio :only-checked="true" color="error" unCheckColor="error" class="mt-16">
+				<template #label><x-text>单个使用,设置选中后不允许取消,点我!</x-text></template>
+			</x-radio>
+			<x-radio-group direction='column'>
+				<x-radio color="error" unCheckColor="error" class="mt-16">
+					<template #label>
+						<view style="width: 99%;">
+							<x-text>由于uniappx3.98不支持联合类型推断，因此选中和未选中值只能是string，待后续官方兼容类型推断</x-text>
+						</view>
+					</template>
+				</x-radio>
+			</x-radio-group>
+
+		</x-sheet>
+		<x-sheet>
+			<x-text font-size="18" class=" text-weight-b mb-8">通过插槽完全自定样式</x-text>
+			<x-text color="#999999">不需要再引入其它变量，可通过插槽变量控制样式</x-text>
+		</x-sheet>
+		<x-sheet>
+			<x-radio :hidden-checkbox="true">
+				<template #label="{checked,value}">
+					<x-sheet :margin="['0']" :color="checked?'primary':'info'"
+						class="flex flex-row flex-row-center-start">
+						<x-radio :model-value="value" color="warn"></x-radio>
+						<x-text :class="[checked?'text-white':'text-black']">{{checked}}点击我来切换选中</x-text>
+					</x-sheet>
+				</template>
+			</x-radio>
+
+			<x-radio :hidden-checkbox="true">
+				<template #label="{checked,value}">
+					<x-sheet :margin="['0','16','0','0']" :color="checked?'success':'info'"
+						class="flex flex-row flex-row-center-start">
+						<x-radio :model-value="value" :color="checked?'warn':'error'"></x-radio>
+						<x-text :class="[checked?'text-white':'text-black']">{{checked}}点击我来切换选中</x-text>
+					</x-sheet>
+				</template>
+			</x-radio>
+
+		</x-sheet>
+		<x-sheet>
+			<x-text font-size="18" class=" text-weight-b">修改选中的图标</x-text>
+		</x-sheet>
+		<x-sheet class="flex flex-row">
+			<x-radio model-value="1" icon="check-double-line" label="苹果"></x-radio>
+			<x-radio model-value="1" icon="thunderstorms-fill" color="error" class="ml-12" label="香蕉"></x-radio>
+			<x-radio model-value="1" icon="flutter-fill" color="success" class="ml-12" label="香蕉"></x-radio>
+		</x-sheet>
+
+		<x-sheet>
+			<x-text font-size="18" class=" text-weight-b mb-8">单选框组 x-radio-group</x-text>
+			<x-text color="#999999">使用时,x-radio只能是x-radio-group的直接子节点</x-text>
+			<x-text color="#999999">{{checkbox}},选项组时value是唯一值，不可重复。</x-text>
+		</x-sheet>
+
+		<x-sheet>
+			<!-- 不允许全部取消,至少要选中一项. -->
+			<x-radio-group v-model="checkbox">
+				<x-radio :onlyChecked="true" v-for="(item,index) in list" :key="index" class="pr-12 mb-12"
+					:label="item.label" :value="item.id"></x-radio>
+			</x-radio-group>
+			<x-button :block="true" @click="checkbox = '4'">赋值4</x-button>
+		</x-sheet>
+
+		<x-sheet>
+			<x-radio-group v-model="checkbox" direction="column">
+				<view hover-class="opacity-5 " :hover-stay-time="100" @click="checkbox = item.id"
+					v-for="(item,index) in list" :key="index" class="py-12 flex flex-row flex-row-center-between">
+					<x-text>{{item.label}}</x-text>
+					<x-radio style="pointer-events: none;" :value="item.id" labelSpace="0"></x-radio>
+				</view>
+			</x-radio-group>
+		</x-sheet>
+	</view>
+
+</template>
+
+<script setup lang="ts">
+	import { ref, onMounted } from 'vue'
+	type listtype = {
+		label : string,
+		id : string
+	}
+
+	const loading = ref(true)
+	const checkbox = ref("3")
+	const checkbox2 = ref("")
+	const indeterminate = ref(false)
+	const checked = ref("")
+	const list = ref<listtype[]>([
+		{ label: "香蕉", id: "1" } as listtype,
+		{ label: "豆腐", id: "2" } as listtype,
+		{ label: "苹果", id: "3" } as listtype,
+		{ label: "大豆", id: "4" } as listtype,
+		{ label: "李子", id: "5" } as listtype,
+	])
+
+	onMounted(() => {
+		loading.value = false
+	})
+</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//345/217/214/345/220/221/346/273/221/345/235/227 xSliderDouble.md"

@@ -0,0 +1,130 @@
+# 双向滑块 xSliderDouble
+
+## 介绍
+
+此为双向滑块,单向滑块见:x-slider
+
+## 平台兼容
+
+| Harmony | H5 | andriod | IOS | 小程序 | UTS | UNIAPP-X SDK | version |
+| --- | --- | --- | --- | --- | --- | --- | --- |
+| ☑ | ☑ | ☑️ | ☑️ | ☑️ | ☑️ | 4.76+ | 1.1.18 |
+
+## 文件路径
+
+```ts
+@/uni_modules/tmx-ui/components/x-slider-double/x-slider-double.uvue
+```
+
+## 使用
+
+```ts
+<x-slider-double></x-slider-double>
+```
+
+## Props 属性
+
+| 名称 | 说明 | 类型 | 默认值 |
+| ------ | ---- | ---- | ---- |
+| modelValue | `等同v-model当前值`<br> | `Array` | `() : number[] => [0, 0] as number[]` |
+| max | `最大值`<br> | `number` | `100` |
+| min | `最小值`<br> | `number` | `0` |
+| disabled | `是否禁用`<br> | `boolean` | `false` |
+| step | `步进值`<br> | `number` | `1` |
+| stepCount | `步进刻度数量`<br> | `number` | `0` |
+| color | `激活时的颜色，空值取全局值`<br> | `string` | `""` |
+| bgColor | `默认的背景色`<br> | `string` | `"info"` |
+| size | `滑条的大小`<br> | `string` | `"4"` |
+| btnSize | `滑块的尺寸`<br> | `string` | `"32"` |
+| round | `滑条的圆角，空值取全局进度条值`<br> | `string` | `""` |
+| showLabel | `是否显示进度条上的label文本`<br> | `boolean` | `false` |
+| labelColor | `文本颜色`<br> | `string` | `"black"` |
+| labelFontSize | `文本文字大小`<br> | `string` | `"12"` |
+
+
+## Events 事件
+
+| 名称 | 参数 | 说明 |
+| ------ | ---- | ---- |
+| change | `-` | 拖动变换时触发 |
+| update:modelValue | `-` | - |
+
+
+## Slots 插槽
+
+| 名称 | 说明 | 数据 |
+| ------ | ---- | ---- |
+| right | `右插槽` | value: number[]<br>value: number[]<br>percentage: number[]<br>percentage: number[]<br> |
+
+
+## Ref 方法
+
+| 名称 | 参数 | 返回值 | 说明 |
+| ------ | ---- | ---- | ---- |
+| - | - | - | - |
+
+## 示例文件路径
+
+```json
+/pages/biaodan/slider
+```
+
+## 示例源码
+
+```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">滑块 Slider</x-text>
+			<x-text color="#999999" >双向和单向滑块分属两个组件</x-text>
+		</x-sheet>
+		<x-sheet>
+			<x-text font-size="18" class=" text-weight-b mb-16">单向</x-text>
+			<x-slider :model-value="64"></x-slider>
+			<x-text  font-size="18" class=" text-weight-b my-16">显示文本和颜色及刻度</x-text>
+			<x-slider :min="0" :max="100" :step="10"  :model-value="0" color="error" :show-label="true"></x-slider>
+			<x-text font-size="18" class=" text-weight-b mb-16">修改条及滑块按钮大小及,min,max</x-text>
+			<x-slider :min="50" :max="300"  v-model="nowValue" label-font-size="16" btn-size="32" size="10" color="success" :show-label="true"></x-slider>
+			
+			<view class="mt-20">
+				<x-button :block="true" @click="nowValue=200">动态赋值200</x-button>
+			</view>
+		</x-sheet>
+		
+		<x-sheet>
+			<x-text font-size="18" class=" text-weight-b mb-16">双向</x-text>
+			<x-slider-double v-model="nowValueDouble1"></x-slider-double>
+			<x-text font-size="18" class=" text-weight-b my-16">显示文本和颜色</x-text>
+			<x-slider-double v-model="nowValueDouble2" color="error" :show-label="true"></x-slider-double>
+			<x-text font-size="18" class=" text-weight-b my-16">修改条及滑块按钮大小及,min,max</x-text>
+			<x-slider-double :show-label="true" :stepCount="5" :step="50" :min="50" :max="300"  v-model="nowValueDouble" btn-size="30" size="20" color="success" ></x-slider-double>
+			
+			<view class="mt-20">
+				<x-button :block="true" @click="nowValueDouble=[50,200]">动态赋值[80,200]</x-button>
+			</view>
+		</x-sheet>
+</template>
+
+<script setup lang="ts">
+	import { ref } from 'vue'
+	const nowValue = ref(80)
+	const nowValueDouble1 = ref<number[]>([10,30])
+	const nowValueDouble2 = ref<number[]>([30,80])
+	const nowValueDouble = ref<number[]>([100,150])
+	
+</script>
+
+<style lang="scss">
+
+</style>
+```
+
+---
+
+## 版权
+
+@2026 tmui4x [https://xui.tmui.design](https://xui.tmui.design)