Vue自定义指令使用场景

当你第一次接触vue的时候，一定会使用到其中的几个指令，比如：v-if、v-for、v-bind...这些都是vue为我们写好的，用起来相当的爽。如果有些场景不满足，需要我们自己去自定义，那要怎么办呢？下面来一步步学习如何自定义一个属于我们自己的指令。

什么是vue指令？

指令是可以写在DOM元素的小命令，他们以v-为前缀，vue就能识别这是一个指令并保持语法的一致性。如果你需要对HTML进行底层操作的话，这种方式是非常有用的。

下面介绍几种指令的使用方式及示例，用example代替了实际的指令。

v-example: 会实例化一个指令，但这个指令没有参数。如果不传参数会比较不灵活，但是这样就已经操作DOM元素的能力了。

v-example="value": 这样可以传值到指令中，指令会根据value值来操作html。

<div v-if="stateExample">stateExample为true时会显示</div>

v-example="'string'": 使用字符串作为表达式。

<p v-html="'<strong>this is an example of a string in some text<strong> '"></p>

v-example:arg="value": 这里可以传参数（arg），在下面的例子中，我们绑定一个class，然后给这个class设置样式。

<div v-bind:class="someClassObject"></div>

v-example:arg.modifier="value": 使用修饰符（modifier），下面的例子可以在click事件上调用preventDefault()。

<button v-on:submit.prevent="onSubmit"></button>

vue自定义指令的基础知识

现在对指令有了大概的了解后，我们再来学习下如何创建一个自定义指令。

钩子函数

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

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

接下来我们来看一下钩子函数的参数 (即 el、binding、vnode 和 oldVnode)。

钩子函数参数

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

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 编译生成的虚拟节点。移步 VNode API 来了解更多详情。
oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。

这是一个使用了这些属性的自定义钩子样例：

<div id="hook-arguments-example" v-demo:foo.a.b="message"></div>

Vue.directive('demo', {

  bind: function (el, binding, vnode) {

    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!'

  }

})

name: "demo"

value: "hello!"

expression: "message"

argument: "foo"

modifiers: {"a":true,"b":true}

vnode keys: tag, data, children, text, elm, ns, context, fnContext, fnOptions, fnScopeId, key, componentOptions, componentInstance, parent, raw, isStatic, isRootInsert, isComment, isCloned, isOnce, asyncFactory, asyncMeta, isAsyncPlaceholde

函数简写

在很多时候，你可能想在bind和update时触发相同行为，而不关心其它的钩子。比如这样写:

Vue.directive('color-swatch', function (el, binding) {

  el.style.backgroundColor = binding.value

})

对象字面量

如果指令需要多个值，可以传入一个 JavaScript 对象字面量。记住，指令函数能够接受所有合法的 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!"

})

更多高级用法请参考：Vue自定义指令

vue自定义指令的使用场景

在 Vue2.0 中，代码复用和抽象的主要形式是组件。然而，有的情况下，你仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。下面就来看看vue自定义指令有哪些使用场景。

自动获取焦点（官方示例）

// 注册一个全局自定义指令 `v-focus`

Vue.directive('focus', {

  // 当被绑定的元素插入到 DOM 中时……

  inserted: function (el) {

    // 聚焦元素

    el.focus()

  }

})

一键 Copy的功能

1.首先建一个 js 文件（v-copy.js）。定义一个对象。（指令实际就是一个对象）

import { Message } from 'ant-design-vue';

const vCopy = { // 名字爱取啥取啥

  /*

    bind 钩子函数，第一次绑定时调用，可以在这里做初始化设置

    el: 作用的 dom 对象

    value: 传给指令的值，也就是我们要 copy 的值

  */

  bind(el, { value }) {

    el.$value = value; // 用一个全局属性来存传进来的值，因为这个值在别的钩子函数里还会用到

    el.handler = () => {

      if (!el.$value) {

      // 值为空的时候，给出提示，我这里的提示是用的 ant-design-vue 的提示，你们随意

        Message.warning('无复制内容');

        return;

      }

      // 动态创建 textarea 标签

      const textarea = document.createElement('textarea');

      // 将该 textarea 设为 readonly 防止 iOS 下自动唤起键盘，同时将 textarea 移出可视区域

      textarea.readOnly = 'readonly';

      textarea.style.position = 'absolute';

      textarea.style.left = '-9999px';

      // 将要 copy 的值赋给 textarea 标签的 value 属性

      textarea.value = el.$value;

      // 将 textarea 插入到 body 中

      document.body.appendChild(textarea);

      // 选中值并复制

      textarea.select();

      // textarea.setSelectionRange(0, textarea.value.length);

      const result = document.execCommand('Copy');

      if (result) {

        Message.success('复制成功');

      }

      document.body.removeChild(textarea);

    };

    // 绑定点击事件，就是所谓的一键 copy 啦

    el.addEventListener('click', el.handler);

  },

  // 当传进来的值更新的时候触发

  componentUpdated(el, { value }) {

    el.$value = value;

  },

  // 指令与元素解绑的时候，移除事件绑定

  unbind(el) {

    el.removeEventListener('click', el.handler);

  },

};

