Vue自定义指令实战

Vue自定义指令

在现有内置指令的基础上，仍然需要对普通DOM元素进行底层操作，这时候就会用到自定义指令。

自定义指令的钩子函数之间如果想传递参数，可以在 el 当前demo对象中增加自定义属性。

v-el-drag-dialog 弹窗拖拽指令

bind钩子函数触发时，初始化mousedown：

// dialogHeaderEl.onmousedown:
// 计算鼠标当前距离可视区距离disX，disY
const disX = e.clientX
const disY = e.clientY
// 计算当前窗口的宽高
const dragDomWidth = dragDom.offsetWidth
const dragDomheight = dragDom.offsetHeight
// 计算当前可视区的宽高
const screenWidth = document.body.clientWidth
const screenHeight = document.body.clientHeight
// 计算弹出可移动的最小距离和最大距离
const minDragDomLeft = dragDom.offsetLeft
const maxDragDomLeft = screenWidth - dragDom.offsetLeft - dragDomWidth

const minDragDomTop = dragDom.offsetTop
const maxDragDomTop = screenHeight - dragDom.offsetTop - dragDomheight
// 获取初始styL,styT
let styL = getStyle(dragDom, 'left')
let styT = getStyle(dragDom, 'top')

// onmousedown中document.onmousemove:
// 计算移动的距离(鼠标的移动距离)
let left = e.clientX - disX
let top = e.clientY - disY
// 边界处理
if (-(left) > minDragDomLeft) {
  left = -minDragDomLeft
} else if (left > maxDragDomLeft) {
  left = maxDragDomLeft
}
// 移动弹窗
dragDom.style.cssText += `;left:${left + styL}px;top:${top + styT}px;`
// 可以选择触发自定义事件
vnode.child.$emit('dragDialog')

// onmousedown中document.onmouseup:
// 事件解绑
document.onmousemove = null
document.onmouseup = null

unbind钩子函数触发时，解绑mousedown：

dialogHeaderEl.onmousedown = null

v-clickoutside 点击其他空白区域关闭下拉菜单

// bind钩子函数
function documentHandle (e) {
	var keyCode = e.keyCode;
    // 支持按下esc键（可选）
	if (binding.modifiers.esc) {
        if (keyCode === 27 && binding.expression) {
          binding.value(e);
        }
	}
	if (keyCode) return false;
	if (el.contains(e.target)) {
		return false;
	}
	if(binding.expression) {
		binding.value(e)
	}
}

el.__vueClickOutside__ = documentHandle;
document.addEventListener('click', el.__vueClickOutside__);
document.addEventListener('keyup', el.__vueClickOutside__);
// unbind钩子函数
document.removeEventLister('click', el.__vueClickOutside__);
delete el.__vueclickOutside__;
// 实例用法
<div v-clickoutside.esc="handleClose"></div>
<div v-clickoutside="handleClose"></div>

handleClose: function() {
	this.show = false;
}