tmui-cli 2.0.0 → 2.0.2

package/data/tmui4x/30./347/273/204/344/273/266/345/272/223//345/261/225/347/244/272/347/273/204/344/273/266//346/237/245/347/234/213/346/233/264/345/244/232 xMore.md"

@@ -0,0 +1,138 @@
+# 查看更多 xMore
+
+## 介绍
+
+让内容超过指定高时自动隐藏内容.
+
+## 平台兼容
+
+| Harmony | H5 | andriod | IOS | 小程序 | UTS | UNIAPP-X SDK | version |
+| --- | --- | --- | --- | --- | --- | --- | --- |
+| ☑ | ☑ | ☑️ | ☑️ | ☑️ | ☑️ | 4.76+ | 1.1.18 |
+
+## 文件路径
+
+```ts
+@/uni_modules/tmx-ui/components/x-more/x-more.uvue
+```
+
+## 使用
+
+```ts
+<x-more></x-more>
+```
+
+## Props 属性
+
+| 名称 | 说明 | 类型 | 默认值 |
+| ------ | ---- | ---- | ---- |
+| width | `组件宽度`<br> | `string` | `"auto"` |
+| height | `被关闭时的高度。`<br> | `string` | `"60"` |
+| actionGap | `操作操作栏区域上下间隙高度。`<br> | `string` | `"10"` |
+| modelValue | `当前打开的状态`<br> | `boolean` | `false` |
+| activeColor | `激活后的文本色,默认是读取全局色`<br> | `string` | `""` |
+| unActiveColor | `未激活后的文本色`<br> | `string` | `"#a6a6a6"` |
+| text | `打开和关闭状态的文本`<br>`"展开更多", "收起更多"`<br> | `Array` | `() => [] as string[]` |
+| maskBgColor | `遮罩的渐变的背景色`<br> | `Array` | `() => ['rgba(255, 255, 255, 1)', 'rgba(255, 255, 255, 0.3)']` |
+| darkMaskBgColor | `暗黑时遮罩的渐变的背景色`<br> | `Array` | `() => ['rgba(24, 24, 24, 1.0)', 'rgba(24, 24, 24, 0.3)']` |
+| disabled | `是否禁用展开。`<br> | `boolean` | `false` |
+| showMoreBtn | `是否显示开启和关闭按钮,`<br>`因为各个手机屏幕可能不一样,可能会根据行数自行决定是否`<br>`要显示展开和关闭按钮,请通过此自行判断.`<br> | `boolean` | `true` |
+
+
+## Events 事件
+
+| 名称 | 参数 | 说明 |
+| ------ | ---- | ---- |
+| change | `opened:  boolean <br>` | 状态切换时变换 |
+| click | `opened: boolean<br>` | 点击展开的按钮时触发 |
+| update:modelValue | `-` | - |
+
+
+## Slots 插槽
+
+| 名称 | 说明 | 数据 |
+| ------ | ---- | ---- |
+| default | `默认插槽 ` | isOpened: boolean<br> |
+| action | `底部操作栏插槽 ` | isOpened: boolean<br> |
+
+
+## Ref 方法
+
+| 名称 | 参数 | 返回值 | 说明 |
+| ------ | ---- | ---- | ---- |
+| - | - | - | - |
+
+## 示例文件路径
+
+```json
+/pages/zhanshi/more
+```
+
+## 示例源码
+
+```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">查看更多 xMore</x-text>
+		<x-text color="#999999">更多信息展示使用,在使用时注意内部不要放动态异步加载内容。</x-text>
+	</x-sheet>
+	<x-sheet>
+		<x-more>
+			<x-text class="line-10">
+				随后，行刑者用一根管子放出温水顺着死刑犯的手臂往下流。并在地上放置一个铁盆，让水流到盆里的声音“嘀哒嘀哒“作响，给罪犯造成是自己流血的错觉。
+				随着水流越来越慢，水温越来越低，声音越来越小。
+				没过多久，罪犯就断气而身亡。尸检发现，罪犯死于心脏麻痹。
+				随后，行刑者用一根管子放出温水顺着死刑犯的手臂往下流。并在地上放置一个铁盆，让水流到盆里的声音“嘀哒嘀哒“作响，给罪犯造成是自己流血的错觉。
+				随着水流越来越慢，水温越来越低，声音越来越小。
+				没过多久，罪犯就断气而身亡。尸检发现，罪犯死于心脏麻痹。
+			</x-text>
+			<x-image src="https://store.tmui.design/api/randomImg?random=vsf"></x-image>
+		</x-more>
+		<x-divider class="my-24"></x-divider>
+		<x-more :disabled="true" :text="['付费解锁','关闭详情']">
+			<x-text class="line-10">
+				禁用无法打开
+				随后，行刑者用一根管子放出温水顺着死刑犯的手臂往下流。并在地上放置一个铁盆，让水流到盆里的声音“嘀哒嘀哒“作响，给罪犯造成是自己流血的错觉。
+				随着水流越来越慢，水温越来越低，声音越来越小。
+				没过多久，罪犯就断气而身亡。尸检发现，罪犯死于心脏麻痹。
+				随后，行刑者用一根管子放出温水顺着死刑犯的手臂往下流。并在地上放置一个铁盆，让水流到盆里的声音“嘀哒嘀哒“作响，给罪犯造成是自己流血的错觉。
+				随着水流越来越慢，水温越来越低，声音越来越小。
+				没过多久，罪犯就断气而身亡。尸检发现，罪犯死于心脏麻痹。
+			</x-text>
+			<x-image src="https://store.tmui.design/api/randomImg?random=vsf"></x-image>
+		</x-more>
+		<x-divider class="my-24"></x-divider>
+		<x-more height="80">
+			<x-text font-size="18" class=" text-weight-b mb-8">可以设置高度</x-text>
+			<x-text class="line-10">
+				并在地上放置一个铁盆，让水流到盆里的声音“嘀哒嘀哒“作响，给罪犯造成是自己流血的错觉。
+				随着水流越来越慢，水温越来越低，声音越来越小。
+			</x-text>
+			<x-image src="https://store.tmui.design/api/randomImg?random=666df"></x-image>
+		</x-more>
+	</x-sheet>
+
+	<view class="py-32"></view>
+
+</template>
+
+<script setup lang="ts">
+
+</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/261/225/347/244/272/347/273/204/344/273/266//346/250/252/345/220/221/346/273/232/345/212/250 xScrollx.md"

@@ -0,0 +1,135 @@
+# 横向滚动 xScrollx
+
+## 介绍
+
+需要明确内部宽，否则无法左右导航滚动。
+
+## 平台兼容
+
+| Harmony | H5 | andriod | IOS | 小程序 | UTS | UNIAPP-X SDK | version |
+| --- | --- | --- | --- | --- | --- | --- | --- |
+| ☑ | ☑ | ☑️ | ☑️ | ☑️ | ☑️ | 4.76+ | 1.1.18 |
+
+## 文件路径
+
+```ts
+@/uni_modules/tmx-ui/components/x-scrollx/x-scrollx.uvue
+```
+
+## 使用
+
+```ts
+<x-scrollx></x-scrollx>
+```
+
+## Props 属性
+
+| 名称 | 说明 | 类型 | 默认值 |
+| ------ | ---- | ---- | ---- |
+| width | `宽，不能设置为auto,需要一个具体的宽度值`<br>`否则无法左右滚动。`<br> | `string` | `'100%'` |
+| height | `高`<br> | `string` | `'auto'` |
+| scrollbarWidth | `下面横向小条宽,px单位`<br> | `number` | `100` |
+| scrollbarHeight | `下面横向小条高,px单位`<br> | `number` | `6` |
+| showScrollBar | `是否显示底部横线指示`<br> | `boolean` | `true` |
+| scrollPosBarWidth | `内部小指示条的宽,px单位`<br> | `number` | `20` |
+| scrollPosBgColor | `下面滚动指示条的轨道背景`<br> | `string` | `"#f3f5f8"` |
+| darkScrollPosBgColor | `下面滚动指示条的轨道暗黑背景`<br>`不填充的话取输入框的暗黑背景`<br> | `string` | `""` |
+| scrollPosColor | `下面滚动指示条的活动背景`<br>`不填写的话取全局的color`<br> | `string` | `""` |
+| marginTop | `顶部的距离。`<br> | `string` | `"15"` |
+
+
+## Events 事件
+
+| 名称 | 参数 | 说明 |
+| ------ | ---- | ---- |
+| scroll | `evt: UniScrollEvent<br>` | 滚动时触发 |
+
+
+## Slots 插槽
+
+| 名称 | 说明 | 数据 |
+| ------ | ---- | ---- |
+| default | `当前滚指示内部的小条的位置` | - |
+
+
+## Ref 方法
+
+| 名称 | 参数 | 返回值 | 说明 |
+| ------ | ---- | ---- | ---- |
+| - | - | - | - |
+
+## 示例文件路径
+
+```json
+/pages/zhanshi/scrollx
+```
+
+## 示例源码
+
+```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">横向滚动 xScrollx</x-text>
+			<x-text color="#999999">用于内容导航时滚动指示</x-text>
+		</x-sheet>
+
+		<x-sheet>
+			
+			<x-scrollx scrollPosColor="warn"  margin-top="15":scrollbarWidth="50" :scrollPosBarWidth="10">
+				<view class="flex flex-row flex-row-center-start nowrap">
+					<x-grid width="400" :col="4" icon-color="primary" dark-icon-color="primary">
+						<x-grid-item icon="money-cny-circle-fill" text="摇现金"></x-grid-item>
+						<x-grid-item icon="shopping-bag-fill" text="百亿补贴"></x-grid-item>
+						<x-grid-item icon="price-tag-2-fill" text="活动日历"></x-grid-item>
+						<x-grid-item icon="wallet-3-fill" text="领淘金币"></x-grid-item>
+						<x-grid-item icon="gift-fill" text="会员福利"></x-grid-item>
+						<x-grid-item icon="coupon-5-fill" text="省钱卡"></x-grid-item>
+						<x-grid-item icon="shopping-bag-fill" text="百亿补贴"></x-grid-item>
+						<x-grid-item icon="money-cny-circle-fill" text="摇现金"></x-grid-item>
+					</x-grid>
+					<x-grid width="400" :col="4" icon-color="primary" dark-icon-color="primary">
+						<x-grid-item icon="money-cny-circle-fill" text="摇现金"></x-grid-item>
+						<x-grid-item icon="shopping-bag-fill" text="百亿补贴"></x-grid-item>
+						<x-grid-item icon="price-tag-2-fill" text="活动日历"></x-grid-item>
+						<x-grid-item icon="wallet-3-fill" text="领淘金币"></x-grid-item>
+						<x-grid-item icon="gift-fill" text="会员福利"></x-grid-item>
+						<x-grid-item icon="coupon-5-fill" text="省钱卡"></x-grid-item>
+						<x-grid-item icon="shopping-bag-fill" text="百亿补贴"></x-grid-item>
+						<x-grid-item icon="money-cny-circle-fill" text="摇现金"></x-grid-item>
+					</x-grid>
+				</view>
+			</x-scrollx>
+		</x-sheet>
+		
+		
+
+	<!-- 	<x-sheet>
+			<x-scrollx>
+				<x-image class="mr-10" v-for="(item,index) in 6" :key="index" width="100" height="100"
+					:src="`https://store.tmui.design/api/randomImg?random=183${index}`"></x-image>
+			</x-scrollx>
+		</x-sheet> -->
+
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<style >
+	
+
+</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/261/225/347/244/272/347/273/204/344/273/266//346/255/245/351/252/244/346/235/241 xSteps.md"

