用法:
注意: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>