Vue 拖拽缩放组件 vue-drag-resize属性

1、插件安装

 cnpm install --save vue-drag-resize

2、main.js全局引用

 import VueDragResize from 'vue-drag-resize'
 Vue.component('vue-drag-resize', VueDragResize) 

3、.vue页面使用

<template>
    <div>

        <div class="manbox">
            <vue-drag-resize 
               v-for="(rect, index) in rects"
                           :key="index"
                           :w="rect.width"
                           :h="rect.height"
                           :x="rect.left"
                           :y="rect.top"
                           :parentW="listWidth"
                           :parentH="listHeight"
                           :axis="rect.axis"
                           :isActive="rect.active"
                           :minw="rect.minw"
                           :minh="rect.minh"
                           :isDraggable="rect.draggable"
                           :isResizable="rect.resizable"
                           :parentLimitation="rect.parentLim"
                           :snapToGrid="rect.snapToGrid"
                           :aspectRatio="rect.aspectRatio"
                           :z="rect.zIndex"
                           :contentClass="rect.class"
                           v-on:activated="activateEv(index)"
                           v-on:deactivated="deactivateEv(index)"
                           v-on:dragging="changePosition($event, index)"
                           v-on:resizing="changeSize($event, index)"
            >
                <img src="../../img/bg_zf.png" height="100%" width="100%" />
            </vue-drag-resize>

        </div>
       
    </div>
</template>
<script>
    /*
    isActive：是否是激活状态
    isDraggable：是否等比例缩放
    isResizable ：是否允许缩放
    isDraggable：是否等比例缩放
    aspectRatio 是否等比例缩放
    parentLimitation 是否超出父级元素
    axis 允许拖拽的方向
*/
// 局部引用
    // import VueDragResize from 'vue-drag-resize';
    export default {
        name: 'printDesign',
        components: {
            // VueDragResize
        },
        data() {
            return {
                 listWidth: 0,
                listHeight: 0,
                rects: [{
                        'width': 200,
                        'height': 150,
                        'top': 10,
                        'left': 10,
                        'draggable': true,
                        'resizable': true,
                        'minw': 100,
                        'minh': 100,
                        'axis': 'both',
                        'parentLim': true,
                        'snapToGrid': false,
                        'aspectRatio': false,
                        'zIndex': 1,
                        'color': '#EF9A9A',
                        'active': false
                    },
                    
                ]
            }
        },
        methods: {
            activateEv(index) {
                console.log(index)
                // this.$store.dispatch('rect/setActive', {id: index});
            },
            // 当前缩放的元素索引
            deactivateEv(index) {
                console.log(index)

                // this.$store.dispatch('rect/unsetActive', {id: index});
            },
            
            // 拖动的位置
            changePosition(newRect, index) {
                console.log(newRect,index)
                // this.$store.dispatch('rect/setTop', {id: index, top: newRect.top});
                // this.$store.dispatch('rect/setLeft', {id: index, left: newRect.left});
                // this.$store.dispatch('rect/setWidth', {id: index, width: newRect.width});
                // this.$store.dispatch('rect/setHeight', {id: index, height: newRect.height});
            },
            // 改变拉伸的大小
            changeSize(newRect, index) {
                  console.log(newRect,index)
                // this.$store.dispatch('rect/setTop', {id: index, top: newRect.top});
                // this.$store.dispatch('rect/setLeft', {id: index, left: newRect.left});
                // this.$store.dispatch('rect/setWidth', {id: index, width: newRect.width});
                // this.$store.dispatch('rect/setHeight', {id: index, height: newRect.height});
            }
        }
    }
</script>
<style lang="less" scoped>
    .vdr.active:before {
        outline: none
    }

    .manbox {
        width: 400px;
        height: 300px;
        border: 1px solid red;
        position: relative;
    }

</style>

属性

isActive 是否激活状态

//处于激活状态的组件才能进行拖拽与缩放等操作，状态呈现激活状态
Type: Boolean || Required: false || Default: false

isDraggable 是否允许拖拽

Type: Boolean || Required: false || Default: true

isResizable 是否允许缩放

Type: Boolean || Required: false || Default: true

w 组件宽度

Type: Number || Required: false || Default: 200

h 组件高度

Type: Number || Required: false || Default: 200

minw 最小宽度

//注意，不能设置为0，因为这个组件里面属性要求大于0
Type: Number || Required: false || Default: 50

minh 最小高度

//注意，不能设置为0，因为这个组件里面属性要求大于0
Type: Number || Required: false || Default: 50

x 定位left

Type: Number || Required: false || Default: 0

y 定位top

Type: Number || Required: false || Default: 0

z 层级

//注意在元素激活的时候，z会被设置为最高的，所以在管理z的时候要注意
Type: Number || Required: false || Default: auto

sticks 元素缩放的节点定义

Type: Array || Required: false || Default: ['tl', 'tm', 'tr', 'mr', 'br', 'bm', 'bl', 'ml']
tl - Top left
tm - Top middle
tr - Top right
mr - Middle right
br - Bottom right
bm - Bottom middle
bl - Bottom left
ml - Middle left

preventActiveBehavior 单击组件外区域来禁止组件行为

//设置这个属性true，就可以解决在其他区域操作返回到组件区域的时候，不需要再次点击就激活组件
Type: Boolean || Required: false || Default: false

parentLimitation 是否超出父级元素

Type: Boolean || Required: false || Default: false
//设置为true，则限制操作组件不能超出父级元素

parentW 父级宽度

Type: Number || Required: false || Default: 0
//该值限制了元素可以拖动的水平最大宽度，前提是parentLimitation=true

parentH 父级高度

Type: Number || Required: false || Default: 0
//该值限制了元素可以拖动的水平最大高度，前提是parentLimitation=true

parentScaleX

Type: Number || Required: false || Default: 1

parentScaleY

Type: Number || Required: false || Default: 1

axis 允许拖拽的方向，

//取值可以为x、 y、 both、none
Type: String || Required: false || Default: both

dragHandle 定义拖拽时的classname

Type: String || Required: false

dragCancel 定义取消拖拽时的classname

Type: String || Required: false

事件

clicked 组件点击事件

Required: false || Parameters: 组件实例

activated 点击组件外事件

Required: false || Parameters: 无

resizing 缩放时事件

Required: false || Parameters: object
{
    left: Number, //the X position of the component
    top: Number, //the Y position of the component
    width: Number, //the width of the component
    height: Number //the height of the component
}

resizestop 缩放结束

//object 同resizing的object
Required: false || Parameters: object

dragging 拖拽时事件

//object 同resizing的object
Required: false || Parameters: object

dragstop 拖拽结束事件

Required: false || Parameters: object

object 同resizing的object

issues
在拖拽元素里面添加input等类似的表单性元素，无法正常点击操作，特别是focus无法做到，click也是经常失效

//vue-drag-resize 的设计问题，在元素内部只能触发本元素，如果是有表单元素，只能被动的触发；解决：
 <vue-drag-resize @activated="activateEv(index)" />
 activateEv(index) {
    console.log('activateEv' + index);
    this.$refs['drag-input'].focus();
  }

怎么修改使点击组件外面后，不需要点击组件才能进行？

:preventActiveBehavior="true" 设置这个属性，禁用点击组件外事件