需求

根据权限编码禁用按钮
阻止当前 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 ，可能是我姿势不对，没用对吧。。

uniapp directive 在原生 wgt 包不生效 uniapp directive 不生效的相关教程结束。