drag-scale-rotate
TypeScript icon, indicating that this package has built-in type declarations

1.0.5 • Public • Published

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参数

参数 说明 类型 可选值 默认值
v-model:current 选中项 number - -1
v-model:list 列表数据 Array - -
width 容器宽度 string - 300px
initialW 容器初始宽度 string - -
height 容器高度 string - 300px
initialH 容器初始高度 string - -
theme 选中主题色 string #f56c6c
themeText 选中主题文本色 string - #fff
angleRange 对正角度范围,单位度(°) number - 5
scale 双指缩放一倍的像素 number - 100
minisize 图片最小宽高(px) number - 30
isometric 是否等比例缩放 boolean - true
scaleseats 缩放按钮摆放列表 array 'nw', 'n', 'ne', 'e', 'se', 's', 'sw', 'w' ['nw', 'n', 'ne', 'e', 'se', 's', 'sw', 'w']

Readme

Keywords

Package Sidebar

Install

npm i drag-scale-rotate

Weekly Downloads

0

Version

1.0.5

License

ISC

Unpacked Size

775 kB

Total Files

39

Last publish

Collaborators

  • gw_2023