drag-scale-rotate
v1.0.5
Published
mine-h5-ui中drag组件的优化
Downloads
8
Readme
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>