700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > vue-drag-resize 拖拽缩放插件

vue-drag-resize 拖拽缩放插件

时间:2020-11-02 11:59:31

相关推荐

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>

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。