tmui-cli 2.0.0 → 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/233/276/347/211/207/344/270/212/344/274/240 xUploadMedia.md"

@@ -0,0 +1,270 @@
+# 图片上传 xUploadMedia
+
+## 介绍
+
+可以上传视频或者图片,注意不要混搭.要么上传视频,要么上传图片.当用户自行添加默认文件时可以给你的文件对象加status:0表示待上传,要确保你的上传文件路径是正确的
+否则安卓会引发io错误,并且uni.upload是无法捕捉到fail事件中,会导致整个程序不可用
+
+## 平台兼容
+
+| Harmony | H5 | andriod | IOS | 小程序 | UTS | UNIAPP-X SDK | version |
+| --- | --- | --- | --- | --- | --- | --- | --- |
+| ☑ | ☑ | ☑️ | ☑️ | ☑️ | ☑️ | 4.76+ | 1.1.18 |
+
+## 文件路径
+
+```ts
+@/uni_modules/tmx-ui/components/x-upload-media/x-upload-media.uvue
+```
+
+## 使用
+
+```ts
+<x-upload-media></x-upload-media>
+```
+
+## Props 属性
+
+| 名称 | 说明 | 类型 | 默认值 |
+| ------ | ---- | ---- | ---- |
+| mode | `上传的类型,video,photo,默认是上传图片`<br> | `string` | `'photo'` |
+| videoOps | `当mode=video时,选择视频上传的参数,`<br>`些参数为utsjson,所有字段为可选,具体字段为uni.chooseVideo(options)中的部分有效字段`<br>`pageOrientation,albumMode,compressed,compressed,maxDuration,camera`<br> | `UTSJSONObject` | `() : UTSJSONObject => {     return {         pageOrientation: 'auto',         albumMode: 'system',         sourceType: ['album', 'camera'] as string[],         compressed: true,         maxDuration: 60,         camera: 'back'     } as UTSJSONObject }` |
+| maxCount | `最大的可上传数量`<br> | `number` | `9` |
+| url | `上传地址`<br> | `string` | `"https://mockapi.eolink.com/LRViGGZ8e6c1e8b4a636cd82bca1eb15d2635ed8c74e774/admin/upload_pic/"` |
+| name | `上传到服务器的名称字段`<br> | `string` | `"file"` |
+| header | `上传到服务器的头文件`<br> | `UTSJSONObject` | `() : UTSJSONObject => { return {} as UTSJSONObject }` |
+| formData | `额外的表单数据。`<br> | `UTSJSONObject` | `() : UTSJSONObject => { return {} as UTSJSONObject }` |
+| imgHeight | `图片高,此处不可使用%单位`<br> | `string` | `"80"` |
+| column | `一行显示几列`<br> | `number` | `5` |
+| okFileIsDelete | `上传成功的文件是否允许删除`<br> | `boolean` | `true` |
+| uploadingFileIsDelete | `上传中的文件是否允许删除`<br> | `boolean` | `true` |
+| modelValue | `等同v-model`<br> | `Array` | `() : XUPLOADFILE_FILE_VALUE[] => [] as XUPLOADFILE_FILE_VALUE[]` |
+| beforeDel | `图片被删除时触发`<br>`如果返回Promise<false>删除失败否则成功`<br> | `funcalldel` | `getNOOP_DEL()` |
+| beforeComplete | `你需要原路返回参数提供的item`<br>`item可以自行修改响应内容，响应类型这样可以自己根据服务的内容判断`<br>`是成功还是失败或者没有权限。示例见demo使用。`<br> | `funbeforeCompelte` | `getNOOP_COMPLETE()` |
+| beforeUpload | `上传前的最后一步执行,异步回调,函数返回一个item:XUPLOADFILE_FILE_INFO`<br>`返回时要原样类型返回Promise<XUPLOADFILE_FILE_INFO>,你可以在这里修改文件参数跳过上传或者`<br>`进行最后的头参数设置.demo有参考.`<br> | `beforeUploadType` | `getNOOP_UPLOAD()` |
+| autoStart | `是否自动上传`<br> | `boolean` | `true` |
+| sourceType | `图片来源同官方的sourceType：'album','camera'`<br> | `Array` | `() : string[] => ['album', 'camera'] as string[]` |
+| compress | `是否压缩`<br> | `boolean` | `true` |
+| compressedHeight | `压缩后的缩放高，0表示不压缩高`<br> | `number` | `0` |
+| compressedWidth | `压缩后的缩放高，0表示不压缩宽`<br> | `number` | `0` |
+| quality | `压缩质量`<br> | `number` | `80` |
+| addPos | `添加图片的位置 'before'出现在前面 'after'出现在后面`<br> | `string` | `"after"` |
+| align | `子项对齐方式，left左对齐默认，right:右对齐`<br> | `string` | `"left"` |
+
+
+## Events 事件
+
+| 名称 | 参数 | 说明 |
+| ------ | ---- | ---- |
+| complete | `XUPLOADFILE_FILE_VALUE[]<br>` | 每次全部上传完时触发 |
+| change | `XUPLOADFILE_FILE_VALUE[]<br>` | 变化时触发 |
+| delete | `XUPLOADFILE_FILE_VALUE[]<br>` | 图片被删除时触发 |
+| update:modelValue | `-` | - |
+
+
+## Slots 插槽
+
+| 名称 | 说明 | 数据 |
+| ------ | ---- | ---- |
+| default | `上传图片按钮插槽。` | - |
+
+
+## Ref 方法
+
+| 名称 | 参数 | 返回值 | 说明 |
+| ------ | ---- | ---- | ---- |
+| upload | - | `-` | - |
+| chooseFile | - | `-` | - |
+
+
+## 示例文件路径
+
+```json
+/pages/biaodan/upload-media
+```
+
+## 示例源码
+
+```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">图片上传 xUploadMedia</x-text>
+		<x-text color="#999999" class="text-size-b">
+			允许长按图片进行拖动排序，上传中会禁止排序。
+		</x-text>
+	</x-sheet>
+
+	<x-sheet>
+		<x-upload-media :beforeUpload="beforeUpload" :header="headerestotken" :before-del="beforeRemove"
+			v-model="list" :column="4"></x-upload-media>
+	</x-sheet>
+	<x-sheet>
+		<x-text font-size="18" class=" text-weight-b mb-8">上传视频</x-text>
+		<x-upload-media mode="video" ref="uploader" :auto-start="false" :column="4"></x-upload-media>
+		<x-button class="mt-20" :block="true" @click="upload">ref触发上传</x-button>
+	</x-sheet>
+	<x-sheet>
+		<x-text font-size="18" class=" text-weight-b mb-8">通过before-complete干预上传结果</x-text>
+		<x-upload-media :before-complete="beforeComputed" :header="headerestotken"
+			v-model="list3" :column="4"></x-upload-media>
+	</x-sheet>
+	<x-sheet>
+		<x-text font-size="18" class=" text-weight-b mb-8">演示循环数组绑定并改变顺序</x-text>
+		<!-- 要注意,如果我循环变动key一定要唯一不能相同或者为Index数字vue3会有diff导致不刷新数据. -->
+		<view v-for="(item,index) in testlist" :key="item.name">
+			<view class="flex flex-row flex-row-center-between" style="height: 50px;">
+				<x-text>{{item.name}}</x-text>
+				<view class="flex flex-row">
+					<x-button class="mr-12" size="mini" @click="moveto(index,'qian')">前移</x-button>
+					<x-button size="mini" @click="moveto(index,'hou')">后移</x-button>
+				</view>
+			</view>
+			<x-upload-media :column="4" :key="item.name" v-model="item.value"
+				:auto-start="true"></x-upload-media>
+		</view>
+	</x-sheet>
+
+</template>
+
+<script setup lang="ts">
+	import { ref, onMounted } from 'vue'
+	import type { XUPLOADFILE_FILE_VALUE, XUPLOADFILE_FILE_INFO } from "@/uni_modules/tmx-ui"
+
+	type FORMLIST = {
+		name : string,
+		value : XUPLOADFILE_FILE_VALUE[]
+	}
+
+	const formlist = [
+		{
+			name: "数据A",
+			value: [
+				{ url: "https://cdn.pixabay.com/photo/2026/03/13/17/09/neelam279-white-daffodil-10172120_150.jpg" },
+			] as XUPLOADFILE_FILE_VALUE[]
+		} as FORMLIST,
+		{
+			name: "靓仔B",
+			value: [
+				{ url: "https://cdn.pixabay.com/photo/2026/03/13/14/30/pixelwanderer-ai-generated-10171900_150.jpg" },
+			] as XUPLOADFILE_FILE_VALUE[]
+		} as FORMLIST,
+		{
+			name: "小猫猫C",
+			value: [
+				{ url: "https://cdn.pixabay.com/photo/2026/03/13/20/21/pixeljourney1-hen-harrier-10172414_150.jpg" },
+			] as XUPLOADFILE_FILE_VALUE[]
+		} as FORMLIST
+	] as FORMLIST[]
+
+	const headerestotken = ref<UTSJSONObject>({ accessToken: "99999" })
+	const testlist = ref<FORMLIST[]>(formlist)
+	const list = ref<XUPLOADFILE_FILE_VALUE[]>([
+		{ url: 'https://cdn.pixabay.com/photo/2026/03/13/03/42/tifanitopan-ayam-goreng-10170975_150.jpg' },
+		{ url: 'https://cdn.pixabay.com/photo/2026/03/13/16/22/16-22-47-902_150.jpg' },
+		{ url: 'https://cdn.pixabay.com/photo/2026/03/13/20/13/janfried-crocuses-10172405_150.jpg' },
+	])
+	const list2 = ref<XUPLOADFILE_FILE_VALUE[]>([
+		{ url: 'https://tmui.design/images/logoGreat.png' },
+		{ url: 'https://cdn.pixabay.com/photo/2026/03/16/12/32/12-32-10-136_150.jpg' },
+		{ url: 'https://cdn.pixabay.com/photo/2026/03/13/16/17/16-17-30-190_150.jpg' },
+		{ url: 'https://cdn.pixabay.com/photo/2026/03/16/14/35/14-35-34-821_150.jpg' },
+		{ url: 'https://cdn.pixabay.com/photo/2026/03/15/02/14/cyberco-digital-marketing-10174516_150.png' },
+		{ url: 'https://cdn.pixabay.com/photo/2026/03/15/14/15/14-15-36-350_150.jpg' },
+	])
+	const list3 = ref<XUPLOADFILE_FILE_VALUE[]>([])
+
+	// 模板引用
+	const uploader = ref<XUploadMediaComponentPublicInstance | null>(null)
+
+	onMounted(() => {
+		// 测试动态回显数据。
+		setTimeout(function () {
+			list.value = [
+				{ url: 'https://cdn.pixabay.com/photo/2026/03/15/04/20/geralt-classroom-10174576_150.jpg' },
+				{ url: 'https://cdn.pixabay.com/photo/2026/03/15/09/57/neelam279-wild-cherry-10174886_150.jpg' },
+				{ url: 'https://cdn.pixabay.com/photo/2026/03/15/19/19/matthiasboeckel-tulip-10175462_150.jpg' },
+			] as XUPLOADFILE_FILE_VALUE[]
+		}, 300);
+	})
+
+	const moveto = (index : number, type : string) => {
+		let p = testlist.value.slice(0)
+		let nowitem = testlist.value.slice(0)[index]
+		let prevIndex = Math.max(index - 1, 0);
+		let nextIndex = Math.min(index + 1, p.length - 1)
+		if (index == 0 && type == 'qian') return
+		if (index == p.length - 1 && type == 'hou') return
+
+		let prevItem = p[prevIndex]
+		let nextItem = p[nextIndex]
+
+		if (type == 'qian') {
+			p[prevIndex] = nowitem
+			p[index] = prevItem
+		} else {
+			p[nextIndex] = nowitem
+			p[index] = nextItem
+		}
+		testlist.value = p.slice(0)
+	}
+
+	const qinkogn = () => {
+		list.value = [] as XUPLOADFILE_FILE_VALUE[]
+	}
+
+	const beforeUpload = (item : XUPLOADFILE_FILE_INFO) : Promise<XUPLOADFILE_FILE_INFO> => {
+		console.log(item)
+		return Promise.resolve(item)
+	}
+
+	/** 删除前的回调函数。 */
+	const beforeRemove = (index : number, item : XUPLOADFILE_FILE_INFO) : Promise<boolean> => {
+		console.log(index)
+		return Promise.resolve(true)
+	}
+
+	//上传后，通过回调自行设置是成功还是失败
+	const beforeComputed = (item : XUPLOADFILE_FILE_INFO) : XUPLOADFILE_FILE_INFO => {
+		let json = {} as UTSJSONObject;
+		if (item.response != '') {
+			try {
+				json = JSON.parseObject(item.response)!
+			} catch (e) {
+				//TODO handle the exception
+			}
+		}
+
+		let code = json['code']
+		if (code != null) {
+			let realCode = code as number;
+			if (realCode != 200) {
+				item.status = 5
+				item.statusText = '没有权限'
+			}
+		}
+
+		return item;
+	}
+
+	const upload = () => {
+		let up = uploader.value!
+		up.upload();
+	}
+</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/237/216/345/270/202/351/200/211/346/213/251/345/231/250 xPickerCity.md"

@@ -0,0 +1,132 @@
+# 城市选择器 xPickerCity
+
+## 介绍
+
+是x-picker-view封装的弹出式，城市数据已经封装好。如果想更换更多级或者1级啥的可见数据站点：https://github.com/uiwjs/province-city-china
+
+## 平台兼容
+
+| Harmony | H5 | andriod | IOS | 小程序 | UTS | UNIAPP-X SDK | version |
+| --- | --- | --- | --- | --- | --- | --- | --- |
+| ☑ | ☑ | ☑️ | ☑️ | ☑️ | ☑️ | 4.76+ | 1.1.18 |
+
+## 文件路径
+
+```ts
+@/uni_modules/tmx-ui/components/x-picker-city/x-picker-city.uvue
+```
+
+## 使用
+
+```ts
+<x-picker-city></x-picker-city>
+```
+
+## Props 属性
+
+| 名称 | 说明 | 类型 | 默认值 |
+| ------ | ---- | ---- | ---- |
+| list | `数据项同x-picker-view的X_PICKER_X_ITEM`<br> | `Array` | `() => [] as X_PICKER_X_ITEM[]` |
+| modelValue | `当前选中项的id值`<br> | `Array` | `() => [] as string[]` |
+| modelStr | `当前选中项的回显文本等同v-model:model-str`<br>`请不要更改此值，此值只对外输出显示。`<br> | `string` | `""` |
+| modelShow | `当前打开的状态。`<br>`等同v-model:model-show`<br> | `boolean` | `false` |
+| title | `顶部标题,默认：请选择`<br> | `string` | `""` |
+| cancelText | `取消按钮的文本,默认：取消`<br> | `string` | `""` |
+| confirmText | `确认按钮的文本,默认：确认`<br> | `string` | `""` |
+| modelStrJoin | `自动同步modelstr拼接时的符号.`<br> | `string` | `","` |
+| zIndex | `层级`<br> | `number` | `1100` |
+| showClose | `是否显示关闭按钮`<br> | `boolean` | `false` |
+| lazyContent | `是否懒加载内部内容。`<br>`当前你的列表内容非常多，且影响打开的动画性能时，请务必`<br>`设置此项为true，以获得流畅视觉效果。如果选择数据较少没有必要打开`<br>`注意:由于要兼容微信,此属性从1.1.9开始必须打开,除非不用微信小程序可以关闭.`<br> | `boolean` | `false` |
+| disabled | `是否禁用弹出`<br> | `boolean` | `false` |
+| widthCoverCenter | `宽屏时是否让内容剧中显示`<br>`并限制其宽为屏幕宽，只展示中间内容以适应宽屏。`<br> | `boolean` | `false` |
+
+
+## Events 事件
+
+| 名称 | 参数 | 说明 |
+| ------ | ---- | ---- |
+| confirm | `ids: string[]<br>` | 确认触发 |
+| change | `ids: string[]<br>` | 滑动变换时触发 |
+| update:modelShow | `-` | 变量控制打开状态<br>等同v-model:model-show |
+| update:modelStr | `-` | 等同v-model:model-str<br>只对外输出当前回选区的选中项的文本，不要外部改变此值。 |
+| update:modelValue | `-` | - |
+
+
+## Slots 插槽
+
+| 名称 | 说明 | 数据 |
+| ------ | ---- | ---- |
+| default | `插槽,默认触发打开选择器。你的默认布局可以放置在这里。` | label: string<br> |
+
+
+## Ref 方法
+
+| 名称 | 参数 | 返回值 | 说明 |
+| ------ | ---- | ---- | ---- |
+| - | - | - | - |
+
+## 示例文件路径
+
+```json
+/pages/biaodan/picker-city
+```
+
+## 示例源码
+
+```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">城市选择器 xPickerCity</x-text>
+			<x-text color="#999999"
+				class="mb-20">是x-picker-view封装的弹出式，城市数据已经封装好。如果想更换更多级或者1级啥的可见数据站点：https://github.com/uiwjs/province-city-china</x-text>
+
+			<x-picker-city :list="list" v-model:model-str="modelStr" v-model="modelValueIds">
+				<template v-slot:default="{label}">
+					<x-button :block="true">选择城市</x-button>
+				</template>
+			</x-picker-city>
+
+			<x-sheet color="info" dark-color="#333" :margin="['0','16']">
+				<x-text>
+					选中项：{{modelValueIds.join('-')}}
+				</x-text>
+				<x-text>
+					回显文本：{{modelStr}}
+				</x-text>
+			</x-sheet>
+			<x-button :block="true" @click="fuzhi">赋值</x-button>
+		</x-sheet>
+
+</template>
+
+<script setup lang="ts">
+	import { ref } from 'vue'
+	import cityscode from "./level.min.uts"
+	import type { X_PICKER_X_ITEM } from "@/uni_modules/tmx-ui"
+	
+	const modelValueIds = ref<string[]>([])
+	const modelStr = ref("")
+	const list = ref(JSON.parseArray<X_PICKER_X_ITEM>(cityscode))
+	
+	const fuzhi = () => {
+		modelValueIds.value = ['350000', '350600', '350626']
+		// modelStr.value = '北京市-市辖区-东城区'
+	}
+</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/227/245/345/216/206 xCalendarMultiple.md"

