Vue 自定义指令

塞尔达是最好玩的游戏~

一、自定义指令示例

Vue的强大就是在于 双向绑定机制、完善的组件库、便捷的指令系统

除了自带的 V-model、V-if、V-for 等模板指令，Vue 也提供了自定义指令的方法，这里我们先实现一个简洁的自定义指令示例

目的： 页面加载完成后，输入框自动获得焦点

思路： 当页面加载完成后，获取当前的 input ，调用 Input Events 方法

语法：

// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
  // 获取 DOM 元素
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})

<input v-focus>

二、Vue.directive

1. 函数钩子

// 注册
Vue.directive('name', {
  bind: function () {},
  inserted: function () {},
  update: function () {},
  componentUpdated: function () {},
  unbind: function () {}
})

// 注册 (指令函数)
Vue.directive('name', function () {
  // 这里将会被 `bind` 和 `update` 调用
})

// getter，返回已注册的指令
var myDirective = Vue.directive('name')

• bind： 只调用一次，指令第一次绑定到元素时调用
• inserted： 被绑定元素插入父节点时调用
• update： 所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。可以通过比较更新前后的值来忽略不必要的模板更新
• componentUpdated： 指令所在组件的 VNode 及其子 VNode 全部更新后调用
• unbind： 只调用一次，指令与元素解绑时调用

2. 函数钩子的参数

Vue.directive('demo', {
  bind: function (el, binding, vnode, oldVnode) {
    var s = JSON.stringify
    el.innerHTML =
      'name: '       + s(binding.name) + '<br>' +
      'value: '      + s(binding.value) + '<br>' +
      'expression: ' + s(binding.expression) + '<br>' +
      'argument: '   + s(binding.arg) + '<br>' +
      'modifiers: '  + s(binding.modifiers) + '<br>' +
      'vnode keys: ' + Object.keys(vnode).join(', ')
  }
})

new Vue({
  el: '#hook-arguments-example',
  data: {
    message: 'hello!'
  }
})

• el： 指令所绑定的元素，可以用来直接操作 DOM。
• binding： 一个对象，包含以下 property：
  • 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 钩子中可用

3. 动态指令参数

效果： 实现一个吸顶效果，方向和距离动态设置

<div id="dynamicexample">
  <h3>Scroll down inside this section ↓</h3>
  <p v-pin:[direction]="200">I am pinned onto the page at 200px to the left.</p>
</div>

Vue.directive('pin', {
  bind: function (el, binding, vnode) {
    el.style.position = 'fixed'
    var s = (binding.arg == 'left' ? 'left' : 'top')
    el.style[s] = binding.value + 'px'
  }
})

new Vue({
  el: '#dynamicexample',
  data: function () {
    return {
      direction: 'left'
    }
  }
})

4. 函数简写

在很多时候，需要在 bind 和 update 时触发相同行为，而不关心其它的钩子

Vue.directive('color-swatch', function (el, binding) {
  el.style.backgroundColor = binding.value
})

5. 对象字面量

如果指令需要多个值，可以传入一个 JavaScript 对象字面量

<div v-demo="{ color: 'white', text: 'hello!' }"></div>

Vue.directive('demo', function (el, binding) {
  console.log(binding.value.color) // => "white"
  console.log(binding.value.text)  // => "hello!"
})

三、自定义指令库

1. 拖拽弹窗

// v-dialogDrag: 弹窗拖拽
Vue.directive('dialogDrag', {
        bind(el, binding, vnode, oldVnode) {
            const dialogHeaderEl = el.querySelector('.el-dialog__header')
            const dragDom = el.querySelector('.el-dialog')
            dialogHeaderEl.style.cursor = 'move'
            // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
            const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null)
            dialogHeaderEl.onmousedown = (e) => {
                // 鼠标按下，计算当前元素距离可视区的距离
                const disX = e.clientX - dialogHeaderEl.offsetLeft
                const disY = e.clientY - dialogHeaderEl.offsetTop
                // 获取到的值带px 正则匹配替换
                let styL, styT
                // 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px
                if (sty.left.includes('%')) {
                    styL = +document.body.clientWidth * (+sty.left.replace(/\%/g, '') / 100)
                    styT = +document.body.clientHeight * (+sty.top.replace(/\%/g, '') / 100)
                } else {
                    styL = +sty.left.replace(/\px/g, '')
                    styT = +sty.top.replace(/\px/g, '')
                }
                document.onmousemove = function(e) {
                    // 通过事件委托，计算移动的距离
                    const l = e.clientX - disX
                    const t = e.clientY - disY
                    // 移动当前元素
                    dragDom.style.left = `${l + styL}px`
                    dragDom.style.top = `${t + styT}px`
                    // 将此时的位置传出去
                    // binding.value({x:e.pageX,y:e.pageY})
                }
                document.onmouseup = function(e) {
                    document.onmousemove = null
                    document.onmouseup = null
                }
            }
        }
})

2.

---

未完待续…