学生个性化成长平台搭建随笔记

1.Vue的自定义指令

在 Vue.js 中，我们可以通过 Vue.directive() 方法来定义自定义指令。具体来说，我们需要传递两个参数：

1. 指令名称：表示我们要定义的指令名称，可以是一个字符串值，例如：'has-role'。

2. 钩子函数对象：表示包含了一组钩子函数的对象，用于定义指令的行为。这些钩子函数包括：bind、inserted、update、componentUpdated 和 unbind 等。

下面是一个简单的例子，演示了如何定义一个名为 v-focus 的自定义指令：

Vue.directive('hasDwRole', {
  inserted: function (el, binding) {
    changeHasRole(el, binding)
  }
})

 上面的代码中，我们定义了一个名为 has-dw-role 的自定义指令，并在 inserted 钩子函数中实现了聚焦元素的逻辑。在使用自定义指令时，只需在需要聚焦的元素上添加 v-has-dw-role 指令即可：

  <el-menu
    :default-active="defActive"
    mode="horizontal"
    background-color="#34495e"
    text-color="#fff"
    active-text-color="#409eff"
    class="dw-menu-height dw-menu"
    router
    @select="handleSelect">
    <el-menu-item index="/dw/survey" >我的问卷</el-menu-item>
    <el-menu-item index="/dw/user" >个人中心</el-menu-item>
    <el-menu-item v-has-dw-role="'DWSURVEY_SUPER_ADMIN'" index="/dw/admin/user" >用户管理</el-menu-item>
  </el-menu>

1.1钩子函数对象

在定义自定义指令时，我们需要使用钩子函数对象来指定自定义指令的行为。这些钩子函数包括：

1. bind：只调用一次，在指令绑定到元素上时立即执行。这里可以进行一些初始设置，例如添加事件监听器等。

2. inserted：在绑定元素插入到父节点时调用（仅保证父节点存在，但不一定已被插入文档中）。这里可以进行一些操作，例如聚焦元素或者设置样式等。

3. update：在组件更新时调用，但不包括初始渲染。首次渲染时不会调用此钩子函数。这里可以对元素进行一些更新操作，例如更新绑定的值。

4. componentUpdated：在组件和子组件全部更新后调用。这里可以进行一些操作，例如更新样式或者调用第三方库等。

5. unbind：只调用一次，在指令与元素解绑时立即执行。这里可以进行一些清理操作，例如移除事件监听器等。

inserted 和 update 钩子函数分别对应了 v-show 和 v-if 指令的行为钩子函数：bind 和 unbind 钩子函数分别对应了 v-on 指令的行为钩子函数等。

需要根据实际需求和场景选择合适的钩子函数来实现自定义指令的功能。希望这能够帮助你理解自定义指令的钩子函数！

1.2使用方法

需要注意的是，每个钩子函数都会接收三个参数：

• el：指令所绑定的元素，可以用来直接操作 DOM。
• binding：一个对象，包含了指令的信息。
• vnode：Vue 编译生成的虚拟节点。

function changeHasRole (el, binding) {
  if (!roleCheck(binding.value)) {
    el.parentNode.removeChild(el)
  }
  function roleCheck (value) {
    const authority = DwAuthorized.getAuthority()
    for (let i=0; i<authority.length; i++) {
      if (value === authority[i]) {
        return true
      }
    }
    return false
  }
}
Vue.directive('hasDwRole', {
  inserted: function (el, binding) {
    changeHasRole(el, binding)
  }
})