vue2基础-自定义指令v-focus、v-pin 指令动态传参

指令是什么

在vue中以v-开头的行内属性，都是指令。如我们常见的v-model、v-on、v-show都是指令。指令的职责是，当指令中的表达式的值改变时，将响应式地作用于 DOM。

<p v-if="seen">现在你看到我了</p>

这里，v-if指令将根据表达式seen 的值的真假来插入/移除 <p>元素。

既然指令的职责可以实现响应式，那vue默认提供的几个肯定是不够用的，所以vue也提供了注册自定义指令功能。

什么使用自定义指令

上文也说到指令可以实现数据响应式功能。

那么我们如何实现呢？

如何自定义指令

可分为全局定义和局部定义

全局定义

在directive/focus下创建

import Vue from 'vue'
// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function(el) {
    // 聚焦元素
    el.focus()
  }
})

在main.js 导入

import '@/directive/focus/index'

在组件中使用

  <input v-focus />

局部定义

组件中也接受一个 directives 的选项：

<template>
  <div>
    <input v-focus />
  </div>
</template>

<script>
export default {
  name: "CustomInstructDemo",
   directives: {
    focus: {
      // 指令的定义
      inserted: function (el) {
        el.focus();
      },
    },
  },
  data() {
    return {};
  },
 
  methods: {},
};
</script>

然后你可以在模板中的元素上使用新的 v-focus属性，如下：

<input v-focus>

钩子函数

自定义指令中的函数，一个指令定义对象可以提供如下几个钩子函数 (均为可选)：

• bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
• inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
• update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。
• componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。
• unbind：只调用一次，指令与元素解绑时调用。

钩子函数参数

指令钩子函数会被传入以下参数：

• el：指令所绑定的元素，可以用来直接操作 DOM。
• binding：一个对象，包含以下 property：
  • name：指令名，不包括 v- 前缀。
  • value：指令的绑定值。(常用)
  • oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
  • expression：字符串形式的指令表达式。
  • arg：传给指令的参数，可选。
  • modifiers：一个包含修饰符的对象。
  • vnode：Vue 编译生成的虚拟节点。
  • oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。

指令动态参数

通过上面的钩子函数参数，我们知道binding就是外部输入的参数对象，我们可以从binding中渠道参数，然后再去做匹配，实现动态参数的效果。

import Vue from 'vue'
Vue.directive('pin', {
  bind: function(el, binding, vnode) {
    el.style.position = 'fixed'
    const s = (binding.arg === 'right' ? 'right' : 'top')
    el.style[s] = binding.value + 'px'
    el.style.color = '#333'
  }
})

在main.js中引入

import '@/directive/pin/index'

在组件中使用

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

 data() {
    return {
      direction: 'right',
    }
  },

效果示例

示例

在线示例