tmui-cli 2.0.0 → 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/213/226/346/213/275/346/216/222/345/272/217/345/255/220/347/273/204/344/273/266 xDragItem.md"

@@ -0,0 +1,253 @@
+# 拖拽排序子组件 xDragItem
+
+## 介绍
+
+仅可放置在父容器x-drag中，如果在组件上写style时，不可写left,top,width,height等属性来影响组件的高和宽。
+也不可直接写padding,margin来影响组件的位置。你可以在组件中自己写view后，再自由的布局写间隙等。
+
+## 平台兼容
+
+| Harmony | H5 | andriod | IOS | 小程序 | UTS | UNIAPP-X SDK | version |
+| --- | --- | --- | --- | --- | --- | --- | --- |
+| ☑ | ☑ | ☑️ | ☑️ | ☑️ | ☑️ | 4.76+ | 1.1.18 |
+
+## 文件路径
+
+```ts
+@/uni_modules/tmx-ui/components/x-drag-item/x-drag-item.uvue
+```
+
+## 使用
+
+```ts
+<x-drag-item></x-drag-item>
+```
+
+## Props 属性
+
+| 名称 | 说明 | 类型 | 默认值 |
+| ------ | ---- | ---- | ---- |
+| order | `索引，vfor时提供index,必填。一定是正确的索引列表顺序`<br> | `number` | `0` |
+| disabled | `禁用本项目被拖动，禁用时顺序会被固定`<br> | `boolean` | `false` |
+
+
+## Events 事件
+
+| 名称 | 参数 | 说明 |
+| ------ | ---- | ---- |
+| click | `-` | - |
+
+
+## Slots 插槽
+
+| 名称 | 说明 | 数据 |
+| ------ | ---- | ---- |
+| default | `默认插槽` | - |
+
+
+## Ref 方法
+
+| 名称 | 参数 | 返回值 | 说明 |
+| ------ | ---- | ---- | ---- |
+| setOrderIndex | - | `-` | - |
+| setActivdId | - | `-` | - |
+| setStylSetProperty | - | `-` | - |
+| getStylSetProperty | - | `-` | - |
+| updateForce | - | `-` | - |
+| updatePos | - | `-` | - |
+
+
+## 示例文件路径
+
+```json
+/pages/fankui/drag
+```
+
+## 示例源码
+
+```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">拖拽排序 xDrag</x-text>
+			<x-text color="#999999">
+				使用子组件窗口进行排序，组件内可以自由布局，最大的灵活度不影响你布局自己的外观。
+				同时还支持设定col来定制为多列布局为宫格或者为列表模式。
+			</x-text>
+		</x-sheet>
+		<x-sheet>
+			<x-drag @change="onchange" v-if="list.length>0" :list="list">
+				<x-drag-item style="display: flex;flex-direction: column;" v-for="(item,index) in list" :order="index"
+					:disabled="index==1" :key="index">
+					<view class="flex-1 mb-2 px-12 flex-row flex flex-row-center-start" :style="{
+						backgroundColor: bgColor,
+						opacity:index==1?'0.6':'1'
+					}">
+						<x-text>{{index==1?'我被固定在2':`长按${item.getNumber('id')}排序`}}</x-text>
+					</view>
+				</x-drag-item>
+			</x-drag>
+			<x-empty v-if="list.length==0"></x-empty>
+		</x-sheet>
+		<x-sheet>
+			<x-text font-size="18" class=" text-weight-b ">设置为2列形成宫格</x-text>
+		</x-sheet>
+		<x-sheet>
+			<x-drag :col="2" :list="list2">
+				<x-drag-item :disabled="index==2" style="display: flex;flex-direction: column;"
+					v-for="(item,index) in list2" :order="index" :key="index">
+					<view @click="onclick(index)" class="flex-1 mb-2 mx-2 px-12 flex-row flex flex-row-center-start"
+						:style="{
+						backgroundColor: bgColor,
+						opacity:index==2?'0.6':'1'
+					}">
+						<x-text>长按{{item.getNumber('id')}}排序</x-text>
+					</view>
+				</x-drag-item>
+			</x-drag>
+		</x-sheet>
+		<x-sheet>
+			<x-text font-size="18" class=" text-weight-b ">演示局部拖动,拖动时页面自动滚动</x-text>
+		</x-sheet>
+		<x-sheet>
+			<x-drag :list="list4" @move="onmove" @start="ontouchstart" @end="ontouchend">
+				<x-drag-item style="display: flex;flex-direction: column;" v-for="(item,index) in list4" :order="index"
+					:key="index">
+					<view class="flex-1 mb-2 px-12 flex-row flex flex-row-center-start"
+						:style="{backgroundColor: bgColor}">
+						<view @longpress.stop="" <!-- #ifdef WEB -->
+							@mousedown.stop=""
+							@mousemove.stop=""
+							<!-- #endif -->
+							@click.stop="onclick(index)"
+							style="height:100%"
+							class="flex-1"
+							>
+							<x-text>{{index}}</x-text>
+						</view>
+						<view>
+							<x-icon code="EF3E"></x-icon>
+						</view>
+					</view>
+				</x-drag-item>
+
+			</x-drag>
+		</x-sheet>
+		<x-sheet>
+			<x-text font-size="18" class=" text-weight-b ">设置更多的列</x-text>
+		</x-sheet>
+		<x-sheet>
+			<x-drag :col="4" :list="list3">
+				<x-drag-item style="display: flex;flex-direction: column;" v-for="(item,index) in list3" :order="index"
+					:key="index">
+					<view class="flex-1 mb-2 mx-2 px-12 flex-row flex flex-row-center-start"
+						:style="{backgroundColor: bgColor}">
+						<x-text font-size="12">长按排序</x-text>
+					</view>
+				</x-drag-item>
+			</x-drag>
+		</x-sheet>
+
+</template>
+
+<script setup lang="ts">
+	import { xConfig } from "@/uni_modules/tmx-ui"
+	const list = ref<UTSJSONObject[]>([])
+	const list2 = ref<UTSJSONObject[]>([
+		{ id: 1 } as UTSJSONObject,
+		{ id: 2 } as UTSJSONObject,
+		{ id: 3 } as UTSJSONObject,
+		{ id: 4 } as UTSJSONObject,
+		{ id: 5 } as UTSJSONObject,
+		{ id: 6 } as UTSJSONObject
+	])
+	const list3 = ref<UTSJSONObject[]>([
+		{ id: 1 } as UTSJSONObject,
+		{ id: 2 } as UTSJSONObject,
+		{ id: 3 } as UTSJSONObject,
+		{ id: 4 } as UTSJSONObject,
+		{ id: 5 } as UTSJSONObject,
+		{ id: 6 } as UTSJSONObject,
+		{ id: 7 } as UTSJSONObject,
+		{ id: 8 } as UTSJSONObject,
+		{ id: 9 } as UTSJSONObject
+	])
+	const list4 = ref<UTSJSONObject[]>([
+		{ id: 1 } as UTSJSONObject,
+		{ id: 2 } as UTSJSONObject,
+		{ id: 3 } as UTSJSONObject,
+		{ id: 4 } as UTSJSONObject,
+		{ id: 5 } as UTSJSONObject,
+		{ id: 6 } as UTSJSONObject
+	])
+	let tid = 0
+	let nowPageScrollY = ref(0)
+	let isMoveScroll = ref(false)
+	let scrollDiff = ref(25)
+	const bgColor = computed(() : string => xConfig.dark == 'dark' ? '#333' : '#e3e8f4')
+
+
+
+	onReady(() => {
+		tid = setTimeout(function () {
+			list.value = [
+				{ id: 1 } as UTSJSONObject,
+				{ id: 2 } as UTSJSONObject,
+				{ id: 3 } as UTSJSONObject,
+				{ id: 4 } as UTSJSONObject,
+				{ id: 5 } as UTSJSONObject,
+				{ id: 6 } as UTSJSONObject
+			] as UTSJSONObject[]
+		}, 500);
+	})
+	onUnload(() => {
+		clearTimeout(tid)
+	})
+	onPageScroll((opts) => {
+		if (isMoveScroll.value) return;
+		nowPageScrollY.value = opts.scrollTop
+	})
+
+
+	function ontouchstart() {
+
+	}
+	function ontouchend() {
+		isMoveScroll.value = false;
+
+	}
+	function onmove(diff : number) {
+
+		isMoveScroll.value = true;
+		nowPageScrollY.value += diff;
+		uni.pageScrollTo({
+			scrollTop: nowPageScrollY.value
+		})
+	}
+	function onclick(index : number) {
+		uni.showToast({ title: `点击了:${index}`, icon: 'none' })
+	}
+	function onchange(list : UTSJSONObject[]) {
+		console.warn("变动的数据：", list)
+	}
+	
+
+</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/217/215/351/246/210/347/273/204/344/273/266//346/261/275/346/263/241/350/217/234/345/215/225 xPopover.md"

@@ -0,0 +1,213 @@
+# 汽泡菜单 xPopover
+
+## 介绍
+
+汽泡菜单,警告:如果你弹出的内容比如文本,它会自动宽和高,是个特殊组件在web上,此类需要固定下宽.
+建议内容要自己写个固定宽或者高性能更好。另外sdk4.57开始，在微信端你的菜单内容最好不要动态更改导致宽和高动态变化，在微信端只会记录首次的
+内容区域的宽和高（触发插槽不限制），如果确实在微信端要动态变更内容可以vif整体组件或者改变key来刷新组件解决。非微信端无此限制。
+
+## 平台兼容
+
+| Harmony | H5 | andriod | IOS | 小程序 | UTS | UNIAPP-X SDK | version |
+| --- | --- | --- | --- | --- | --- | --- | --- |
+| ☑ | ☑ | ☑️ | ☑️ | ☑️ | ☑️ | 4.76+ | 1.1.18 |
+
+## 文件路径
+
+```ts
+@/uni_modules/tmx-ui/components/x-popover/x-popover.uvue
+```
+
+## 使用
+
+```ts
+<x-popover></x-popover>
+```
+
+## Props 属性
+
+| 名称 | 说明 | 类型 | 默认值 |
+| ------ | ---- | ---- | ---- |
+| position | `弹出的位置。`<br>`'bc'\`<br>`'br'\`<br>`'bl'\`<br>`'tr'\`<br>`'tc'\`<br>`'tl'`<br>`底中\`<br>`底右\`<br>`底左\`<br>`顶右\`<br>`顶中\`<br>`顶左`<br> | `xPopopverPosType` | `'bc'` |
+| keyName | `如果你的弹出层内容是异步加载。`<br>`你需要刷新下此key以刷新位置。如果你是vif一来切换或者显示前内容是固定的，则不需要刷新此值。`<br> | `number` | `0` |
+| modelValue | `变量控制是否显示菜单，等同v-model=""`<br>`如果你想默认显示，但不受变量控制由内部自行处理可以:model-value="true"即可`<br> | `boolean` | `false` |
+| isClickClose | `点击弹出的内容是否允许关闭。`<br> | `boolean` | `true` |
+| round | `容器圆角。ios如果不设置，你内容圆角没有用。`<br> | `string` | `'16'` |
+| maskBgColor | `遮罩背景,默认是透明`<br> | `string` | `"rgba(0,0,0,0)"` |
+| showTriangle | `是否显示指示的三角形。`<br> | `boolean` | `false` |
+| triangleColor | `三角指示的背景色`<br> | `string` | `'white'` |
+| triangleDarkColor | `三角指示的暗黑背景色,空取sheet暗黑背影色`<br> | `string` | `''` |
+| zIndex | ``<br> | `number` | `100` |
+
+
+## Events 事件
+
+| 名称 | 参数 | 说明 |
+| ------ | ---- | ---- |
+| update:modelValue | `-` | - |
+
+
+## Slots 插槽
+
+| 名称 | 说明 | 数据 |
+| ------ | ---- | ---- |
+| default | `默认插槽触发区域，点击此插槽内容可显示菜单。` | - |
+| menu | `菜单弹出区域的插槽，弹出内容可以在这里自由布局。` | - |
+
+
+## Ref 方法
+
+| 名称 | 参数 | 返回值 | 说明 |
+| ------ | ---- | ---- | ---- |
+| - | - | - | - |
+
+## 示例文件路径
+
+```json
+/pages/fankui/popover
+```
+
+## 示例源码
+
+```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">汽泡菜单 Popover</x-text>
+		<x-text color="#999999">
+			方向由上三个和下三个方位共6个。不提供左和右，因为在移动端用处不大。采用插槽布局弹出内容灵活自由度极高。同时可以插槽触发以及变量控制关闭。
+			警告:如果你弹出的内容比如文本,它会自动宽和高,是个特殊组件在web上,此类需要固定下宽.
+		</x-text>
+	</x-sheet>
+	<x-sheet class="flex flex-row flex-row-center-between">
+		<x-popover :show-triangle="true" position="bl">
+			<x-button color="error" round="64" :iconBtn="true" icon="menu-unfold-fill"></x-button>
+			<template #menu>
+				<view style="width:140px">
+					<x-cell v-for="(item,index) in menuCount" :key="index" :show-bottom-border="index!=menuCount-1"
+						:card="false" :title="'菜单-'+item"></x-cell>
+				</view>
+
+			</template>
+		</x-popover>
+		<x-popover mask-bg-color="rgba(0,0,0,0.3)" :show-triangle="true" triangle-color="black"
+			triangle-dark-color="black">
+			<x-button round="64" :iconBtn="true" icon="menu-line"></x-button>
+			<template #menu>
+				<view style="width:140px">
+					<x-cell color="black" dark-color="black" bottom-border-color="#1f1f1f" title-color="white"
+						icon-color="white" v-for="(item,index) in menuCount" :key="index"
+						:show-bottom-border="index!=menuCount-1" :card="false" :title="'菜单-'+item"></x-cell>
+				</view>
+
+			</template>
+		</x-popover>
+		<x-popover :show-triangle="true" position="br" triangle-color="success" triangle-dark-color="success">
+			<x-button round="64" color="success" :iconBtn="true" icon="more-2-line"></x-button>
+			<template #menu>
+				<view style="width:140px">
+					<x-cell color="success" icon-color="white" dark-color="success" linkColor="white"
+						linkDarkColor="white" titleColor="white" bottomBorderColor="rgba(255,255,255,0.1)"
+						v-for="(item,index) in menuCount" :key="index" :show-bottom-border="index!=menuCount-1"
+						:card="false" :title="'菜单-'+item"></x-cell>
+				</view>
+			</template>
+		</x-popover>
+	</x-sheet>
+
+	<x-sheet>
+		<x-text font-size="18" class=" text-weight-b ">默认弹出</x-text>
+	</x-sheet>
+	<x-sheet class="flex flex-row flex-row-center-center">
+
+		<x-popover position="bc" v-model="show" :show-triangle="true" triangle-color="#333" triangle-dark-color="#333">
+			<text class="text-red">点击我也能打开菜单</text>
+			<template #menu>
+				<view style="width:180px">
+					<x-cell url="text" color="#333" dark-color="#333" title-color="white" icon-color="white"
+						v-for="(item,index) in menuCount" :key="index" bottom-border-color="#474747"
+						:show-bottom-border="index!=menuCount-1" :card="false" :title="'菜单-'+item"></x-cell>
+				</view>
+			</template>
+		</x-popover>
+		<!-- <x-button class="ml-32" @click="show=true">变量控制</x-button> -->
+	</x-sheet>
+	<x-sheet>
+		<x-text font-size="18" class=" text-weight-b ">弹出方向</x-text>
+	</x-sheet>
+	<x-sheet>
+		<view class="flex flex-row flex-row-center-between mb-32">
+			<x-popover position="bl">
+				<x-text>底左对齐</x-text>
+				<template #menu>
+					<x-sheet dark-color="#333" :margin="['0']">
+						<x-text>菜单可随意布局</x-text>
+						<x-button>任意布局哦</x-button>
+					</x-sheet>
+				</template>
+			</x-popover>
+			<x-popover>
+				<x-text>底中对齐</x-text>
+				<template #menu>
+					<x-sheet dark-color="#333" :margin="['0']"><x-text>菜单可随意布局</x-text></x-sheet>
+
+				</template>
+			</x-popover>
+			<x-popover position="br">
+				<x-text>底右对齐</x-text>
+				<template #menu>
+					<x-sheet dark-color="#333" width="120" :margin="['0']">
+						<x-text>菜单可随意布局</x-text>
+					</x-sheet>
+				</template>
+			</x-popover>
+		</view>
+		<view class="flex flex-row flex-row-center-between">
+			<x-popover position="tl">
+				<x-text>上左对齐</x-text>
+				<template #menu>
+					<x-sheet dark-color="#333" :margin="['0']"><x-text>菜单可随意布局</x-text></x-sheet>
+				</template>
+			</x-popover>
+			<x-popover position="tc">
+				<x-text>上中对齐</x-text>
+				<template #menu>
+					<x-sheet dark-color="#333" :margin="['0']"><x-text>菜单可随意布局</x-text></x-sheet>
+				</template>
+			</x-popover>
+			<x-popover position="tr">
+				<x-text>上右对齐</x-text>
+				<template #menu>
+					<x-sheet dark-color="#333" width="120" :margin="['0']"><x-text>菜单可随意布局</x-text></x-sheet>
+				</template>
+			</x-popover>
+		</view>
+
+	</x-sheet>
+
+	<view style="height: 100px;"></view>
+
+</template>
+
+<script setup lang="ts">
+	import { ref } from 'vue'
+
+	const menuCount = ref(4)
+	const show = ref(true)
+</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/265/256/345/212/250/351/235/242/346/235/277 FloatDrawer.md"

