Vue自定义指令去操作dom，实现权限控制

1. 创建自定义指令

要创建自定义指令，我们需要使用 Vue.directive 函数。该函数需要两个参数：指令名称和指令对象。指令对象包含指令的定义和行为。

下面是一个基本的例子：

Vue.directive('my-directive', {
  bind: function (el, binding) {
    // 在绑定时执行
  },
  inserted: function (el, binding) {
    // 在被绑定元素插入父节点时执行
  },
  update: function (el, binding) {
    // 在组件更新时执行
  },
  unbind: function (el, binding) {
    // 在解绑时执行
  }
})

在这个例子中，我们创建了一个名为 my-directive 的指令。指令对象包含了四个生命周期钩子函数：bind、inserted、update 和 unbind。这些钩子函数分别在不同的阶段执行。

• bind: 在指令绑定到元素上时执行。可以进行初始化操作，比如添加事件监听器、设置初始属性等。
• inserted: 在指令所在的元素被插入到父节点时执行。可以进行一些需要等待元素插入后才能执行的操作。
• update: 在指令所在组件的 VNode 更新时执行。可以根据数据的变化来更新指令所在元素的状态。
• unbind: 在指令从元素上解绑时执行。可以进行清理操作，比如移除事件监听器、解绑其他资源等。

2. 使用自定义指令

2.1 使用自定义指令

我们需要在 HTML 中将指令应用到元素上。我们可以使用 v- 前缀来表示指令。例如，要使用名为 my-directive 的指令，我们可以这样写：

<div v-my-directive></div>

2.2 传递参数给指令。

在指令对象中，我们可以通过 binding.value 访问到这些参数。例如，我们可以这样定义一个带有参数的指令：

Vue.directive('my-directive', {
  bind: function (el, binding) {
    // 在绑定时执行
    console.log(binding.value) // 输出 'hello'
  }
})

然后，在 HTML 中我们可以这样传递参数：

<div v-my-directive="'hello'"></div>

3. 实际例子

3.1 自定义指令实现内容转换为大写字母

假设我们有一个输入框，我们想要在用户输入时自动将输入的内容转换为大写字母。我们可以创建一个名为 uppercase 的指令来实现这个功能。

首先，我们需要在 Vue 中注册指令：

Vue.directive('uppercase', {
  bind: function (el, binding) {
    el.addEventListener('input', function () {
      binding.value = binding.value.toUpperCase()
    })
  }
})

在这个指令中，我们给输入框绑定了一个 input 事件监听器。当用户输入时，我们将输入内容转换为大写字母，并将其设置为输入框的值。

然后，在 HTML 中我们可以这样使用指令：

<input v-uppercase>

这样，当用户在输入框中输入内容时，我们的指令会自动将输入内容转换为大写字母。

3.2、我们还可以将自定义指令用着权限控制中。

如果不使用v-has自定义指令控制权限的话，我们可能会采取，每个页面调取对应的权限按钮接口，从而判断有误权限。但这样就导致我们需要n个接口和调取n次，不利于代码维护和可读性。

使用v-has自定义指令控制权限思路如下：

• 后端提供一个权限接口，一次性返回所有权限标识。数据结构如下图：

• 在代码中直接使用v-has：

<button v-has="902320300">添加</button>

• v-has自定义指令具体实现代码如下：

import Vue from 'vue';

// btns,权限列表{codeid:{},codeid2:{}}
export default (btns) => {
  // 根据code获取权限信息
  const getPower = Vue.prototype.$power = function(powerCode) {
    return btns[powerCode];
  };

  // 验证按钮权限，无权限时按钮被删除
  Vue.directive('has', {
    inserted: function(el, binding, vnode) {
      const powerCode = binding.value;
      // 获取页面按钮权限
      if (!getPower(powerCode)) {
        el.remove(); // 去除无权限按钮
      }
    },
  });
  // 当没有权限的时候显示当前内容，与有权限的操作互斥，渲染不同元素
  Vue.directive('without-permission', {
    inserted: function(el, binding, vnode) {
      const powerCode = binding.value;
      if (getPower(powerCode)) {
        el.remove();
      }
    },
  });
}