- A+
所属分类：Web前端
需求
- 根据权限编码禁用按钮
- 阻止当前 dom 绑定的点击事件，禁用状态（opacity 半透明？？ 或者 display: none?? ）
尝试
- 开发环境用 Chrome 跑，一切正常，构建打包后去真机跑，按钮没控制住
- （用 HBX -发行-原生应用 app 制作 wgt 包）开发环境： HBX: 3.7.9 系统: MacOS: 13.0.1 （Intel）
- 通过
directive绑定一个v-auth指令，在标签里 v-auth="’some auth code‘" 或者 v-auth="['code1', 'code2']" - 在
directive的bind和inserted两个钩子尝试过，最终确定为el在真机环境下，与开发环境的el不是一个玩意
暂用平替方案
- 全局 mixin 一个方法，判断权限后返回以控制当前 dom 是否可点击
// path/auth.js function checkAuth(value) { if ( value === "" || (value instanceof Array && value.length === 0) || !value ) { return true; } const _value = [value].flat(); // 兼容入参为 string 和 array，拍平二维数组 const authBtns = uni.getStorageSync("authBtns"); if (authBtns === "*") return true; const hasPermission = _value.every((e) => authBtns.includes(e)); return hasPermission; } const auth = { install(Vue) { // directive 在 app 下无法正常使用 // Vue.directive("auth", { // bind(el, binding, vnode, oldVnode) { // if (!checkAuth(binding.value, el)) { // el.style.opacity = "0.3"; // el.style.pointerEvents = "none"; // } // }, // inserted(el, binding, vnode, oldVnode) { // if (!checkAuth(binding.value, el)) { // el.style.opacity = "0.3"; // el.style.pointerEvents = "none"; // } // }, // }); // 平替方案 Vue.mixin({ methods: { $auth(val) { if (!checkAuth(val)) { return [{ opacity: "0.3", pointerEvents: "none" }]; } return []; }, }, }); }, }; // path/main.js Vue.use(auth); - vue文件中
<view :style="$auth('AUTH_CODE')">没有权限 AUTH_CODE 别点我</view> <view :style="$auth(['CODE1', 'CODE2'])">没有权限 CODE1&2 别点我</view> // 多个行内 style 情况 <view :style="[...$auth('AUTH_CODE'), {color: 'green', fontSize: '22px', fontWeight: 600}]">没有权限 AUTH_CODE 别点我</view> 写在最后
官方 uni 文档写着支持 app 用 directive ，可能是我姿势不对，没用对吧。。
