Skip to content

Drag 拖拽


按需引入

js
import Vue from 'vue'
import { MeDrag } from 'mine-h5-ui'

Vue.use(MeDrag)

复制

  • 如果你觉得重新编写 HTML 结构麻烦,可以直接复制下面的代码。

代码演示

基础用法

  • 通过属性 list 来设置组件的列表数据。
vue
<script lang="ts" setup>
import { ref } from 'vue'

/**
 * 列表数据
 */
const list = ref([
  {
    rect: {
      w: 100,
      h: 100,
      x: 0,
      y: 0,
      r: 0
    },
    url: 'https://dummyimage.com/100x100/67c23a/fff&text=1'
  },
  {
    rect: {
      w: 80,
      h: 80,
      x: 110,
      y: 110,
      r: 0
    },
    url: 'https://dummyimage.com/80x80/409eff/fff&text=2'
  }
])

/**
 * 当前选中项
 */
const current = ref(0)
</script>

<template>
  <me-drag v-model:list="list" v-model:current="current">
    <template #="{ item }">
      <img :src="item.url" alt="img" mode="fill" />
    </template>
  </me-drag>
</template>

API

参数

参数说明类型可选值默认值版本
v-model:current选中项number---1--
v-model:list列表数据Array------
width容器宽度string--300px--
height容器高度string--300px--
theme选中主题色string--#f56c6c--
themeText选中主题文本色string--#fff--
angleRange对正角度范围,单位度(°)number--5--
scale双指缩放一倍的像素number--100v2.3.3

Slots

具名插槽说明scopedSlots版本
default默认名称{ item, index }--

方法

方法名说明回调参数版本
change拖拽改变时触发list: any[], name: stringv2.3.5
update:current更新选中项触发value: numberv2.0.0
update:list更新列表触发list: any[]v2.0.0

基于 MIT 许可发布