@@ -0,0 +1,153 @@
+# 步骤条 xSteps
+
+## 介绍
+
+标签内仅可放置其直接子节点：x-steps-item
+
+## 平台兼容
+
+| Harmony | H5 | andriod | IOS | 小程序 | UTS | UNIAPP-X SDK | version |
+| --- | --- | --- | --- | --- | --- | --- | --- |
+| ☑ | ☑ | ☑️ | ☑️ | ☑️ | ☑️ | 4.76+ | 1.1.18 |
+
+## 文件路径
+
+```ts
+@/uni_modules/tmx-ui/components/x-steps/x-steps.uvue
+```
+
+## 使用
+
+```ts
+<x-steps></x-steps>
+```
+
+## Props 属性
+
+| 名称 | 说明 | 类型 | 默认值 |
+| ------ | ---- | ---- | ---- |
+| modelValue | ``<br> | `number` | `0` |
+| icon | `默认图标，请在子级上动态修改`<br> | `string` | `"checkbox-blank-circle-fill"` |
+| activeIcon | `激活时的图标，请在子级上动态修改`<br> | `string` | `"checkbox-circle-fill"` |
+| iconSize | `图标大小,不可动态修改，请在子级上动态修改`<br> | `union` | `"14"` |
+| labelSize | `标题大小，请在子级上动态修改`<br> | `union` | `"14"` |
+| descSize | `下面的小文字介绍大小`<br> | `union` | `"11"` |
+| color | `未选中时的标题颜色，请在子级上动态修改`<br> | `string` | `"#333333"` |
+| activeColor | `激活时的颜色，默认空值取全局主题色。，请在子级上动态修改`<br> | `string` | `""` |
+| vertical | `是否是竖向`<br> | `boolean` | `false` |
+| reverse | `是否反转,不是内容反转,是状态反向.`<br> | `boolean` | `false` |
+| disabled | `是否禁用交互，即不可点击项目来切换进度。`<br> | `boolean` | `true` |
+
+
+## Events 事件
+
+| 名称 | 参数 | 说明 |
+| ------ | ---- | ---- |
+| change | `index: number<br>` | 变换时触发 |
+| update:modelValue | `-` | - |
+
+
+## Slots 插槽
+
+| 名称 | 说明 | 数据 |
+| ------ | ---- | ---- |
+| default | `默认插槽，仅可放置其直接子节点：x-steps-item` | - |
+
+
+## Ref 方法
+
+| 名称 | 参数 | 返回值 | 说明 |
+| ------ | ---- | ---- | ---- |
+| - | - | - | - |
+
+## 示例文件路径
+
+```json
+/pages/zhanshi/steps
+```
+
+## 示例源码
+
+```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">步骤条 Steps</x-text>
+			<x-text color="#999999" >可统一通过父级定制样式，也可单独通过子组件StepsItem来设置，灵活度高。统一设置时，样式不可变，原因在于Uniapp
+				x目前暂不能传递可变值</x-text>
+		</x-sheet>
+
+		<x-sheet :padding="['0','12']">
+			<x-steps :model-value="2">
+				<x-steps-item desc="昨天付的" label="已付钱"></x-steps-item>
+				<x-steps-item desc="还不错" label="快递准备"></x-steps-item>
+				<x-steps-item desc="出题表" label="已送货"></x-steps-item>
+				<x-steps-item desc="2023年3月24" label="已签收"></x-steps-item>
+				<x-steps-item desc="2023年1月10" label="已签收"></x-steps-item>
+			</x-steps>
+		</x-sheet>
+		<x-sheet>
+			<x-text font-size="18" class=" text-weight-b ">可交互，点击项目触发切换</x-text>
+		</x-sheet>
+		<x-sheet :padding="['0','12']">
+			<x-steps v-model="setp" icon="checkbox-blank-circle-line" active-color="error"
+				active-icon="radio-button-fill" :disabled="false">
+				<x-steps-item desc="一般般" label="已付钱"></x-steps-item>
+				<x-steps-item desc="还不错" label="快递准备"></x-steps-item>
+				<x-steps-item desc="出题表" label="已送货"></x-steps-item>
+				<x-steps-item desc="2023年3月24" label="已签收"></x-steps-item>
+			</x-steps>
+		</x-sheet>
+		<x-sheet>
+			<x-text font-size="18" class=" text-weight-b ">竖向</x-text>
+		</x-sheet>
+		<x-sheet :padding="['0','12']">
+			<x-steps :model-value="1" :vertical="true">
+				<x-steps-item desc="错哦 新专辑要开始制作了" label="我是Jay"></x-steps-item>
+				<x-steps-item label="2023新专辑"></x-steps-item>
+				<x-steps-item label="呃!" desc="tmui4.0就是好用"></x-steps-item>
+				<x-steps-item label="2023新专辑要开始制作了哇"></x-steps-item>
+				
+			</x-steps>
+		</x-sheet>
+
+		<x-sheet>
+			<x-text font-size="18" class=" text-weight-b ">插槽定义</x-text>
+		</x-sheet>
+		<x-sheet :padding="['0','12']">
+			<x-steps>
+				<x-steps-item desc="哎呦~不错哦" label="我是Jay"></x-steps-item>
+				<x-steps-item>
+					<template v-slot:default="active">
+						<x-sheet color="primary" :margin="['0']" :padding="['10']">
+							<text class="text-size-m text-white">自定插槽</text>
+						</x-sheet>
+					</template>
+				</x-steps-item>
+				<x-steps-item label="2023新专辑要开始制作了哇"></x-steps-item>
+			</x-steps>
+		</x-sheet>
+
+	<view style="height:80px"></view>
+
+</template>
+
+<script setup lang="ts">
+	const setp = ref(2)
+</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/261/225/347/244/272/347/273/204/344/273/266//346/255/245/351/252/244/346/235/241/345/255/220/347/273/204/344/273/266 xStepsItem.md"

@@ -0,0 +1,150 @@
+# 步骤条子组件 xStepsItem
+
+## 介绍
+
+仅可直接放置在x-steps标签当作直接子接点
+
+## 平台兼容
+
+| Harmony | H5 | andriod | IOS | 小程序 | UTS | UNIAPP-X SDK | version |
+| --- | --- | --- | --- | --- | --- | --- | --- |
+| ☑ | ☑ | ☑️ | ☑️ | ☑️ | ☑️ | 4.76+ | 1.1.18 |
+
+## 文件路径
+
+```ts
+@/uni_modules/tmx-ui/components/x-steps-item/x-steps-item.uvue
+```
+
+## 使用
+
+```ts
+<x-steps-item></x-steps-item>
+```
+
+## Props 属性
+
+| 名称 | 说明 | 类型 | 默认值 |
+| ------ | ---- | ---- | ---- |
+| label | `标题`<br> | `string` | `""` |
+| desc | `辅助信息`<br> | `string` | `""` |
+| color | `未选中时的标题颜色`<br> | `string` | `""` |
+| activeColor | `激活时的颜色，默认空值取全局主题色。`<br> | `string` | `""` |
+| icon | `默认图标，空值时取父级设置的图标`<br> | `string` | `""` |
+| activeIcon | `激活时的图标，空值时取父级设置的图标`<br> | `string` | `""` |
+| iconSize | `图标大小，空值时取父级`<br> | `string` | `""` |
+| labelSize | `标题大小，空值时取父级`<br> | `string` | `""` |
+| descSize | `下面的小文字介绍大小`<br> | `string` | `""` |
+
+
+## Events 事件
+
+| 名称 | 参数 | 说明 |
+| ------ | ---- | ---- |
+| click | `-` | 点击时触发 |
+
+
+## Slots 插槽
+
+| 名称 | 说明 | 数据 |
+| ------ | ---- | ---- |
+| default | `默认的文本节点插槽` | active: boolean<br> |
+
+
+## Ref 方法
+
+| 名称 | 参数 | 返回值 | 说明 |
+| ------ | ---- | ---- | ---- |
+| - | - | - | - |
+
+## 示例文件路径
+
+```json
+/pages/zhanshi/steps
+```
+
+## 示例源码
+
+```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">步骤条 Steps</x-text>
+			<x-text color="#999999" >可统一通过父级定制样式，也可单独通过子组件StepsItem来设置，灵活度高。统一设置时，样式不可变，原因在于Uniapp
+				x目前暂不能传递可变值</x-text>
+		</x-sheet>
+
+		<x-sheet :padding="['0','12']">
+			<x-steps :model-value="2">
+				<x-steps-item desc="昨天付的" label="已付钱"></x-steps-item>
+				<x-steps-item desc="还不错" label="快递准备"></x-steps-item>
+				<x-steps-item desc="出题表" label="已送货"></x-steps-item>
+				<x-steps-item desc="2023年3月24" label="已签收"></x-steps-item>
+				<x-steps-item desc="2023年1月10" label="已签收"></x-steps-item>
+			</x-steps>
+		</x-sheet>
+		<x-sheet>
+			<x-text font-size="18" class=" text-weight-b ">可交互，点击项目触发切换</x-text>
+		</x-sheet>
+		<x-sheet :padding="['0','12']">
+			<x-steps v-model="setp" icon="checkbox-blank-circle-line" active-color="error"
+				active-icon="radio-button-fill" :disabled="false">
+				<x-steps-item desc="一般般" label="已付钱"></x-steps-item>
+				<x-steps-item desc="还不错" label="快递准备"></x-steps-item>
+				<x-steps-item desc="出题表" label="已送货"></x-steps-item>
+				<x-steps-item desc="2023年3月24" label="已签收"></x-steps-item>
+			</x-steps>
+		</x-sheet>
+		<x-sheet>
+			<x-text font-size="18" class=" text-weight-b ">竖向</x-text>
+		</x-sheet>
+		<x-sheet :padding="['0','12']">
+			<x-steps :model-value="1" :vertical="true">
+				<x-steps-item desc="错哦 新专辑要开始制作了" label="我是Jay"></x-steps-item>
+				<x-steps-item label="2023新专辑"></x-steps-item>
+				<x-steps-item label="呃!" desc="tmui4.0就是好用"></x-steps-item>
+				<x-steps-item label="2023新专辑要开始制作了哇"></x-steps-item>
+				
+			</x-steps>
+		</x-sheet>
+
+		<x-sheet>
+			<x-text font-size="18" class=" text-weight-b ">插槽定义</x-text>
+		</x-sheet>
+		<x-sheet :padding="['0','12']">
+			<x-steps>
+				<x-steps-item desc="哎呦~不错哦" label="我是Jay"></x-steps-item>
+				<x-steps-item>
+					<template v-slot:default="active">
+						<x-sheet color="primary" :margin="['0']" :padding="['10']">
+							<text class="text-size-m text-white">自定插槽</text>
+						</x-sheet>
+					</template>
+				</x-steps-item>
+				<x-steps-item label="2023新专辑要开始制作了哇"></x-steps-item>
+			</x-steps>
+		</x-sheet>
+
+	<view style="height:80px"></view>
+
+</template>
+
+<script setup lang="ts">
+	const setp = ref(2)
+</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/261/225/347/244/272/347/273/204/344/273/266//346/260/264/345/215/260 xWatermark.md"

