vue拖拽缩放组件vue-drag-resize

vue-drag-resize是一个支持拖拽与缩放的vue插件，支持vue 1.x与2.x，使用方便，上手便利。

特征

1. 轻量级，无依赖性
2. 所有的操作都是可联动的
3. 支持触摸事件
4. 定义元素可拖拽，或者可缩放，或者二者兼有
5. 提供用于调整大小的操作点与操作框
6. 可以按照比例缩放或者不按照比例缩放元素
7. 可限制拖拽的最大与最小值、拖拽的范围是否超出其父元素
8. 可限制拖动的方向为垂直或水平轴

gitHib地址：
https://github.com/kirillmurashov/vue-drag-resize

用法

npm i -s vue-drag-resize

一、注册为全局组件，在vue项目中注册（在任何组件中使用的时候，不用引入直接）：

import Vue from 'vue' import VueDragResize from 'vue-drag-resize'；
Vue.component('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();
}

参考：
https://github.com/sidratariq/vue-drag-resize
https://juejin.cn/post/6844903713430061063

这篇好文章是转载于：学新通技术网