一、前言
项目需求,在网上找到一个好用的插件。
中文详解:链接
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>