export default vCopy;

2.到这里，一键 Copy 的功能就实现了，最后再说一嘴怎么将自定义指令注册到全局：再新建一个 js （ directives.js ）文件来注册所有的全局指令。

import copy from './v-copy';

// 自定义指令

const directives = {

  copy,

};

// 这种写法可以批量注册指令

export default {

  install(Vue) {

    Object.keys(directives).forEach((key) => {

      Vue.directive(key, directives[key]);

    });

  },

};

3.最后，在 main.js 中这样引入：

import Vue from 'vue';

import Directives from './directives';

Vue.use(Directives);

按钮级别权限控制

权限控制分为页面级别和按钮级别，这两种思路基本是一致的。

页面级别：用户登录后，获取用户role，将role和路由表每个页面的需要的权限作比较，生成最终用户可访问的路由表。最后通过router.addRoutes动态挂载。现在是通过获取到用户的role之后，在前端用v-if手动判断来区分不同权限对应的按钮的。。
按钮级别：用户登录后，获取用户role，在前端用 v-if 或者封装一个自定义指令，手动判断来区分不同权限对应的按钮的。

思路：

登录：当用户填写完账号和密码后向服务端验证是否正确，验证通过之后，服务端会返回一个token，拿到token之后（将token存贮到sessionStorage中，保证刷新页面后能记住用户登录状态），前端会根据token再去拉取一个 user_info 的接口来获取用户的详细信息（如用户角色，用户权限，用户名等等信息）。
权限验证：通过token获取用户对应的role，自定义指令，获取路由meta属性里btnPermissions(注：meta.btnPermissions是存放按钮权限的数组，在路由表里配置)，然后判断role是否在btnPermissions数组里，若不在即删除该按钮DOM。

下面直接看代码：

路由配置：

path: '/permission',

component: Layout,

name: '权限测试',

meta: { btnPermissions: ['admin','supper','normal'] }, //页面需要的权限

children: [

    {

        path: 'supper',

        component: _import('system/supper'),

        name: '权限测试页',

        meta: { btnPermissions: ['admin','supper'] }  //页面需要的权限

    },

    {

        path: 'normal',

        component: _import('system/normal'),

        name: '权限测试页',

        meta: { btnPermissions: ['admin'] }  //页面需要的权限

    }

]

自定义指令：

import Vue from 'vue'

/**权限指令**/

const has = Vue.directive('has', {

    bind: function (el, binding, vnode) {

        // 获取页面按钮权限

        let btnPermissionsArr = vnode.context.$route.meta.btnPermissions;

        if (!Vue.prototype.$_has(btnPermissionsArr)) {

            el.parentNode.removeChild(el);

        }

    }

});

// 权限检查方法

Vue.prototype.$_has = function (value) {

    let isExist = false;

    // 获取用户按钮权限

    let btnPermissionsStr = sessionStorage.getItem("btnPermissions");

    if (btnPermissionsStr == undefined || btnPermissionsStr == null) {

        return false;

    }

    if (value.indexOf(btnPermissionsStr) > -1) {

        isExist = true;

    }

    return isExist;

};

export {has}

然后在main.js文件引入文件：

import has from './public/js/btnPermissions.js';

页面中按钮只需加v-has即可：

<el-button @click='editClick' type="primary" v-has>编辑</el-button>

参考：手摸手，带你用vue撸后台系列二(登录权限篇)

总结

在使用Vue时，我们是推崇多使用组件方式编写代码的，不同于jQuery的是我们应该减少对 DOM元素的操作。但是，有的情况下，我们仍然需要对普通 DOM 元素进行底层操作，这时我们可以用自定义指令去封装一些通用逻辑。

秒客网