tmui-cli 2.0.1 → 2.0.2

package/data/tmui4x/30./347/273/204/344/273/266/345/272/223//345/217/215/351/246/210/347/273/204/344/273/266//346/265/256/347/220/203 xFloatButton.md"

@@ -0,0 +1,143 @@
+# 浮球 xFloatButton
+
+## 介绍
+
+可以左右四个角定位放置，自动靠边吸咐，也可自由拖动放置。
+
+## 平台兼容
+
+| Harmony | H5 | andriod | IOS | 小程序 | UTS | UNIAPP-X SDK | version |
+| --- | --- | --- | --- | --- | --- | --- | --- |
+| ☑ | ☑ | ☑️ | ☑️ | ☑️ | ☑️ | 4.76+ | 1.1.18 |
+
+## 文件路径
+
+```ts
+@/uni_modules/tmx-ui/components/x-float-button/x-float-button.uvue
+```
+
+## 使用
+
+```ts
+<x-float-button></x-float-button>
+```
+
+## Props 属性
+
+| 名称 | 说明 | 类型 | 默认值 |
+| ------ | ---- | ---- | ---- |
+| duration | ``<br> | `number` | `650` |
+| threshold | `松开后，如果是吸附adsorption为true的话，吸附在两边的位置时的距离边界的距离。`<br>`单位为px,左右的安全距离.`<br> | `number` | `12` |
+| thresholdTop | `单位为px,顶部的安全距离`<br> | `number` | `0` |
+| thresholdBottom | `单位为px,底部的安全距离`<br> | `number` | `12` |
+| round | `圆角,空值时取全局的drawr圆角。`<br> | `string` | `"64"` |
+| offset | `自己定义位置:以可视范围内的左上角算起。如何自己定义位置时`<br>`需要计算屏幕坐标时请使用uni.getWindowInfo()`<br>`来获取可视屏幕的宽和高定位你自己需要的自由位置`<br>`可以v-model:offset="[x,y]"来动态更改其位置。`<br>`我预置了以下几种常见模式：`<br>`[-1,-1]会在右下角。会让出threshold边界距离`<br>`[-2,-2]会在左下角。会让出threshold边界距离`<br>`[-3,-3]会在左上角。会让出threshold边界距离`<br>`[-4,-4]会在右上角。会让出threshold边界距离`<br>`[-5,-5]会在底部居中。会让出threshold边界距离`<br> | `Array` | `(): number[] => [-1, -1] as number[]` |
+| bgColor | `背景,支持渐变值如:linear-gradient(to left, #FFED46, #FF7EC7)`<br>`默认空值，取全局主题值。`<br> | `string` | `""` |
+| width | `宽`<br> | `string` | `'50px'` |
+| height | `高`<br> | `string` | `'50px'` |
+| adsorption | `是否开启吸附在两边。`<br>`如果设置为false,可以自由拖动在屏幕上。`<br> | `boolean` | `true` |
+| disabled | `是否禁止拖动。`<br> | `boolean` | `false` |
+| zIndex | `层级`<br> | `number` | `87` |
+
+
+## Events 事件
+
+| 名称 | 参数 | 说明 |
+| ------ | ---- | ---- |
+| click | `-` | 点击组件时触发 |
+| longpress | `-` | 长按组件时触发大于500ms |
+| change | `number[]<br>` | 坐标改变时触发 |
+| update:offset | `-` | 动态修改当前的位置<br>等同v-model:offset具体见offset属性那。 |
+
+
+## Slots 插槽
+
+| 名称 | 说明 | 数据 |
+| ------ | ---- | ---- |
+| default | `请在插槽内自由布局你的样式及功能块。` | - |
+
+
+## Ref 方法
+
+| 名称 | 参数 | 返回值 | 说明 |
+| ------ | ---- | ---- | ---- |
+| - | - | - | - |
+
+## 示例文件路径
+
+```json
+/pages/fankui/float-button
+```
+
+## 示例源码
+
+```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">浮球 FloatButton</x-text>
+		<x-text color="#999999">
+			提供自由拖动，吸附功能，预设四个位置，请参阅文档。
+		</x-text>
+	</x-sheet>
+	<x-sheet>
+		<x-text font-size="18" class=" text-weight-b mb-8">双向绑定位置</x-text>
+		<x-text color="#999999">
+			请拖动橙色自由球：{{offsets.join(",")}}
+		</x-text>
+	</x-sheet>
+	<x-float-button>
+		<view class="flex flex-center" style="width:100%;height:100%">
+			<x-icon color="white" font-size="30" name="phone-fill"></x-icon>
+		</view>
+	</x-float-button>
+	<x-float-button bg-color="success" :offset="[-2,-2]">
+		<view class="flex flex-center" style="width:100%;height:100%">
+			<x-icon color="white" font-size="30" name="bluetooth-line"></x-icon>
+		</view>
+
+	</x-float-button>
+	<x-float-button :disabled="true" bg-color="linear-gradient(to left, #FFED46, #FF7EC7)" :offset="[-5,-5]">
+		<view class="flex flex-center" style="width:100%;height:100%">
+			<x-icon color="white" font-size="30" name="forbid-line"></x-icon>
+		</view>
+	</x-float-button>
+	<x-float-button @click="onclik" bg-color="error" :offset="[-3,-3]">
+		<view class="flex flex-center" style="width:100%;height:100%">
+			<x-icon color="white" font-size="30" name="add-line"></x-icon>
+		</view>
+	</x-float-button>
+	<x-float-button :adsorption="false" bg-color="danger" :offset="[-4, -4]" @change="moveChange">
+		<view class="flex flex-center" style="width:100%;height:100%">
+			<x-icon color="white" font-size="30" name="sketching"></x-icon>
+		</view>
+	</x-float-button>
+
+	<!-- <view style="height:1500px"></view> -->
+
+</template>
+
+<script setup>
+	const offsets = ref<number[]>([])
+	const onclik = () => {
+		console.log('click')
+	}
+	const moveChange = (xy : number[]) => { }
+</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//345/217/215/351/246/210/347/273/204/344/273/266//346/266/210/346/201/257/346/235/241 xSnackbar.md"

@@ -0,0 +1,125 @@
+# 消息条 xSnackbar
+
+## 介绍
+
+消息条是可以在上方或者正文累加显示，新的消息在旧的前面。而不会只显示一条，会自动消失。支持6个方向的弹出
+
+## 平台兼容
+
+| Harmony | H5 | andriod | IOS | 小程序 | UTS | UNIAPP-X SDK | version |
+| --- | --- | --- | --- | --- | --- | --- | --- |
+| ☑ | ☑ | ☑️ | ☑️ | ☑️ | ☑️ | 4.76+ | 1.1.18 |
+
+## 文件路径
+
+```ts
+@/uni_modules/tmx-ui/components/x-snackbar/x-snackbar.uvue
+```
+
+## 使用
+
+```ts
+<x-snackbar></x-snackbar>
+```
+
+## Props 属性
+
+| 名称 | 说明 | 类型 | 默认值 |
+| ------ | ---- | ---- | ---- |
+| offset | `距离顶/底的偏移量。`<br> | `string` | `"12px"` |
+| position | `出现的位置`<br>`top:正上方`<br>`top-left:左上方`<br>`top-right:右上角`<br>`bottom-right:右下角`<br>`bottom-left:左下角`<br>`bottom:正下方`<br> | `positionType` | `"bottom"` |
+| duration | `多少毫秒后销毁`<br> | `number` | `2500` |
+| block | `是否让消息条横屏占满，默认是根据内容自动宽。`<br> | `boolean` | `false` |
+| maxCount | `最大消息条数，超出时最早的旧消息直接移除。-1表示不限制`<br> | `number` | `-1` |
+| content | `消息数据`<br>`注意，id一定要提供且是数字，可以随意，只要相对上一次变更下，就会触发`<br>`显示新的消息条。这种显示的方式就是避免你们引用ref方式来调用方法，相对更简单。`<br> | `SNACKBAR_INFO` | `():SNACKBAR_INFO=>({     background: "",     color: "",     fontSize: "",     content: "",     id: -1,     icon: "" } as SNACKBAR_INFO)` |
+
+
+## Events 事件
+
+| 名称 | 参数 | 说明 |
+| ------ | ---- | ---- |
+| - | - | - |
+
+## Slots 插槽
+
+| 名称 | 说明 | 数据 |
+| ------ | ---- | ---- |
+| - | - | - |
+
+## Ref 方法
+
+| 名称 | 参数 | 返回值 | 说明 |
+| ------ | ---- | ---- | ---- |
+| - | - | - | - |
+
+## 示例文件路径
+
+```json
+/pages/fankui/snackbar
+```
+
+## 示例源码
+
+```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">消息条 Snackbar</x-text>
+			<x-text color="#999999">
+				位置可以在顶或者底，并且不需要ref函数来实现，我创新的通过使用变量id更改来发送新的消息条。
+				消息条是无限累加在旧消息条的前面,并且现在支持6个方向的弹出.
+			</x-text>
+		</x-sheet>
+		<x-snackbar position="top" :content="content"></x-snackbar>
+		<x-sheet>
+			<x-button :block="true" @click="randMsg">随机一条顶部消息</x-button>
+		</x-sheet>
+		<x-sheet>
+			<x-text font-size="18" class=" text-weight-b ">可以设置为横幅尺寸和自定样式</x-text>
+		</x-sheet>
+		<x-snackbar :block="true" :content="content2"></x-snackbar>
+		<x-sheet>
+			<x-button color="warn" :block="true" @click="randMsg2">随机一条底部消息</x-button>
+		</x-sheet>
+</template>
+
+<script lang="uts" setup>
+	import type { SNACKBAR_INFO } from '@/uni_modules/tmx-ui';
+	const content = ref<SNACKBAR_INFO>({
+		id: -1,//-1表示 不显示。
+		content: ""
+	})
+	const content2 = ref<SNACKBAR_INFO>({
+		id: -1,//-1表示 不显示。
+		content: ""
+	})
+	const randMsg = () => {
+		content.value = {
+			id: content.value.id + 1,
+			content: "测试标题" + content.value.id.toString()
+		} as SNACKBAR_INFO
+	}
+	const randMsg2 = () => {
+		content2.value = {
+			id: content2.value.id + 1,
+			content: "可以随意定义颜色可以随意定义颜色" + content2.value.id.toString(),
+			background: 'red',
+			icon: "close-circle-line"
+		} as SNACKBAR_INFO
+	}
+</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//345/217/215/351/246/210/347/273/204/344/273/266//346/266/210/346/201/257/346/235/241/345/255/220/350/212/202/347/202/271 xSnackbarItem.md"

