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

搭建项目用的是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全部内容，希望文章能够帮你解决基于vue的拖拽缩放插件--vue-drag-resize所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。