700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > vue-drag-resize实现页面的拖拽与缩放(解决为何不能缩放

vue-drag-resize实现页面的拖拽与缩放(解决为何不能缩放

时间:2020-11-09 15:39:39

相关推荐

vue-drag-resize实现页面的拖拽与缩放(解决为何不能缩放

用法:

注意:VueDragResize的w属性和h属性必须有值

<template><!--//需要给VueDragResize套一个div--><div id="app"><!--//缩放功能主要是缩放VueDrangResize标签--><VueDragResize :isActive="true" :w="200" :h="200" v-on:resizing="resize" v-on:dragging="resize"><!-- 图片缩放 --><!--将这个div的宽高动态设置==VueDrangResize的宽高这样可实时完成缩放--><div class="box" :style="{width: + vw+ 'px',height:+vh+'px'}"><!--我这写的是本地的图片,图片可以动态获取--><img src="../assets/logo.png" style="width: 100%;height: 100%"></div></VueDragResize><div><h3>Hello World!</h3><p>{{ vw }} х {{ vh }} </p><p>{{ top }} х {{ left }}</p></div></div><!-- 为了缩放图片,所以给img标签外套一个div,动态获取宽高,宽高就是VueDragResize的宽高一样这样就可以实现缩放大小--></template><style></style><script>import VueDragResize from 'vue-drag-resize'export default {components: {VueDragResize},data () {return {vw: 0,vh: 0,top: 0,left: 0}},created () {this.vw = 200 + 'px'this.vh = 200 + 'px'},methods: {// 初始化渲染。// 缩小resize (newRect) {this.vw = newRect.widththis.vh = newRect.heightthis.top = newRect.topthis.left = newRect.left}}}</script>

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