@@ -0,0 +1,123 @@
+# 消息条子节点 xSnackbarItem
+
+## 介绍
+
+xSnackbar内部子组件，不可引用。
+
+## 平台兼容
+
+| Harmony | H5 | andriod | IOS | 小程序 | UTS | UNIAPP-X SDK | version |
+| --- | --- | --- | --- | --- | --- | --- | --- |
+| ☑ | ☑ | ☑️ | ☑️ | ☑️ | ☑️ | 4.76+ | 1.1.18 |
+
+## 文件路径
+
+```ts
+@/uni_modules/tmx-ui/components/x-snackbar-item/x-snackbar-item.uvue
+```
+
+## 使用
+
+```ts
+<x-snackbar-item></x-snackbar-item>
+```
+
+## Props 属性
+
+| 名称 | 说明 | 类型 | 默认值 |
+| ------ | ---- | ---- | ---- |
+| duration | `多少毫秒后销毁`<br> | `number` | `2500` |
+| keyIndex | `索引`<br> | `number` | `-1` |
+| content | `消息数据`<br>`注意，id一定要提供且是数字，可以随意，只要相对上一次变更下，就会触发`<br>`显示新的消息条。这种显示的方式就是避免你们引用ref方式来调用方法，相对更简单。`<br> | `SNACKBAR_ITEM` | `():SNACKBAR_ITEM=>({     background: "black",     color: "white",     fontSize: "14px",     content: "",     id: -1,     icon: "" } as SNACKBAR_ITEM)` |
+
+
+## Events 事件
+
+| 名称 | 参数 | 说明 |
+| ------ | ---- | ---- |
+| close | `-` | 关闭事件 |
+
+
+## Slots 插槽
+
+| 名称 | 说明 | 数据 |
+| ------ | ---- | ---- |
+| - | - | - |
+
+## Ref 方法
+
+| 名称 | 参数 | 返回值 | 说明 |
+| ------ | ---- | ---- | ---- |
+| - | - | - | - |
+
+## 示例文件路径
+
+```json
+/pages/fankui/snackbar
+```
+
+## 示例源码
+
+```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">消息条 Snackbar</x-text>
+			<x-text color="#999999">
+				位置可以在顶或者底，并且不需要ref函数来实现，我创新的通过使用变量id更改来发送新的消息条。
+				消息条是无限累加在旧消息条的前面,并且现在支持6个方向的弹出.
+			</x-text>
+		</x-sheet>
+		<x-snackbar position="top" :content="content"></x-snackbar>
+		<x-sheet>
+			<x-button :block="true" @click="randMsg">随机一条顶部消息</x-button>
+		</x-sheet>
+		<x-sheet>
+			<x-text font-size="18" class=" text-weight-b ">可以设置为横幅尺寸和自定样式</x-text>
+		</x-sheet>
+		<x-snackbar :block="true" :content="content2"></x-snackbar>
+		<x-sheet>
+			<x-button color="warn" :block="true" @click="randMsg2">随机一条底部消息</x-button>
+		</x-sheet>
+</template>
+
+<script lang="uts" setup>
+	import type { SNACKBAR_INFO } from '@/uni_modules/tmx-ui';
+	const content = ref<SNACKBAR_INFO>({
+		id: -1,//-1表示 不显示。
+		content: ""
+	})
+	const content2 = ref<SNACKBAR_INFO>({
+		id: -1,//-1表示 不显示。
+		content: ""
+	})
+	const randMsg = () => {
+		content.value = {
+			id: content.value.id + 1,
+			content: "测试标题" + content.value.id.toString()
+		} as SNACKBAR_INFO
+	}
+	const randMsg2 = () => {
+		content2.value = {
+			id: content2.value.id + 1,
+			content: "可以随意定义颜色可以随意定义颜色" + content2.value.id.toString(),
+			background: 'red',
+			icon: "close-circle-line"
+		} as SNACKBAR_INFO
+	}
+</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//345/217/215/351/246/210/347/273/204/344/273/266//346/266/210/346/201/257/351/200/232/347/237/245 xMsgNotice.md"

@@ -0,0 +1,130 @@
+# 消息通知 xMsgNotice
+
+## 介绍
+
+本组件可以通过左右拖拉关闭消息，往左拉，左关闭，右拉右关闭，有阻尼回弹效果，可单独设置。
+
+## 平台兼容
+
+| Harmony | H5 | andriod | IOS | 小程序 | UTS | UNIAPP-X SDK | version |
+| --- | --- | --- | --- | --- | --- | --- | --- |
+| ☑ | ☑ | ☑️ | ☑️ | ☑️ | ☑️ | 4.76+ | 1.1.18 |
+
+## 文件路径
+
+```ts
+@/uni_modules/tmx-ui/components/x-msg-notice/x-msg-notice.uvue
+```
+
+## 使用
+
+```ts
+<x-msg-notice></x-msg-notice>
+```
+
+## Props 属性
+
+| 名称 | 说明 | 类型 | 默认值 |
+| ------ | ---- | ---- | ---- |
+| modelValue | `打开和关闭状态`<br>`等同v-model,如果使用:modelValue将不受控.`<br> | `boolean` | `true` |
+| duration | `动画时间`<br> | `number` | `300` |
+| threshold | `当滑动时小于此值，会回弹到原位。而不执行关闭`<br> | `number` | `50` |
+| round | `圆角,空值时取全局的drawr圆角。`<br> | `string` | `""` |
+| position | `显示位置top,bottom`<br> | `positionType` | `"bottom"` |
+| offset | `距离边界的偏移量`<br> | `string` | `"12px"` |
+| bgColor | `背景`<br> | `string` | `"white"` |
+| darkBgColor | `暗黑的背景，如果不提供，读取sheetDarkColor`<br> | `string` | `""` |
+| clickClose | `点击组件是否关闭通知`<br> | `boolean` | `true` |
+
+
+## Events 事件
+
+| 名称 | 参数 | 说明 |
+| ------ | ---- | ---- |
+| click | `-` | 组件点击事件 |
+| update:modelValue | `-` | 等同v-model |
+
+
+## Slots 插槽
+
+| 名称 | 说明 | 数据 |
+| ------ | ---- | ---- |
+| default | `默认插槽` | - |
+
+
+## Ref 方法
+
+| 名称 | 参数 | 返回值 | 说明 |
+| ------ | ---- | ---- | ---- |
+| - | - | - | - |
+
+## 示例文件路径
+
+```json
+/pages/fankui/msg-notice
+```
+
+## 示例源码
+
+```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">也可变量控制</x-text>
+		<view class="flex flex-row flex-row-center-between">
+			<x-button width="48%" @click="onClick(true)">打开底部消息条</x-button>
+			<x-button width="48%" @click="onClick(false)" color="error">关闭询问消息条</x-button>
+		</view>
+	</x-sheet>
+	<x-sheet>
+		<x-text font-size="18" class=" text-weight-b mb-8">消息通知 xMsgNotice</x-text>
+		<x-text color="#999999">
+			本组件可以通过左右,上下拖拉关闭消息，往向不同方向拉手势,会向指定方向关闭，有阻尼回弹效果，可单独设置。
+		</x-text>
+	</x-sheet>
+	<x-msg-notice :model-value="true" position="top" round="10">
+		<x-sheet color='primary' :margin="['0']" :round="['0']">
+			<view class="flex flex-row flex-row-top-between">
+				<x-image round="10" width="64" height="64" src="https://store.tmui.design/api/randomImg"></x-image>
+				<view class="flex-1 ml-10">
+					<x-text color="white" class=" text-weight-b">左右或者向上拉可关闭</x-text>
+					<x-text color="white" font-size="12">本组件可以通过左右,上下拖拉关闭消息</x-text>
+				</view>
+			</view>
+		</x-sheet>
+	</x-msg-notice>
+	<x-msg-notice v-model="show" round="10" offset="20">
+		<x-sheet :margin="['0']" :round="['0']">
+			<x-text class=" text-weight-b">消息通知 xMsgNotice</x-text>
+			<x-text font-size="12" class="opacity-6">本组件可以通过左右,上下拖拉关闭消息，往向不同方向拉手势,会向指定方向关闭，有阻尼回弹效果，可单独设置。</x-text>
+		</x-sheet>
+	</x-msg-notice>
+
+</template>
+
+<script setup lang="ts">
+	import { ref } from 'vue'
+
+	const show = ref(false)
+
+	const onClick = (isshow : boolean) => {
+		show.value = isshow;
+	}
+</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//345/217/215/351/246/210/347/273/204/344/273/266//351/201/256/347/275/251 xOverlay.md"

