本文主要是介绍vue-drag-resize 拖拽缩放插件，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
一、前言
项目需求，在网上找到一个好用的插件。
中文详解：链接
git：链接
二、效果
三、源码
<template><div class="main"><vue-drag-resize :w="vw" :h="vh" v-on:resizing="resize" ><div class="box" :style="{ width: `${vw}px`, height: `${vh}px` }"><img :style="{ width: `${vw}px`, height: `${vh}px` }" src="@images/test.jpg"></div></vue-drag-resize></div>
</template><script>
import VueDragResize from 'vue-drag-resize';
export default {components: {VueDragResize},data() {return {vw: 0,vh: 0,top: 0,left:0};},created() {this.vw = 600;this.vh = 380;},methods: {//缩小resize(newRect) {this.vw = newRect.width;this.vh = newRect.height;this.top = newRect.top;this.left = newRect.left;}}
}
</script><style lang="stylus" scoped>
.main {width: 100%;height: 100%;
}
</style>
这篇关于vue-drag-resize 拖拽缩放插件的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
