Vue自定义指令实现按钮权限以及详情弹框是否可编辑

33_ws
53 阅读3分钟

一、Vue自定义指令实现按钮权限（显示/隐藏）

  1. 在目录中新建自定义指令文件夹 directions 和有权限的角色数组文件 permission-role-ids,js image.png

  2. 在 src\directions\permission\index.js 中引入 permission-role-ids.js 里面有权限的角色标识数组并判断是否存在权限 image.png

  3. 在目录 src\directives\index.js 文件下引入自定义指令 image.png

  4. 在目录src\main.ts文件引入该指令文件,并全局注册该指令 image.png

  5. 在页面中应用

      <el-button type="info" size="small" v-permission>操作</el-button>

二、利用自定义指令和作用域插槽实现弹框保存按钮（显示/隐藏）权限以及列表详情弹框是否可编辑权限

  1. 子组件中有个插槽slot通过v-bind绑定了一个值isReadOnly

    <template>
  <el-dialog ...>
    ...
    <solt :isReadOnly="isReadOnly" />
    ...
    <el-button v-permission="{ changeReadOnly: changeReadOnly }" ...>操作</el-button>
  </el-dialog>
</template>

<script>
  data() {
    return {
      isReadOnly: false,
      ...
    }
  }

  methods: {
    changeReadOnly(permission) {
      this.isReadOnly = permission;
    }
  }
</script>

  2. 在父组件中引用了子组件detail-dialog，detail-dialog标签里面使用了作用域插槽，此时slot-scope就是一个对象，这个对象是由子组件的插槽slot所绑定的值所组成的一个对象，比如在这里slot-scope={ isReadOnly }，这里的isReadOnly来自子组件

    <template>
  <detail-dialog ...>
    ...
    <el-form
      solt-scope="{ isReadOnly }"
      :disabled="isReadOnly">
      ...
    </el-form>
    ...
  </detail-dialog>
</template>

  3. 在自定义指令中添加该行

    • 此时binding绑定的value为函数changeReadOnly

    image.png

补充：自定义指令

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

除了 el 之外，其它参数都应该是只读的，切勿进行修改。如果需要在钩子之间共享数据，建议通过元素的dataset来进行。

avatar
文章
阅读
粉丝