需求
- 根據權限編碼禁用按鈕
- 阻止當前 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 =https://www.cnblogs.com/PeiQi1229/archive/2023/04/23/=="" ||
(value instanceof Array && value.length === 0) ||
!value
) {
return true;
}
const _value = https://www.cnblogs.com/PeiQi1229/archive/2023/04/23/[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 ，可能是我姿勢不對，沒用對吧，，
當下敲的每一個字母，都將再未來的某天回報于自己~轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/550975.html
標籤：其他
上一篇：js實作防抖(debounce)與節流(throttle)
下一篇：返回列表