如何用指令来做按钮,页面权限判断(v-permission)

183 阅读1分钟

如何用指令来做按钮,页面权限判断

 <Button
    @click="btnClickHandler('audit')"
    type="primary"
    size="small"
    v-permission="'/POST/ship/stock/outbound-order/audit/{id}'"
    >审核</Button
  >
import Vue from 'vue'
import ENV from '@/api/env'

Vue.directive('permission', {
  inserted(el, binding, vnode) {
    const { value } = binding
    const limits = JSON.parse(window.localStorage.getItem('menusList'))
    if (value) {
      const permissionUrl = value
      const hasPermission = limits?.some(limit => permissionUrl === limit)
      // console.log('%c@@@hasPermission===>', 'color:green;font-size:15px',value, hasPermission)
      if (ENV === 'test') return // 测试环境返回所有权限
      if (!hasPermission) {
        el.parentNode && el.parentNode.removeChild(el);
      }
    } else {
      // throw new Error('need limits! Like v-permission="\'url\'"')
    }
  }
})