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

  • uniapp directive 在原生 wgt 包不生效 uniapp directive 不生效已关闭评论
  • 113 次浏览
  • A+
所属分类:Web前端
摘要

官方 uni 文档写着支持 app 用 directive ,可能是我姿势不对,没用对吧。。


需求

  • 根据权限编码禁用按钮
  • 阻止当前 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']"
  • directivebindinserted 两个钩子尝试过,最终确定为 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 ,可能是我姿势不对,没用对吧。。