# :-: vue自由拖拽、缩放组件 github地址：[https://github.com/kirillmurashov/vue-drag-resize](https://links.jianshu.com/go?to=https%3A%2F%2Fgithub.com%2Fkirillmurashov%2Fvue-drag-resize) 演示：http://kirillmurashov.com/vue-drag-resize/ 安装： ``` npm i -s vue-drag-resize ``` 使用： ``` <template> <div> <VueDragResize :isActive="true" :isResizable="false" > <img src="@/assets/logo/logo_lv.png" v-drag height="100px" width="100px" /> </VueDragResize> </div> </template> <style> .vdr.active:before{ outline: none } </style> <script> import VueDragResize from 'vue-drag-resize' export default { name: 'vue-drag-resize 全解，vue拖拽缩放组件', components: { VueDragResize }, data () { return {} }, methods: {}, mounted () { } } </script> ``` 属性： isActive 是否激活状态 Type: Boolean || Required: false || Default: false 处于激活状态的组件才能进行拖拽与缩放等操作，状态呈现激活状态 isDraggable 是否允许拖拽 Type: Boolean || Required: false || Default: true isResizable 是否允许缩放 Type: Boolean || Required: false || Default: true aspectRatio 是否等比例缩放 Type: Boolean || Required: false || Default: false 设置为true，则会按照元素的元比例缩放。坑：定义了这个属性，发现重新设置宽高的时候出现了异常（新值比例不同于旧值），需要在重设宽高的时候把aspectRatio设置为false，再将其设置回去，才能保证新值的等比例 w 组件宽度 Type: Number || Required: false || Default: 200 h 组件高度 Type: Number || Required: false || Default: 200 minw 最小宽度 Type: Number || Required: false || Default: 50 注意，不能设置为0，因为这个组件里面属性要求大于0 minh 最小高度 Type: Number || Required: false || Default: 50 注意，不能设置为0，因为这个组件里面属性要求大于0 x 定位left Type: Number || Required: false || Default: 0 y 定位top Type: Number || Required: false || Default: 0 z 层级 Type: Number || Required: false || Default: auto 注意在元素激活的时候，z会被设置为最高的，所以在管理z的时候要注意 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 单击组件外区域来禁止组件行为 Type: Boolean || Required: false || Default: false 设置这个属性true，就可以解决在其他区域操作返回到组件区域的时候，不需要再次点击就激活组件 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 允许拖拽的方向， Type: String || Required: false || Default: both 取值可以为x、 y、 both、none 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 缩放结束 Required: false || Parameters: object object 同resizing的object dragging 拖拽时事件 Required: false || Parameters: object object 同resizing的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" 设置这个属性，禁用点击组件外事件 更新计划 设置了组件的minh与minw,使用过程后台一直报警告 minh跟minw注意临界值。默认是50，查看源码发现必须要大于0 ，不能为0，这就是大部分开发人员后台报警告的原因。当然，如果想要设置为0，可以重新定义属性校验规则 多个拖拽元素，之前如何做到互斥？看github上的例子是互斥的，实际用起来发现经常性的无法互斥[摊手] 最佳的解决方案是使用数据去管理这些互斥的元素，可以在父级设置数据管理，或者引入vuex进行数据管理。关键点在点击，拖拽，失焦的时候，做到对数据的精确管理 如何管理多个拖拽元素之间的zIndex？ 这是必定会遇到并且无法逃避的一个问题，操作上需要保持当前激活的组件是最上层，但是在总体上，又要确保其图层管理的初始。维护zIndex，并且注意在删除与置换层级的时候对应的数据修改。如果被激活，就设定为一个最大的值，失去激活状态，要恢复到初始值。 这个组件使用简单，清楚明了，我自己在用的时候，就是上手很快，但是要如何良好的应用它，以及处理一些异常的情况下，还是有很多的坑。基于这个组件，我实现了一个编辑器的平台，后续会更新这个组件更实用的一些应用实例，以及如何与vuex结合，实现一个基础的h5编辑器平台。再结合一些设置与多媒体的处理，即可以实现诸如易企秀、Maka等这种h5定制化平台。一步一步总可以实现的