vue-drag-resize是一个支持拖拽与缩放的vue插件,支持vue 1.x与2.x,使用方便,上手便利。
特征
轻量级,无依赖性所有的操作都是可联动的支持触摸事件定义元素可拖拽,或者可缩放,或者二者兼有提供用于调整大小的操作点与操作框可以按照比例缩放或者不按照比例缩放元素可限制拖拽的最大与最小值、拖拽的范围是否超出其父元素可限制拖动的方向为垂直或水平轴gitHib地址:
/kirillmurashov/vue-drag-resize
用法
npm i -s vue-drag-resize
一、注册为全局组件,在vue项目中注册(在任何组件中使用的时候,不用引入直接):
import Vue from 'vue' import VueDragResize from 'vue-drag-resize';ponent('vue-drag-resize', VueDragResize);
<vue-drag-resize:isActive = 'true'>
二、在需要的组件中引入
<template><div id="app"><vue-drag-resize></vue-drag-resize></template><script>import VueDragResize from 'vue-drag-resize';export default {name: 'app',components: {VueDragResize},}</script>
属性
方法
例子:<vue-drag-resize @clicked="onActivated">
使用问题
怎么修改使点击组件外面后,不需要点击组件才能进行?
:preventActiveBehavior="true" 设置这个属性,禁用点击组件外事件
在拖拽元素里面添加input等类似的表单性元素,无法正常点击操作,特别是focus无法做到,click也是经常失效
原因:vue-drag-resize 的设计问题,在元素内部只能触发本元素,如果是有表单元素,只能被动的触发
解决方案:
<vue-drag-resize @activated="activateEv(index)" />activateEv(index) {console.log('activateEv' + index);this.$refs['drag-input'].focus();}
参考:
/sidratariq/vue-drag-resize
/post/6844903713430061063