搭建項目用的是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%

希望有所幫助！！

基於vue的拖拽縮放插件--vue-drag-resize