基于vue的拖拽缩放插件--vue-drag-resize

搭建项目用的是vue-cli3.0,主要实现功能实现对图片的拖拽和放大缩小

001、安装依赖

cnpm install vue-drag-resize 

002、配置main.js

import VueDragResize from 'vue-drag-resize' //缩放、拖拽
Vue.component('vue-drag-resize', VueDragResize)

003、html

//需要给VueDragResize套一个div

<div id="app">

//缩放功能主要是缩放VueDrangResize标签

<VueDragResize :w="200" :h="200" v-on:resizing="resize" v-on:dragging="resize">

　　<!-- 图片缩放 -->　将这个div的宽高动态设置==VueDrangResize的宽高，这样可实时完成缩放

　　<div class="box" :style="{ + vw+ 'px',height:+vh+'px'}">
　　我这写的是本地的图片，图片可以动态获取

　　　　<img src="../../static/timg.jpg">
　　</div>
</VueDragResize>
</div>
为了缩放图片，所以给img标签外套一个div,动态获取宽高，宽高就是VueDragResize的宽高一样这样就可以实现缩放大小

004、js

components: {
　　VueDragResize
},

data() {
　　return {
　　　　vw: 0,
　　　　vh: 0,
　　　　top: 0,
　　　　left:0
　　};
},
created() {
　　this.vw = 200 + "px";
　　this.vh = 200 + "px";
},
初始化渲染。
//缩小
resize(newRect) {
this.vw = newRect.width;
this.vh = newRect.height;
this.top = newRect.top;
this.left = newRect.left;
},

005、给img外面的div设置了宽高，img的宽高设置为100%

希望有所帮助！！