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

刺骨的言语ヽ痛彻心扉 2022-05-21 05:59 582阅读 0赞

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-', 如：

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

2）指令配置选项

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

*  `bind`：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
 *  `inserted`：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
 *  `update`：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前**。**指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。
 *  `componentUpdated`：指令所在组件的 VNode及其子VNode全部更新后调用。
 *  `unbind`：只调用一次，指令与元素解绑时调用。

每个钩子函数都有相同的几个参数可用 (即 `el`、`binding`、`vnode` 和 `oldVnode`)，比如'focus'指令中就用到了el。它们的含义如下（摘自[Vue官网][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）实现效果（[可以在这里体验][Link 1]）：

![70][]

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

[Vue]: http://https//cn.vuejs.org/v2/guide/custom-directive.html#ad
[Link 1]: http://wintc.top/
[70]: /images/20220521/1328dbc3600a4a9081176b1f057875db.png