uniapp directive 在原生 wgt 包不生效 uniapp directive 不生效

騷豬佩琦發表於2023-04-23
APP

需求

  • 根據許可權編碼禁用按鈕
  • 阻止當前 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 ，可能是我姿勢不對，沒用對吧。。

相關文章