drag-scale-rotate v1.0.5

Drag-Scale-Rotate

是mine-h5-ui中drag组件的改版(新增部分接口以及限制)---目前等比例配置以及最小宽高限制仅限于右下角缩放按钮

安装

npm i drag-scale-rotate

使用

import { createApp } from 'vue'
import App from './App.vue'
import DRAGSCALEROTATE from 'drag-scale-rotate'
import 'drag-scale-rotate/lib/theme-default/index.css'

const app = createApp(App)
app.use(DRAGSCALEROTATE)
app.mount('#app')

代码演示

<template>
  <me-drag v-model:list="list" v-model:current="current">
    <template #default="item">
      <img :src="(item as any).url" alt="img" mode="fill" />
    </template>
  </me-drag>
</template>
<script lang="ts" setup>
import {ref} from "vue"
// 列表数据
const list = ref([
  {
    rect: {
      w: 100,
      initialW: 100,
      h: 100,
      initialH: 100,
      x: 0,
      y: 0,
      r: 0
    },
    url: 'https://dummyimage.com/100x100/67c23a/fff&text=1'
  },
  {
    rect: {
      w: 80,
	  initialW:80,
      h: 80,
	  initialH:80,
      x: 110,
      y: 110,
      r: 0
    },
    url: 'https://dummyimage.com/80x80/409eff/fff&text=2'
  }
])
const current = ref(0) // 当前选中项
</script>

API参数