需求

• 根据权限编码禁用按钮
• 阻止当前 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);  
  /*  (他妈的 DCloud 的 md 还不支持写两段代码语法？？？ 想分开一个 js 语法一个 html 语法的代码块，发现把我 14 的``` 解析成一对语法？？23 的```直接忽略？？) */  
  // vue文件中  
  <view :style="$auth('AUTH_CODE')">没有权限 AUTH_CODE 别点我</view>  
  <view :style="$auth(['CODE1', 'CODE2'])">没有权限 CODE1&2 别点我</view>

写在最后

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