vue-area-dragger
基于Vue的区域拖拽组件
安装
npm i @datagetter.cn/area-dragger
参数/方法
参数/方法 | 描述 |
---|---|
imgUrl | 背景图地址 非必填 |
moveWidth | 拖拽区宽 非必填 默认100 |
moveHeight | 拖拽区高 非必填 默认100 |
wrapWidth | 容器高 非必填 默认200 |
wrapHeight | 容器高 非必填 默认200 |
getAreaPosition() | 获取区域的位置 |
getZoomRatio() | 获取背景的缩放比例 |
async getImageSize() | 获取图片的尺寸 |
slot[name=content] | vue插槽 |
v-on:areamove | 区域移动时,触发的vue事件 |
使用方法 超简单
<template>
<div>
<!-- 可通过imgUrl设置图片 -->
<AreaDragger
imgUrl="http://datagetter.cn:9000/datagetter.cn/public/common/datagetter_qrcode.png"
@areamove="areamove"
>
<template slot="content">这里可自定义内容</template>
</AreaDragger>
</div>
</template>
<script>
import AreaDragger from '@datagetter.cn/area-dragger/lib/AreaDragger';
export default {
components: { AreaDragger },
methods: {
areamove (areaPos,zoomRatio,imageSize) {
console.log(areaPos,zoomRatio,imageSize);
}
}
}
</script>
二次开发步骤
-
1.开源地址下载代码 https://github.com/lizhiqianduan/vue-area-dragger
-
2.进入项目执行命令
npm install && npm run test
- 3.修改相关代码,即可实时预览效果
最后
如果觉得有用,右上角请留下你的star,这样能让更多的人知道,不胜感激!