vue 使用拖拽拉伸组件vue-drag-resize

2022-02-11  本文已影响0人  IssunRadiance

1.安装

npm install vue-drag-resize

2.组件内使用

import VueDragResize from 'vue-drag-resize';
components: { VueDragResize }

3.使用(外层需要套一个div)

<div id="canvasMN" @click="btnSpan = false">
          <VueDragResize
            v-if="imgUrl && width>0 && height>0"
            :isActive="isActive"
            :w="width"
            :h="height"
            :aspectRatio="true"
            :sticks="['tl','tr','bl','br']"
            :minw="10"
            :minh="10"
            :x="left"
            :y="top"
            v-on:resizing="resize"
            v-on:dragging="resize"
            v-on:resizestop="stop"
            v-on:dragstop="stop"
          >
            <img :src="imgUrl" class="logoImg">
          </VueDragResize>
        </div>

[具体的相关配置可以看这里]https://blog.csdn.net/weixin_33957648/article/details/91423751

上一篇 下一篇

猜你喜欢

热点阅读