美文网首页
vue 使用拖拽拉伸组件vue-drag-resize

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

作者: IssunRadiance | 来源:发表于2022-02-11 11:47 被阅读0次

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

相关文章

网友评论

      本文标题:vue 使用拖拽拉伸组件vue-drag-resize

      本文链接:https://www.haomeiwen.com/subject/appakrtx.html