基于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="{width: + 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%
希望有所帮助！！

https://www.cnblogs.com/mm-zz/p/10877175.html