tmui-cli 2.0.1 → 2.0.3

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/244/232/351/200/211/346/241/206 xCheckbox.md"

@@ -0,0 +1,273 @@
+# 多选框 xCheckbox
+
+## 介绍
+
+使用时,x-checkbox能单独使用，如果要与x-checkbox-group配合，只能是它的的直接子节点
+
+## 平台兼容
+
+| Harmony | H5 | andriod | IOS | 小程序 | UTS | UNIAPP-X SDK | version |
+| --- | --- | --- | --- | --- | --- | --- | --- |
+| ☑ | ☑ | ☑️ | ☑️ | ☑️ | ☑️ | 4.76+ | 1.1.18 |
+
+## 文件路径
+
+```ts
+@/uni_modules/tmx-ui/components/x-checkbox/x-checkbox.uvue
+```
+
+## 使用
+
+```ts
+<x-checkbox></x-checkbox>
+```
+
+## 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` | `"check-line"` |
+| label | `右侧文字。`<br> | `string` | `""` |
+| hiddenCheckbox | `是否隐藏选中框。然后利用默认插槽自定义选中所有样式和状态。`<br> | `boolean` | `false` |
+| indeterminate | `半选中`<br> | `boolean` | `false` |
+| size | `尺寸`<br> | `string` | `"24"` |
+| iconSize | `中间小图标大小`<br> | `string` | `"20"` |
+| labelFontSize | `文字大小`<br> | `string` | `"15px"` |
+| labelSpace | `label和选中框间的间距`<br> | `string` | `'10'` |
+| round | `圆角`<br> | `string` | `'4'` |
+
+
+## Events 事件
+
+| 名称 | 参数 | 说明 |
+| ------ | ---- | ---- |
+| change | `check: Boolean<br>value: union<br>` | 用户交互切换，选中变换时触发。 |
+| click | `-` | 点击事件 |
+| update:modelValue | `-` | - |
+
+
+## Slots 插槽
+
+| 名称 | 说明 | 数据 |
+| ------ | ---- | ---- |
+| label | `默认文本插槽` | checked: boolean<br>checked: number<br>value: boolean<br>value: number<br> |
+
+
+## Ref 方法
+
+| 名称 | 参数 | 返回值 | 说明 |
+| ------ | ---- | ---- | ---- |
+| - | - | - | - |
+
+## 示例文件路径
+
+```json
+/pages/biaodan/checkbox
+```
+
+## 示例源码
+
+```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">多选框 checkbox</x-text>
+			<x-text  color="#999999">
+				由于uniappx3.98不支持联合类型推断，因此选中和未选中值只能是number，待后续官方兼容类型推断
+			</x-text>
+		</x-sheet>
+		<x-loading v-if="loading"></x-loading>
+		<view v-if="!loading">
+			<x-sheet class="flex flex-row">
+				
+				<x-checkbox @change="onlyChange" label="苹果"></x-checkbox>
+				<x-checkbox color="error"  unCheckColor="error" class="ml-12" label="香蕉"></x-checkbox>
+				<x-checkbox color="warn"  unCheckColor="warn" class="ml-12" label="豆腐"></x-checkbox>
+				<x-checkbox :model-value="'1'" color="success"  unCheckColor="success" class="ml-12" label="李子"></x-checkbox>
+			</x-sheet>
+			<x-sheet>
+				<x-checkbox   unCheckColor="primary" >
+					<template v-slot:label><x-text>由于uniappx3.98不支持联合类型推断，因此选中和未选中值只能是number，待后续官方兼容类型推断</x-text></template>
+				</x-checkbox>
+				<x-checkbox color="error"   unCheckColor="error"  class="mt-12">
+					<template v-slot:label><x-text>由于uniappx3.98不支持联合类型推断，因此选中和未选中值只能是number，待后续官方兼容类型推断</x-text></template>
+				</x-checkbox>
+				<x-checkbox-group direction='column'>
+					<x-checkbox  color="error"   unCheckColor="error"  class="mt-12">
+						<template v-slot:label>
+							<x-text>由于uniappx3.98不支持联合类型推断，因此选中和未选中值只能是number，待后续官方兼容类型推断</x-text>
+						</template>
+					</x-checkbox>
+				</x-checkbox-group>
+			</x-sheet>
+			<x-sheet>
+				<x-text font-size="18" class=" text-weight-b mb-8">通过插槽完全自定样式</x-text>
+				<x-text  color="#999999" class="text-size-b">
+					不需要再引入其它变量，可通过插槽变量控制样式
+				</x-text>
+			</x-sheet>
+			<x-sheet>
+				<x-checkbox :hidden-checkbox="true">
+					<template v-slot:label="{checked,value}">
+						<x-sheet :margin="['0']" :color="checked?'primary':'info'"
+							class="flex flex-row flex-row-center-start">
+							<x-checkbox :model-value="value" color="warn"></x-checkbox>
+							<x-text :class="[checked?'text-white':'text-black']" class="flex-1">{{checked}}点击我来切换选中</x-text>
+						</x-sheet>
+					</template>
+				</x-checkbox>
+
+				<x-checkbox :hidden-checkbox="true">
+					<template v-slot:label="{checked,value}">
+						<x-sheet :margin="['0','16','0','0']" :color="checked?'success':'info'"
+							class="flex flex-row flex-row-center-start">
+							<x-checkbox :model-value="value" :color="checked?'warn':'error'"></x-checkbox>
+							<x-text :class="[checked?'text-white':'text-black']" class="flex-1">{{checked}}点击我来切换选中</x-text>
+						</x-sheet>
+					</template>
+				</x-checkbox>
+
+			</x-sheet>
+			<x-sheet>
+				<x-text font-size="18" class=" text-weight-b">修改选中的图标</x-text>
+			</x-sheet>
+			<x-sheet class="flex flex-row">
+				<x-checkbox :model-value="'1'" icon="check-double-line" label="苹果"></x-checkbox>
+				<x-checkbox :model-value="'1'" icon="thunderstorms-fill" color="error" class="ml-12"
+					label="香蕉"></x-checkbox>
+				<x-checkbox :model-value="'1'" icon="flutter-fill" color="success" class="ml-12" label="香蕉"></x-checkbox>
+			</x-sheet>
+
+			<x-sheet>
+				<x-text font-size="18" class=" text-weight-b mb-8">多选框组 x-checkbox-group</x-text>
+				<x-text  color="#999999" class="text-size-b">
+					使用时,x-checkbox可以不是x-checkbox-group的直接子节点
+				</x-text>
+				<x-text  color="#999999" class="text-size-b">
+					{{checkbox.toString()}},选项组时value是唯一值，不可重复。
+				</x-text>
+
+			</x-sheet>
+			<x-sheet>
+				<x-checkbox-group v-model="checkbox">
+					<x-checkbox  v-for="(item,index) in list" :key="index" class="pr-12 mb-12" :label="item.label"
+						:value="item.id"></x-checkbox>
+				</x-checkbox-group>
+				<x-button :block="true" @click="checkbox = ['4','5']">赋值['4','5']</x-button>
+			</x-sheet>
+
+			<x-sheet>
+				<x-checkbox-group v-model="checkbox" direction="column">
+					<view hover-class="opacity-5 " :hover-stay-time="100" @click="groupPhus(item.id)" v-for="(item,index) in list" :key="index" class=" flex flex-row flex-row-center-between py-12">
+						<x-text>{{item.label}}</x-text>
+						<x-checkbox  style="pointer-events: none;" :value="item.id" labelSpace="0"></x-checkbox>
+					</view>
+				</x-checkbox-group>
+			</x-sheet>
+			
+
+			<x-sheet>
+				<x-text font-size="18" class=" text-weight-b ">半选中状态{{checkbox2.toString()}}</x-text>
+			</x-sheet>
+			<x-sheet>
+				<x-checkbox class="mb-12" @change="allChange" v-model="checked" :indeterminate="indeterminate"
+					label="全部"></x-checkbox>
+				<x-checkbox-group @change="onChange" v-model="checkbox2">
+					<x-checkbox v-for="(item,index) in list" :key="index" class="pr-12 mb-12" :label="item.label"
+						:value="item.id"></x-checkbox>
+				</x-checkbox-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(['2', '3'])
+	const checkbox2 = ref<string[]>([])
+	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,
+	])
+	
+	const onlyChange = (isChecked:boolean) => {
+		console.log(isChecked)
+	}
+	
+	const groupPhus = (id:string) => {
+		let obxids = checkbox.value.slice(0)
+		let index = checkbox.value.findIndex((eid:string):boolean => eid == id)
+		if(index>-1){
+			obxids.splice(index,1)
+		}else{
+			obxids.push(id)
+		}
+		checkbox.value = obxids
+	}
+	
+	const onChange = (value : string[]) => {
+		if (value.length == list.value.length) {
+			indeterminate.value = false;
+			checked.value = "1";
+		} else if (value.length < list.value.length && value.length > 0) {
+			indeterminate.value = true;
+			checked.value = "";
+		} else {
+			indeterminate.value = false;
+			checked.value = "";
+		}
+	}
+	
+	const allChange = (ischecked : boolean) => {
+		if (ischecked && !indeterminate.value) {
+			indeterminate.value = false;
+			checkbox2.value = ["1","2","3","4","5"]
+		}
+		if (!ischecked && !indeterminate.value) {
+			indeterminate.value = false;
+			checkbox2.value = []
+		}
+		if (indeterminate.value) {
+			indeterminate.value = false;
+			checkbox2.value = ["1","2","3","4","5"]
+			checked.value = '1'
+		}
+	}
+	
+	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/244/232/351/200/211/346/241/206/347/273/204 xCheckboxGroup.md"

@@ -0,0 +1,260 @@
+# 多选框组 xCheckboxGroup
+
+## 介绍
+
+使用时,从1.1.2开始允许是非直接x-checkbox子节点布局,但考虑到性能建议是直接子节点.
+
+## 平台兼容
+
+| Harmony | H5 | andriod | IOS | 小程序 | UTS | UNIAPP-X SDK | version |
+| --- | --- | --- | --- | --- | --- | --- | --- |
+| ☑ | ☑ | ☑️ | ☑️ | ☑️ | ☑️ | 4.76+ | 1.1.18 |
+
+## 文件路径
+
+```ts
+@/uni_modules/tmx-ui/components/x-checkbox-group/x-checkbox-group.uvue
+```
+
+## 使用
+
+```ts
+<x-checkbox-group></x-checkbox-group>
+```
+
+## Props 属性
+
+| 名称 | 说明 | 类型 | 默认值 |
+| ------ | ---- | ---- | ---- |
+| modelValue | `当前选中的值。`<br> | `Array` | `():Array<string number boolean> => [] as Array<string number boolean>` |
+| direction | `对齐方式`<br> | `union` | `"row"` |
+| max | `最大选择数量，-1表示不限制。`<br> | `number` | `-1` |
+
+
+## Events 事件
+
+| 名称 | 参数 | 说明 |
+| ------ | ---- | ---- |
+| change | `val: union<br>` | 选项变化时触发。 |
+| update:modelValue | `-` | - |
+
+
+## Slots 插槽
+
+| 名称 | 说明 | 数据 |
+| ------ | ---- | ---- |
+| default | `从1.1.2开始允许是非直接x-checkbox子节点布局,但考虑到性能建议是直接子节点.` | - |
+
+
+## Ref 方法
+
+| 名称 | 参数 | 返回值 | 说明 |
+| ------ | ---- | ---- | ---- |
+| addItem | - | `-` | 添加多选项 * |
+| getAllSelecteds | - | `-` | 获取所有选中的值 * |
+
+
+## 示例文件路径
+
+```json
+/pages/biaodan/checkbox
+```
+
+## 示例源码
+
+```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">多选框 checkbox</x-text>
+			<x-text  color="#999999">
+				由于uniappx3.98不支持联合类型推断，因此选中和未选中值只能是number，待后续官方兼容类型推断
+			</x-text>
+		</x-sheet>
+		<x-loading v-if="loading"></x-loading>
+		<view v-if="!loading">
+			<x-sheet class="flex flex-row">
+				
+				<x-checkbox @change="onlyChange" label="苹果"></x-checkbox>
+				<x-checkbox color="error"  unCheckColor="error" class="ml-12" label="香蕉"></x-checkbox>
+				<x-checkbox color="warn"  unCheckColor="warn" class="ml-12" label="豆腐"></x-checkbox>
+				<x-checkbox :model-value="'1'" color="success"  unCheckColor="success" class="ml-12" label="李子"></x-checkbox>
+			</x-sheet>
+			<x-sheet>
+				<x-checkbox   unCheckColor="primary" >
+					<template v-slot:label><x-text>由于uniappx3.98不支持联合类型推断，因此选中和未选中值只能是number，待后续官方兼容类型推断</x-text></template>
+				</x-checkbox>
+				<x-checkbox color="error"   unCheckColor="error"  class="mt-12">
+					<template v-slot:label><x-text>由于uniappx3.98不支持联合类型推断，因此选中和未选中值只能是number，待后续官方兼容类型推断</x-text></template>
+				</x-checkbox>
+				<x-checkbox-group direction='column'>
+					<x-checkbox  color="error"   unCheckColor="error"  class="mt-12">
+						<template v-slot:label>
+							<x-text>由于uniappx3.98不支持联合类型推断，因此选中和未选中值只能是number，待后续官方兼容类型推断</x-text>
+						</template>
+					</x-checkbox>
+				</x-checkbox-group>
+			</x-sheet>
+			<x-sheet>
+				<x-text font-size="18" class=" text-weight-b mb-8">通过插槽完全自定样式</x-text>
+				<x-text  color="#999999" class="text-size-b">
+					不需要再引入其它变量，可通过插槽变量控制样式
+				</x-text>
+			</x-sheet>
+			<x-sheet>
+				<x-checkbox :hidden-checkbox="true">
+					<template v-slot:label="{checked,value}">
+						<x-sheet :margin="['0']" :color="checked?'primary':'info'"
+							class="flex flex-row flex-row-center-start">
+							<x-checkbox :model-value="value" color="warn"></x-checkbox>
+							<x-text :class="[checked?'text-white':'text-black']" class="flex-1">{{checked}}点击我来切换选中</x-text>
+						</x-sheet>
+					</template>
+				</x-checkbox>
+
+				<x-checkbox :hidden-checkbox="true">
+					<template v-slot:label="{checked,value}">
+						<x-sheet :margin="['0','16','0','0']" :color="checked?'success':'info'"
+							class="flex flex-row flex-row-center-start">
+							<x-checkbox :model-value="value" :color="checked?'warn':'error'"></x-checkbox>
+							<x-text :class="[checked?'text-white':'text-black']" class="flex-1">{{checked}}点击我来切换选中</x-text>
+						</x-sheet>
+					</template>
+				</x-checkbox>
+
+			</x-sheet>
+			<x-sheet>
+				<x-text font-size="18" class=" text-weight-b">修改选中的图标</x-text>
+			</x-sheet>
+			<x-sheet class="flex flex-row">
+				<x-checkbox :model-value="'1'" icon="check-double-line" label="苹果"></x-checkbox>
+				<x-checkbox :model-value="'1'" icon="thunderstorms-fill" color="error" class="ml-12"
+					label="香蕉"></x-checkbox>
+				<x-checkbox :model-value="'1'" icon="flutter-fill" color="success" class="ml-12" label="香蕉"></x-checkbox>
+			</x-sheet>
+
+			<x-sheet>
+				<x-text font-size="18" class=" text-weight-b mb-8">多选框组 x-checkbox-group</x-text>
+				<x-text  color="#999999" class="text-size-b">
+					使用时,x-checkbox可以不是x-checkbox-group的直接子节点
+				</x-text>
+				<x-text  color="#999999" class="text-size-b">
+					{{checkbox.toString()}},选项组时value是唯一值，不可重复。
+				</x-text>
+
+			</x-sheet>
+			<x-sheet>
+				<x-checkbox-group v-model="checkbox">
+					<x-checkbox  v-for="(item,index) in list" :key="index" class="pr-12 mb-12" :label="item.label"
+						:value="item.id"></x-checkbox>
+				</x-checkbox-group>
+				<x-button :block="true" @click="checkbox = ['4','5']">赋值['4','5']</x-button>
+			</x-sheet>
+
+			<x-sheet>
+				<x-checkbox-group v-model="checkbox" direction="column">
+					<view hover-class="opacity-5 " :hover-stay-time="100" @click="groupPhus(item.id)" v-for="(item,index) in list" :key="index" class=" flex flex-row flex-row-center-between py-12">
+						<x-text>{{item.label}}</x-text>
+						<x-checkbox  style="pointer-events: none;" :value="item.id" labelSpace="0"></x-checkbox>
+					</view>
+				</x-checkbox-group>
+			</x-sheet>
+			
+
+			<x-sheet>
+				<x-text font-size="18" class=" text-weight-b ">半选中状态{{checkbox2.toString()}}</x-text>
+			</x-sheet>
+			<x-sheet>
+				<x-checkbox class="mb-12" @change="allChange" v-model="checked" :indeterminate="indeterminate"
+					label="全部"></x-checkbox>
+				<x-checkbox-group @change="onChange" v-model="checkbox2">
+					<x-checkbox v-for="(item,index) in list" :key="index" class="pr-12 mb-12" :label="item.label"
+						:value="item.id"></x-checkbox>
+				</x-checkbox-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(['2', '3'])
+	const checkbox2 = ref<string[]>([])
+	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,
+	])
+	
+	const onlyChange = (isChecked:boolean) => {
+		console.log(isChecked)
+	}
+	
+	const groupPhus = (id:string) => {
+		let obxids = checkbox.value.slice(0)
+		let index = checkbox.value.findIndex((eid:string):boolean => eid == id)
+		if(index>-1){
+			obxids.splice(index,1)
+		}else{
+			obxids.push(id)
+		}
+		checkbox.value = obxids
+	}
+	
+	const onChange = (value : string[]) => {
+		if (value.length == list.value.length) {
+			indeterminate.value = false;
+			checked.value = "1";
+		} else if (value.length < list.value.length && value.length > 0) {
+			indeterminate.value = true;
+			checked.value = "";
+		} else {
+			indeterminate.value = false;
+			checked.value = "";
+		}
+	}
+	
+	const allChange = (ischecked : boolean) => {
+		if (ischecked && !indeterminate.value) {
+			indeterminate.value = false;
+			checkbox2.value = ["1","2","3","4","5"]
+		}
+		if (!ischecked && !indeterminate.value) {
+			indeterminate.value = false;
+			checkbox2.value = []
+		}
+		if (indeterminate.value) {
+			indeterminate.value = false;
+			checkbox2.value = ["1","2","3","4","5"]
+			checked.value = '1'
+		}
+	}
+	
+	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/257/206/347/240/201/351/224/256/347/233/230 xKeyboard.md"