@@ -0,0 +1,166 @@
+# 浮动面板 FloatDrawer
+
+## 介绍
+
+提供流畅的拖拉阻尼效果，回弹丝滑。右滑关闭逻辑已经实现,但在app体验不好,主要是scoll与事件冲突需要官方优化.
+
+## 平台兼容
+
+| Harmony | H5 | andriod | IOS | 小程序 | UTS | UNIAPP-X SDK | version |
+| --- | --- | --- | --- | --- | --- | --- | --- |
+| ☑ | ☑ | ☑️ | ☑️ | ☑️ | ☑️ | 4.76+ | 1.1.18 |
+
+## 文件路径
+
+```ts
+@/uni_modules/tmx-ui/components/x-float-drawer/x-float-drawer.uvue
+```
+
+## 使用
+
+```ts
+<x-float-drawer></x-float-drawer>
+```
+
+## Props 属性
+
+| 名称 | 说明 | 类型 | 默认值 |
+| ------ | ---- | ---- | ---- |
+| show | `显示可v-model:show双向绑定`<br>`默认是打开还是放置在底部。`<br> | `boolean` | `false` |
+| onlyHeader | `是否仅允许通过标题栏拖动。`<br> | `boolean` | `false` |
+| duration | `动画时间`<br> | `number` | `350` |
+| round | `向上的圆角`<br>`空值时，取全局配置的圆角。`<br> | `string` | `""` |
+| size | `百分比，数字字符或者带单位,`<br>`默认露出的内容高度`<br> | `string` | `"15%"` |
+| maxHeight | `弹层最大的高度值，默认为屏幕的可视高`<br>`提供值时不能为百分比，可以是px,rpx单位数字。如果你不带单位，默认转换为rpx单位。`<br> | `string` | `"80%"` |
+| triggerDy | `当拖动时，触发打开和关闭时的临界值，单位是px`<br>`如果没有达到此临界值时，将会回弹至原始位置。`<br> | `number` | `100` |
+| threshold | `当拖动时，如果已经达到了关闭和打开时的临界值时`<br>`可以继续拖拉时缓动阻尼值`<br> | `number` | `0.045` |
+| bgColor | `内容层的背景色`<br> | `string` | `"white"` |
+| darkBgColor | `暗黑的背景色,空时，取全局的sheetDarkColor`<br> | `string` | `""` |
+| actionColor | `拖动标题栏的横线背景色`<br> | `string` | `"#888888"` |
+| disabledScroll | `禁用内部的容器并采用view容器`<br> | `boolean` | `false` |
+| containerType | `没有禁用disabledScroll生效`<br>`容器内部使用的类型`<br>`scroll :scroll-view`<br>`list : list-view`<br> | `string` | `"scroll"` |
+| disabled | `是否禁用用户滚动等来触发关闭或者打开。`<br> | `boolean` | `false` |
+| zIndex | `层级`<br> | `number` | `100` |
+| contentMargin | `控制内容的边跑,有时需要自定布局时非常有用.`<br>`请直接使用style css规则写margin,`<br> | `string` | `"0 16px 16px 16px"` |
+
+
+## Events 事件
+
+| 名称 | 参数 | 说明 |
+| ------ | ---- | ---- |
+| close | `-` | 关闭时执行 |
+| open | `-` | 打开执行的事件 |
+| beforeOpen | `-` | 打开前执行 |
+| beforeClose | `-` | 关闭前执行 |
+| heightChange | `-` | 高度位置变化时触发这个差值.返回参数evt是个百分比,0%是最低下,100%代表是在最顶部. |
+| movestart | `-` | 开始拖动 |
+| moveend | `-` | 结束拖动 |
+| update:show | `-` | 等同v-model:show |
+
+
+## Slots 插槽
+
+| 名称 | 说明 | 数据 |
+| ------ | ---- | ---- |
+| default | `默认插槽` | show: Boolean<br>show: Number<br>height: Boolean<br>height: Number<br> |
+
+
+## Ref 方法
+
+| 名称 | 参数 | 返回值 | 说明 |
+| ------ | ---- | ---- | ---- |
+| setOpts | - | `-` | - |
+| callEmits | - | `-` | - |
+| setDisabledScolly | - | `-` | - |
+
+
+## 示例文件路径
+
+```json
+/pages/fankui/float-drawer
+```
+
+## 示例源码
+
+```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 color="primary">
+		<view ref="domview" class="heightani mb-16" :style="{height:spr+'px'}">
+			<x-text class="text-size-g text-weight-b ma-16" color="primary">我是丝滑般的差值效果{{spr}}</x-text>
+		</view>
+		<text class="text-size-g text-weight-b text-white">浮动面板 FloatDrawer</text>
+		<text class="text-size-m text-grey mt-10 text-white line-8">可以自由设定露出最小值和最大值，支持rpx,px,%等单位，性能流畅回弹丝滑</text>
+		<text class="text-size-m text-grey mt-10 text-white line-8 mb-16">也可以通过双向绑定手动控制打开和关闭</text>
+		<text
+			class="text-size-m text-grey mt-10 text-white line-8 mb-16">通过movestart,moveend,heightChange配合动画可以实现反向差值动画,类似头条的视频中的评论缩放效果.</text>
+		<x-button :block="true" @click="showFloat=true">打开</x-button>
+
+	</x-sheet>
+
+	<x-float-drawer content-margin="0px" @beforeClose="onbeforeclose" @movestart='onmovestart' @moveend="onmoveend"
+		@heightChange="onheightChange" v-model:show="showFloat" size="120px" max-height="75%">
+		<template v-slot:default="{show,height}">
+			<x-sheet :margin="['0']">
+				<x-text class="text-size-g text-weight-b mb-16">请拖动我查看效果</x-text>
+				<x-button color="success" :block="true" @click="showFloat=false">关闭</x-button>
+			</x-sheet>
+			<x-sheet height="100" v-for="item in 10" :key="item" color="primary">
+			</x-sheet>
+		</template>
+	</x-float-drawer>
+	<view style="height:1000px"></view>
+
+</template>
+
+<script setup lang="ts">
+	import { ref } from 'vue'
+
+	const showFloat = ref(false)
+	const spr = ref(0)
+	const ismove = ref(false)
+	const domview = ref<UniElement | null>(null)
+
+	const onbeforeclose = () => {
+		// console.log(11)
+	}
+
+	const onmovestart = () => {
+		const dom = domview.value!
+		dom.style.setProperty('transition-duration', '0ms')
+	}
+
+	const onmoveend = () => {
+		const dom = domview.value!
+		dom.style.setProperty('transition-duration', '300ms')
+	}
+
+	const onheightChange = (pre : number) => {
+		const dom = domview.value!
+		spr.value = pre * 1.5
+		dom.style.setProperty('height', Math.ceil(spr.value) + 'px')
+	}
+</script>
+
+<style scoped>
+	.heightani {
+		/* transition-duration: 0ms; */
+		transition-property: height;
+		transition-timing-function: linear;
+		background-color: #ffffff;
+		overflow: hidden;
+		border-radius: 8px;
+	}
+</style>
+```
+
+---
+
+## 版权
+
+@2026 tmui4x [https://xui.tmui.design](https://xui.tmui.design)