@datagetter.cn/area-dragger

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，这样能让更多的人知道，不胜感激！