@@ -0,0 +1,188 @@
+# 多选日历 xCalendarMultiple
+
+## 介绍
+
+可以单选和多选，无限循环滚动，目前4.67dev以下版本使用可能会有性能风险，请关注后续官方针对性的优化。
+
+## 平台兼容
+
+| Harmony | H5 | andriod | IOS | 小程序 | UTS | UNIAPP-X SDK | version |
+| --- | --- | --- | --- | --- | --- | --- | --- |
+| - | ☑ | ☑️ | ☑️ | ☑️ | ☑️ | 4.76+ | 1.1.18 |
+
+## 文件路径
+
+```ts
+@/uni_modules/tmx-ui/components/x-calendar-multiple/x-calendar-multiple.uvue
+```
+
+## 使用
+
+```ts
+<x-calendar-multiple></x-calendar-multiple>
+```
+
+## Props 属性
+
+| 名称 | 说明 | 类型 | 默认值 |
+| ------ | ---- | ---- | ---- |
+| modelValue | `同步当前时间v-model`<br>`不想受控:model-value`<br> | `Array` | `() : string[] => [] as string[]` |
+| model | `范围选择模式`<br>`day:天数多选，通过multipleMax可以设置允许选择的天数`<br>`range:天数的范围选择，起始和终止`<br>`week:按周次选择范围（未开放）`<br>`quarter:按季度选择范围（未开放）`<br>`year:按年（未开放）`<br> | `union` | `'day'` |
+| multipleMax | `多选模式时，允许选择的最大天数。`<br> | `number` | `-1` |
+| disabledDays | `禁用的日期字符串如"2023-12-12"`<br>`它与下面的start，end不冲突。`<br> | `Array` | `() : string[] => [] as string[]` |
+| startDate | `允许选择的开始日期`<br> | `string` | `'1900-1-1'` |
+| vertical | `是否上下切换日历`<br> | `boolean` | `false` |
+| endDate | `允许选择的结束日期`<br> | `string` | `'2100-1-1'` |
+| currentDate | `当前显示的月份，默认以modalValue中的第一项为初始月`<br>`如果为空，显示本月，可以控制这里切换显示的日期`<br> | `string` | `''` |
+| 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[]` |
+| showClear | `显示清空按钮`<br> | `boolean` | `true` |
+| showFooter | `显示底部`<br> | `boolean` | `true` |
+| isSameDay | `是否允许选择同一天。`<br> | `boolean` | `true` |
+
+
+## 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-multiple
+```
+
+## 示例源码
+
+```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">日历多选 xCalendarMultiple</x-text>
+			<x-text color="#999999">支持多选，范围,如果需要单天选择请前往xCalendarView组件{{currentDate}}</x-text>
+		</x-sheet>
+		<x-sheet :padding="['0']">
+			<x-calendar-multiple :dateStatus="dateStatus" style="border-radius: 12px;" @change="onchange" v-model:currentDate="currentDate" :disabledDays="['2024-5-31']" :date-style="dateStyle" headBgColor='rgb(5, 121, 255)' headFontColor='white' v-if="show" v-model="dates"></x-calendar-multiple>
+			<view class="px-12 pb-12">
+				<x-button @click="setdate" skin='thin' :block="true" >赋值</x-button>
+			</view>
+		</x-sheet>
+		<x-sheet>
+			<x-text font-size="18" class=" text-weight-b mb-8">范围选择</x-text>
+			<x-text color="#999999">下面的范围选择限制了只能最多选择20天,如果要不限制设置multipleMax为0即可</x-text>
+		</x-sheet>
+		<x-sheet :padding="['0']">
+			<x-calendar-multiple @change="onchange" v-if="show" :multipleMax="20" model='range' v-model="dates2"></x-calendar-multiple>
+			<view class="px-12 pb-12">
+				<x-button @click="fuzhi" skin='thin' :block="true" >赋值</x-button>
+			</view>
+		</x-sheet>
+		<view style="height:16px"></view>
+	
+</template>
+
+<script lang="ts" setup>
+	import type { xCalendarDateStyle_type,xCalendarDateStyleStatusType } from "@/uni_modules/tmx-ui"
+	import { xConfig } from "@/uni_modules/tmx-ui"
+	const dates = ref<string[]>([])
+	const dates2 = ref<string[]>([])
+	const dateStyle = ref<xCalendarDateStyle_type[]>([])
+	const currentDate = ref<string>('2024-2-1')
+	const show = ref<boolean>(false)
+	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 fuzhi = () =>{
+		dates2.value=['2024-4-28','2024-5-8']
+		
+	}
+	const onchange = (dates:string[]) =>{
+		console.log(dates)
+	}
+	
+	const setdate = ()=> {
+		dates.value = ['2024-5-1','2024-5-8']
+		currentDate.value = "2024-5-1"
+		nextTick(()=>{
+			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[]
+		})
+	}
+	
+	onReady(()=>{
+		show.value = true;
+	})
+	
+</script>
+
+<style>
+
+</style>
+
+```
+
+---
+
+## 版权
+
+@2026 tmui4x [https://xui.tmui.design](https://xui.tmui.design)