vue-drag-resize 拖拽缩放插件

本文主要是介绍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 拖拽缩放插件的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---