@@ -0,0 +1,162 @@
+# 遮罩 xOverlay
+
+## 介绍
+
+旋转制作弹层类页面。
+
+## 平台兼容
+
+| Harmony | H5 | andriod | IOS | 小程序 | UTS | UNIAPP-X SDK | version |
+| --- | --- | --- | --- | --- | --- | --- | --- |
+| ☑ | ☑ | ☑️ | ☑️ | ☑️ | ☑️ | 4.76+ | 1.1.18 |
+
+## 文件路径
+
+```ts
+@/uni_modules/tmx-ui/components/x-overlay/x-overlay.uvue
+```
+
+## 使用
+
+```ts
+<x-overlay></x-overlay>
+```
+
+## Props 属性
+
+| 名称 | 说明 | 类型 | 默认值 |
+| ------ | ---- | ---- | ---- |
+| customStyle | `自定义遮罩样式`<br> | `string` | `""` |
+| customContentStyle | `内容层样式`<br> | `string` | `""` |
+| showClose | `是否显示底部关闭按钮`<br> | `boolean` | `false` |
+| overlayClick | `遮罩是否允许点击被关闭`<br> | `boolean` | `true` |
+| disabledAni | `禁用弹跳动画,overlayClick设置为false时,点底部会有弹跳.`<br> | `boolean` | `false` |
+| show | `显示可v-model:show双向绑定`<br> | `boolean` | `false` |
+| duration | `动画时间`<br> | `number` | `300` |
+| watiDuration | `打开dom的延迟量，如果你打开 弹窗在ios正常。`<br>`请不要修改此值。如果遇到打不开，或者 打开 后没动画，关闭不了等可能是sdk bug导致 `<br>`此时需要加大值来避免。具体加多少以你弹窗内的节点复杂度有关，需要你自行压力测试。`<br>`此值仅在ios下生效。`<br> | `number` | `120` |
+| zIndex | `层级`<br> | `number` | `1100` |
+
+
+## Events 事件
+
+| 名称 | 参数 | 说明 |
+| ------ | ---- | ---- |
+| click | `-` | 点击遮罩事件 |
+| close | `-` | 关闭是触发 |
+| open | `-` | 打开时触发 |
+| beforeOpen | `-` | 打开前执行 |
+| beforeClose | `-` | 关闭前执行 |
+| update:show | `-` | 等同v-model:show |
+
+
+## Slots 插槽
+
+| 名称 | 说明 | 数据 |
+| ------ | ---- | ---- |
+| trigger | `标签触发显示遮罩，免于使用变量控制` | show: Boolean<br> |
+| default | `-` | - |
+
+
+## Ref 方法
+
+| 名称 | 参数 | 返回值 | 说明 |
+| ------ | ---- | ---- | ---- |
+| open | - | `-` | 打开 * |
+| close | - | `-` | 关闭 * |
+
+
+## 示例文件路径
+
+```json
+/pages/fankui/overlay
+```
+
+## 示例源码
+
+```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">遮罩 Overlay</x-text>
+		<x-text color="#999999">
+			内容以及遮罩内的对齐方式，可以直接在组件上写style来编写，自由度比较高。
+			下方是遮罩配合x-animaion轻松创建一个弹层组件动画。
+		</x-text>
+
+	</x-sheet>
+	<x-sheet>
+		<x-button @click="show=true" :block="true">显示遮罩</x-button>
+	</x-sheet>
+
+	<x-overlay v-model:show="show" customContentStyle="width:90%;"
+		custom-style="display: flex;align-items: center;justify-content: center;">
+
+
+		<x-sheet>
+			<x-slide-verify></x-slide-verify>
+			<x-text class="py-32">我是显示的内容，点击遮罩也能关闭。</x-text>
+			<x-button @click="show=false" :block="true">关闭遮罩</x-button>
+		</x-sheet>
+	</x-overlay>
+
+	<x-sheet>
+		<x-text font-size="18" class=" text-weight-b ">嵌套</x-text>
+		<x-overlay customContentStyle="width:90%;"
+			custom-style="display: flex;align-items: center;justify-content: center;">
+			<template v-slot:trigger="{show}">
+				<x-button :block="true" color="success">显示遮罩1</x-button>
+			</template>
+
+			<x-sheet>
+				<x-text class="py-32">我是遮罩1的内容</x-text>
+				<x-overlay :showClose="true" customContentStyle="width:90%;"
+					custom-style="display: flex;align-items: center;justify-content: center;">
+					<template v-slot:trigger="{show}">
+						<x-button :block="true" color="success">显示遮罩2</x-button>
+					</template>
+					<x-sheet>
+						<x-text class="py-32">我是遮罩2的内容</x-text>
+					</x-sheet>
+				</x-overlay>
+			</x-sheet>
+
+		</x-overlay>
+	</x-sheet>
+
+
+	<x-overlay :overlay-click="false" :show-close="true" customContentStyle="width:64%;"
+		custom-style="display: flex;align-items: center;justify-content: center;">
+		<template v-slot:trigger="{show}">
+			<x-cell icon="sparkling-line" title="插槽自动触发显示遮罩" desc="让遮罩带close关闭按钮"></x-cell>
+		</template>
+
+		<x-sheet height="175">
+			<x-text class="line-8">些遮罩没有配合x-animation组件来做动画内容显示。</x-text>
+		</x-sheet>
+
+	</x-overlay>
+
+	<view style="height:500px"></view>
+</template>
+
+<script setup lang="ts">
+	const show = ref(false)
+	const showSlider = ref(false)
+</script>
+
+<style lang="scss" scoped>
+
+</style>
+```
+
+---
+
+## 版权
+
+@2026 tmui4x [https://xui.tmui.design](https://xui.tmui.design)