@@ -0,0 +1,91 @@
+# 水印 xWatermark
+
+## 介绍
+
+适合需要保密，版权的页面使用。全端 x-skia-u 绘制斜铺文字，不要官方 canvas。
+
+## 平台兼容
+
+| Harmony | H5 | andriod | IOS | 小程序 | UTS | UNIAPP-X SDK | version |
+| --- | --- | --- | --- | --- | --- | --- | --- |
+| ☑ | ☑ | ☑️ | ☑️ | ☑️ | ☑️ | 4.76+ | 1.1.18 |
+
+## 文件路径
+
+```ts
+@/uni_modules/tmx-ui/components/x-watermark/x-watermark.uvue
+```
+
+## 使用
+
+```ts
+<x-watermark></x-watermark>
+```
+
+## Props 属性
+
+| 名称 | 说明 | 类型 | 默认值 |
+| ------ | ---- | ---- | ---- |
+| label | `水印文字`<br> | `string` | `"XUI DESIGN"` |
+| color | `水印颜色`<br> | `string` | `"rgba(0,0,0,0.05)"` |
+| darkColor | `暗黑时的水印颜色`<br> | `string` | `"rgba(255,255,255,0.05)"` |
+| fontSize | `文字大小`<br> | `string` | `"18"` |
+| gap | `渲染的水印之间的间隙，单位px`<br> | `number` | `40` |
+
+
+## Events 事件
+
+| 名称 | 参数 | 说明 |
+| ------ | ---- | ---- |
+| - | - | - |
+
+## Slots 插槽
+
+| 名称 | 说明 | 数据 |
+| ------ | ---- | ---- |
+| - | - | - |
+
+## Ref 方法
+
+| 名称 | 参数 | 返回值 | 说明 |
+| ------ | ---- | ---- | ---- |
+| - | - | - | - |
+
+## 示例文件路径
+
+```json
+/pages/zhanshi/watermark
+```
+
+## 示例源码
+
+```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">水印 Watermark</x-text>
+			<x-text color="#999999">可以控制颜色、内容、字号和间距。全端 x-skia-u 绘制，不支持图片水印。</x-text>
+		</x-sheet>
+
+		<x-watermark :label="label"></x-watermark>
+</template>
+
+<script setup lang="ts">
+	const label =  "XUI DESIGN"
+</script>
+
+<style lang="scss">
+
+</style>
+```
+
+---
+
+## 版权
+
+@2026 tmui4x [https://xui.tmui.design](https://xui.tmui.design)