@@ -0,0 +1,151 @@
+# 密码键盘 xKeyboard
+
+## 介绍
+
+密码键盘，如果你只是要单纯的数字键盘见x-keyboard-number
+
+## 平台兼容
+
+| Harmony | H5 | andriod | IOS | 小程序 | UTS | UNIAPP-X SDK | version |
+| --- | --- | --- | --- | --- | --- | --- | --- |
+| ☑ | ☑ | ☑️ | ☑️ | ☑️ | ☑️ | 4.76+ | 1.1.18 |
+
+## 文件路径
+
+```ts
+@/uni_modules/tmx-ui/components/x-keyboard/x-keyboard.uvue
+```
+
+## 使用
+
+```ts
+<x-keyboard></x-keyboard>
+```
+
+## Props 属性
+
+| 名称 | 说明 | 类型 | 默认值 |
+| ------ | ---- | ---- | ---- |
+| modelValue | `当前输入的值`<br> | `string` | `""` |
+| maxLen | `最大长度`<br> | `number` | `9` |
+| modelShow | `当前打开的状态。`<br>`等同v-model:model-show`<br> | `boolean` | `false` |
+| title | `顶部标题,默认：安全键盘请放心输入`<br> | `string` | `""` |
+| color | `主按钮色，空值取全局主题`<br> | `string` | `""` |
+| btnColor | `按钮背景`<br> | `string` | `'white'` |
+| bgColor | `键盘背景`<br> | `string` | `'info'` |
+| fontColor | `文字颜色`<br> | `string` | `'#3b3b3b'` |
+| hold | `点击确认是否保持键盘不收起`<br> | `boolean` | `false` |
+
+
+## Events 事件
+
+| 名称 | 参数 | 说明 |
+| ------ | ---- | ---- |
+| change | `value: string<br>` | 值变化时触发 |
+| update:modelShow | `-` | 变量控制打开状态<br>等同v-model:model-show |
+| confirm | `value: string<br>` | 确认时触发 |
+| cancel | `value: string<br>` | 关闭取消时触发 |
+| update:modelValue | `-` | - |
+
+
+## Slots 插槽
+
+| 名称 | 说明 | 数据 |
+| ------ | ---- | ---- |
+| default | `插槽,默认触发打开选择器。你的默认布局可以放置在这里。` | show: boolean<br> |
+
+
+## Ref 方法
+
+| 名称 | 参数 | 返回值 | 说明 |
+| ------ | ---- | ---- | ---- |
+| - | - | - | - |
+
+## 示例文件路径
+
+```json
+/pages/biaodan/keyboard
+```
+
+## 示例源码
+
+```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">键盘 Keyboard</x-text>
+		<x-text color="#999999" >允许小数点，整数，最大长度的控制,可定制性强</x-text>
+		
+		<x-sheet dark-color="#333" :margin="['0','16']" color="#f5f5f5">
+			<x-text>输入的值：{{price}}</x-text>
+		</x-sheet>
+		<x-keyboard-number :max="100" v-model="price">
+			<x-button :block="true">打开默认键盘(控制最大100)</x-button>
+		</x-keyboard-number>
+		<x-keyboard-number :digit="false" :max="100" v-model="price">
+			<x-button class="mt-20" :block="true">整数键盘</x-button>
+		</x-keyboard-number>
+		
+	</x-sheet>
+	
+
+	<x-sheet>
+		<x-text font-size="18" class=" text-weight-b mb-24">通过属性定制不同样式键盘</x-text>
+		<x-keyboard-number btn-color="white" v-model="price">
+			<x-button  class="mb-24" color="info" darkColor="#333" :block="true">打开白色键盘</x-button>
+		</x-keyboard-number>
+		<x-keyboard-number bg-color="#111111" btn-color="#232323" font-color="#f0f0f0" v-model="price">
+			<x-button color='success' :block="true">打开黑色键盘</x-button>
+		</x-keyboard-number>
+	</x-sheet>
+	
+	<x-sheet>
+		<x-text font-size="18" class=" text-weight-b mb-24">密码键盘</x-text>
+		
+		<x-keyboard v-model="password">
+			<x-button darkColor="#333" color="info" :block="true">打开密码键盘</x-button>
+		</x-keyboard>
+		
+	</x-sheet>
+
+	
+	<x-sheet>
+		<x-text font-size="18" class=" text-weight-b mb-24">身份证键盘</x-text>
+		<x-keyboard-idcard>
+			<x-button darkColor="#333" :block="true">打开身份证键盘</x-button>
+		</x-keyboard-idcard>
+	</x-sheet>
+	
+	<x-sheet>
+		<x-text font-size="18" class=" text-weight-b mb-24">车牌键盘</x-text>
+		<x-keyboard-car>
+			<x-button darkColor="#333" :block="true">打开车牌键盘</x-button>
+		</x-keyboard-car>
+	</x-sheet>
+	
+	
+	<view style="height: 50px;"></view>
+
+</template>
+
+<script setup>
+	const price = ref("")
+	const password = ref("")
+	
+</script>
+
+<style lang="scss">
+
+</style>
+
+```
+
+---
+
+## 版权
+
+@2026 tmui4x [https://xui.tmui.design](https://xui.tmui.design)