使用场景

需要进行权限管理的组件或元素进行显示/隐藏和点击事件拦截

使用自定义指令与data-*

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
const rights = {}

rights.install = function(vue) {
  vue.directive('right-click', {
    inserted(el, binding, vNode) {
      /* 第一次初始化点击事件*/
      roleClickChange(el, binding, vNode)
    },
    componentUpdated(el, binding, vNode) {
      /* 数据更新后，更新点击事件，重新绑定参数（这一步操作是为了解决在调用时，传了自定义的动态参数，参数不更新问题）*/
      roleClickChange(el, binding, vNode)
    }
  })
}
const roleClickChange = (el, binding, vNode) => {
  // 获取元素上的自定义数据
  const tag = vNode.data.attrs['data-pre']
  /* 验证表达式是函数*/
  if (typeof binding.value !== 'function') {
    const compName = vNode.context.name // 获取组件名称
    // 将警告传递给控制台
    let error = `[right-click:] provided expression '${binding.expression}' is not a function`
    if (compName) {
      error += `Found in component '${compName}' `
    }
    console.error(error)
    return
  }
  /* 绑定点击事件*/
  el.onclick = function(e) {
    // 阻止冒泡处理兼容
    const evt = e || window.event
    if (evt.stopPropagation) {
      evt.stopPropagation()
    } else {
      evt.cancelBubble = true
    }

    // 判断是否传递给指令参数
    if (binding.arg === undefined) {
    	// 没有参数直接执行函数
      binding.value(true)
    } else {
      // 有参数
    }
  }
}

export { rights }
1
vue.use(rights)

使用组件

权限组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<template>
  <div v-if="isShow">
    <slot :handleClick="handleClick">
      需要处理权限的组件
    </slot>
  </div>
</template>

<script>
export default {
  name: 'Btn',
  props: {
    isShow: {
      type: Boolean,
      default: true
    }
  },
  methods: {
    handleClick() {
      console.log(11)
    }
  }
}
</script>

使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<template>
  <btn :pre="1">
    <template slot-scope="{ handleClick }">
      <div @click="handleClick(a)">
        按钮
      </div>
    </template>
  </btn>
</template>

<script>
export default {
  name: 'Index',
  methods: {
    a() {
      console.log(111)
    }
  }
}
</script>

区别 directive components
能否控制按钮的隐藏 ✅，隐藏修改el.style.display=’none’，按钮卸载使用el.remove() ✅，隐藏使用v-show，卸载使用v-if
对原来的代码的影响 小，只需要添加自定义指令和data-* 大，需要在原来的按钮之外包裹一层组价
使用场景 按钮一直显示，只对按钮的出发时间进行权限判断 会依照权限显示/隐藏按钮
优点 对原代码改动少 能在封装组件中使用其他的封装好的组件
缺点 使用弹窗或消息提示之类的组件繁琐 对原代码改动较大

最后更新： 2022年11月07日 05:14