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

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

00一、安装依赖

cnpm install vue-drag-resize 

00二、配置main.js

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

00三、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的宽高同样这样就能够实现缩放大小 

00四、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;
},

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

但愿有所帮助！！