vue-draggable-resizable 插件使用总结

一、安装和基本用法

npm官方文档

npm install --save vue-draggable-resizable

1、全局注册组件

// main.js中写入：
import Vue from 'vue'
import VueDraggableResizable from 'vue-draggable-resizable'

// 可选择导入默认样式
import 'vue-draggable-resizable/dist/VueDraggableResizable.css'
Vue.component('vue-draggable-resizable', VueDraggableResizable)

2、局部注册：

// 在使用的组件里引用
import VueDraggableResizable from 'vue-draggable-resizable'
import 'vue-draggable-resizable/dist/VueDraggableResizable.css'

二、基于功能对插件改写

我需要实现的是这样一个画布功能，里面的筛选器，表格都看做是一个组件，每个组件都可以移动，改变大小。

查看源码发现就4个文件，由于我需要实现一些快捷键操作、以及一些多选、选中状态保持，原本的组件并不能实现这些功能，所以我直接复制这4个文件到自己的项目中进行改写。

比如下面这个就是添加鼠标的点击事件判断，和已选中时 按ctrl 再次单击时，取消选中。

elementDown (e) {
	// 鼠标左键和鼠标右键点击均选中 e.which 1 和 3 （被弃用了）, 用button代替 ，左中右为012
	if (e instanceof MouseEvent && e.button !== 0 && e.button !== 2) {
		return
	}
	// .....
	if (!this.enabled) {
		// 没选中时，点击选中
		this.enabled = true
		
		this.$emit('activated')
		this.$emit('update:active', true)
	}else{
		// 已选中时 按ctrl 再次单击时，取消选中
		if(this.$el.contains(target) && this.enabled && !this.preventDeactivation && e.ctrlKey && this.replicable){
		  this.enabled = false
		  this.$emit('deactivated')
		  this.$emit('update:active', false)
		}
	}
}

或者新增按键监听事件

	mounted() {
		addEvent(document.documentElement, 'keydown', this.handleCopy)
	}
    /**
     *  ctrl + C 复制, delete 删除
     */
    handleCopy(e){
      const code = e.keyCode
      if(!this.enabled){
        return 
      }
      if(e.ctrlKey && e.key === 'c' && this.replicable){
        this.$emit('copyed')
      }else if(e.key === 'Delete' && this.removable){
        this.$emit('delete')
      }
    },

这个插件文件比较简单，通过改写基本就能满足你所需要的功能。

三、画布可以拖动

其实这个就是外面的div可以拖动，里面div也可以拖动，就是嵌套

 <vue-draggable-resizable
	:x="x"
	:y="y"
	:w="width"
	:h="height"
	:active="true"
	:preventDeactivation="true"
	:draggable="true"
	:resizable="true">
	<div>
		<!-- 组件1 -->
		<vue-draggable-resizable
		    :x="1"
		    :y="1"
		    :w="200"
		    :h="200"
		    :active.sync="isActive"
		    :preventDeactivation="isPreventDeActive"
		>
			组件显示的内容
		</vue-draggable-resizable>
		<!-- 组件2 -->
		<vue-draggable-resizable
		    :x="1"
		    :y="1"
		    :w="200"
		    :h="200"
		    :active.sync="isActive"
		    :preventDeactivation="isPreventDeActive"
		>
			组件显示的内容
		</vue-draggable-resizable>
	</div>
</vue-draggable-resizable>
		    

在画布可拖动的情况下，内部的vue-draggable-resizable组件的parent最好设置为false，用户体验稍微好一点。
preventDeactivation 可以设置该div是否一直保持选中状态，设为true，即可一直保持选中。

四、在画布外点击，保留选中

如果想实现，在画布内点击非组件区域时，取消组件的选中；在点击画布区域外时，保留组件的选中。参考源码的实现，只要监听当前的鼠标点击事件即可，代码如下：

<div ref="draw"></div>

// addEvent 来自插件的dom.js， 可以直接用addEventListener
// 在自己写的画布组件内，监听点击事件
mounted() {
	addEvent(document.documentElement, 'mousedown', this.handleKeepActive)
}
// 不要忘记销毁
beforeDestroy() {
	removeEvent(document.documentElement, 'mousedown', this.handleKeepActive)
},

// 处理监听，在画布外需要保持选中状态
 handleKeepActive(e) {
   const target = e.target || e.srcElement
   // console.log('点击处于画布内：', this.$refs.draw.contains(target))
   if (this.$refs.draw.contains(target)) {
     this.isPreventDeActive = false
   } else {
     this.isPreventDeActive = true
   }
   return false
 },

实现效果就类似于下面这样，在点击右边的配置时，保留table的选中状态