AVM拖动组件movable-view介绍及代码实践

2024-02-03 00:45:16

AVM 拖动组件 movable-view 介绍

AVM 拖动组件 movable-view 是一个支持拖动操作的组件，可以实现拖拽、平移、旋转、缩放等操作。movable-view 组件的属性非常丰富，可以满足各种拖动需求。

movable-view 组件属性

属性	类型	默认值	说明
direction	string	'all'	拖动方向，可选值：'all'（所有方向）、'horizontal'（水平方向）、'vertical'（垂直方向）
inertia	boolean	false	是否启用惯性滑动
scale	boolean	false	是否启用缩放
rotate	boolean	false	是否启用旋转
preventScroll	boolean	false	是否阻止滚动
momentumLimitValue	number	100	惯性滑动最大速度
threshold	number	5	拖动最小距离
outOfBounds	boolean	false	是否允许拖动组件超出边界
damping	number	15	阻尼系数，数值越大，拖动越快
startX	number	0	拖动组件的初始 X 坐标
startY	number	0	拖动组件的初始 Y 坐标
scaleMin	number	0.5	缩放的最小值
scaleMax	number	2	缩放的最大值
rotateMin	number	-45	旋转的最小值
rotateMax	number	45	旋转的最大值

movable-view 组件事件

事件	说明
dragstart	拖动开始时触发
drag	拖动中触发
dragend	拖动结束时触发
scale	缩放时触发
rotate	旋转时触发

movable-view 组件代码实践

下面是一个使用 movable-view 组件实现拖拽功能的示例代码：

<template>
  <movable-view
    :direction="direction"
    :inertia="inertia"
    :scale="scale"
    :rotate="rotate"
    :preventScroll="preventScroll"
    :momentumLimitValue="momentumLimitValue"
    :threshold="threshold"
    :outOfBounds="outOfBounds"
    :damping="damping"
    :startX="startX"
    :startY="startY"
    :scaleMin="scaleMin"
    :scaleMax="scaleMax"
    :rotateMin="rotateMin"
    :rotateMax="rotateMax"
    @dragstart="onDragstart"
    @drag="onDrag"
    @dragend="onDragend"
    @scale="onScale"
    @rotate="onRotate"
  >
    <view>拖拽组件</view>
  </movable-view>
</template>

<script>
export default {
  data() {
    return {
      direction: 'all',
      inertia: false,
      scale: false,
      rotate: false,
      preventScroll: false,
      momentumLimitValue: 100,
      threshold: 5,
      outOfBounds: false,
      damping: 15,
      startX: 0,
      startY: 0,
      scaleMin: 0.5,
      scaleMax: 2,
      rotateMin: -45,
      rotateMax: 45,
    }
  },
  methods: {
    onDragstart(e) {
      console.log('拖动开始')
    },
    onDrag(e) {
      console.log('拖动中')
    },
    onDragend(e) {
      console.log('拖动结束')
    },
    onScale(e) {
      console.log('缩放')
    },
    onRotate(e) {
      console.log('旋转')
    },
  },
}
</script>