Vue.js 自定义指令，实现可以拖动的悬浮框

Vue支持我们自己开发一些使用方法类似内置指令（如v-show、v-for等）的自定义指令，通常用在一些对底层DOM操作的地方。本文简单介绍一下自定义指令的基本用法，并实现一个指令v-drag实现悬浮框拖动功能。

一、基本用法

1）注册

    类似组件，指令的注册也可分为全局注册与局部注册。顾名思义，全局注册即在项目下所有Vue组件中都可使用，局部注册则只能在当前Vue组件中使用。自定义组件注册需要两个参数： 指令名、指令选项。

以一个简单的focus指令为例：

// 全局注册
Vue.directive('focus', {
  inserted: function (el) {
    el.focus()
  }
})

// 局部注册
var vm = new Vue({
  el: '#app',
  directives: {
    focus: {
      // 指令选项
      inserted: function (el) {
        el.focus()
      }
    }
  }
})

上述例子即一个自定义指令，功能在指令绑定的元素插入dom时自动获取焦点。

指令名为'focus', 指令选项为一个对象，使用方式和内置指令一样，需要加前缀'v-', 如：

<input v-focus />

接下来详述指令配置选项。

2）指令配置选项

    指令配置选项其实是一个包含几个钩子函数的对象，每一个选项都是一个钩子函数，并且都是可选的钩子， 上例focus指令的'inserted'即为一个钩子函数。可选的钩子函数如下（摘自Vue官网）：

 

• bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。

• inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。

• update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。

• componentUpdated：指令所在组件的 VNode及其子VNode全部更新后调用。

• unbind：只调用一次，指令与元素解绑时调用。

每个钩子函数都有相同的几个参数可用 (即 el、binding、vnode 和 oldVnode)，比如'focus'指令中就用到了el。它们的含义如下（摘自Vue官网）：

 

• el：指令所绑定的元素，可以用来直接操作 DOM 。
• binding：一个对象，包含以下属性：
  • name：指令名，不包括 v- 前缀。
  • value：指令的绑定值，例如：v-my-directive="1 + 1" 中，绑定值为 2。
  • oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
  • expression：字符串形式的指令表达式。例如 v-my-directive="1 + 1" 中，表达式为 "1 + 1"。
  • arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 "foo"。
  • modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }。
• vnode： Vue 编译生成的虚拟节点。
• oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。

二、实现可以拖动的悬浮框

1）实现效果（可以在这里体验）：

2）指令配置项代码大致如下：

function inserted (el, binding, vNode) {
  el.setAttribute('style', 'position: fixed; z-index: 9999')
}

function bind (el, bindding, vNode) {
  el.setAttribute('draggable', true)
  let left, top, width, height
  el._dragstart = function (event) {
    event.stopPropagation()
    left = event.clientX - el.offsetLeft
    top = event.clientY - el.offsetTop
    width = el.offsetWidth
    height = el.offsetHeight
  }
  el._checkPosition = function () { // 防止被拖出边界
    let width = el.offsetWidth
    let height = el.offsetHeight
    let left = Math.min(el.offsetLeft, document.body.clientWidth - width)
    left = Math.max(0, left)
    let top = Math.min(el.offsetTop, document.body.clientHeight - height)
    top = Math.max(0, top)
    el.style.left = left + 'px'
    el.style.top = top + 'px'
    el.style.width = width + 'px'
    el.style.height = height + 'px'
  }
  el._dragEnd = function (event) {
    event.stopPropagation()
    left = event.clientX - left
    top = event.clientY - top
    el.style.left = left + 'px'
    el.style.top = top + 'px'
    el.style.width = width + 'px'
    el.style.height = height + 'px'
    el._checkPosition()
  }
  el._documentAllowDraop = function (event) {
    event.preventDefault()
  }
  document.body.addEventListener('dragover', el._documentAllowDraop)
  el.addEventListener('dragstart', el._dragstart)
  el.addEventListener('dragend', el._dragEnd)
  window.addEventListener('resize', el._checkPosition)
}

function unbind (el, bindding, vNode) {
  document.body.removeEventListener('dragover', el._documentAllowDraop)
  el.removeEventListener('dragstart', el._dragstart)
  el.removeEventListener('dragend', el._dragEnd)
  window.removeEventListener('resize', el._checkPosition)
  delete el._documentAllowDraop
  delete el._dragstart
  delete el._dragEnd
  delete el._checkPosition
}

export default {
  bind,
  unbind,
  inserted
}

 

3）使用（需要先注册）：

 

<template>
  <div
    class="drag"
    v-drag>
    可拖动窗口
  </div>
</template>

<script>
export default {
}
</script>

<style lang="stylus" scoped>
.drag
  min-width 240px
  min-height 400px
  background #D0DEF8
  display flex
  align-items center
  justify-content center
</style