Tui Plus Vapor

Appearance

# t-movable-area

MovableArea 可移动区域

t-movable-area 组件介绍 ​

t-movable-area 是可移动区域组件，用于承载 t-movable-view 组件。通过在视图层内部处理拖动，避免逻辑层和视图层之间的通信损耗，实现流畅的拖动体验。

t-movable-area 平台兼容 ​

HarmonyH5AndroidiOS小程序UTS
✅✅✅✅✅✅

t-movable-area 基础用法 ​

基础用法参考 demo/movable/movable.uvue，配合 t-movable-view 使用。

vue
<template>
	<view class="p-15">
		<tui-theme-switch></tui-theme-switch>
		<t-card class="mb-15"
				title="MovableArea 拖动区域"
				sub-title="补充官方movable-area不支持APP,小程序开发的时候，避免过多的写条件编译"></t-card>
		<t-section title="拖动"
				   class="mb-15"></t-section>
		<t-movable-area :class="[`w-100% h-150 mb-15 tvg r-10`]">
			<t-movable-view :class="[`twh-60 r-10 fc tbg-pn`]"
							:x="x"
							:y="y"
							direction="all"
							:inertia="true"
							:out-of-bounds="true"
							@change="onChange">
				<t-text :fore="true"
						type="primary">Text</t-text>
			</t-movable-view>
		</t-movable-area>
		<t-section title="绽放"
				   class="mb-15"></t-section>
		<t-movable-area :class="[`w-100% h-200 mb-15 tvg r-10`]"
						:scale-area="true">
			<t-movable-view :class="[`twh-60 r-10 fc tbg-pn`]"
							:x="x"
							:y="y"
							:scale-value="scale"
							:scale="true"
							:inertia="true"
							:out-of-bounds="true"
							direction="all"
							@change="onChange">
				<t-text :fore="true"
						type="primary">Text</t-text>
			</t-movable-view>
		</t-movable-area>

		<t-button @click="scale+=0.2"
				  type="primary">缩放</t-button>
	</view>
</template>
<script setup>
	const x = ref(0)
	const y = ref(0)
	const scale = ref(1)

	function onChange(e : UTSJSONObject) {
		// console.log(e)
	}
</script>

t-movable-area Props ​

属性名说明类型默认值
scaleArea是否支持双指缩放区域booleantrue
path点击组件后跳转的页面路径string''
hover是否启用点击效果booleanfalse
type组件主题类型string''
disabled是否禁用booleanfalse
effect组件显示主题string''
size组件尺寸string''

t-movable-area Slots ​

插槽名说明
default默认插槽，放置 t-movable-view 子组件