基于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%

希望有所帮助!!

原文地址:https://www.cnblogs.com/mm-zz/p/10877175.html