自定义的指令功能:根据传参判断是否显隐功能按钮
utils/directives/auth.js
判断方法自己去实现,这里就不贴代码了
import useStore from "@/store"
export default (app) => {
app.directive('auth', {
mounted(el, binding) {
hasAuth(el, binding)
}
})
}
const hasAuth = (el, binding) => {
const { user } = useStore()
const { value } = binding
if (!value) return
if (!user.hasPermission(value)) {
el.parentNode?.removeChild(el)
}
}
把指令统一导出
utils/directives/index.js
import auth from './auth'
export default (app) => {
auth(app)
}
main.js
const app = createApp(App)
import directive from "@/utils/directives"
directive(app)
使用
<el-button v-auth="'user_xxxx'">功能按钮</el-button>