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>