自定义按钮指令

自定义指令实现拦截按钮重复点击

1. 组件中的html

<v-btn v-btn-control="create"></v-btn>


2. 组件中的js 方法 


create() {
  return this.axios.post(url, data)
    .then((res) => {
      if (res.data.errcode == 0) {
truetrue// success
true  } else {
        // fail
true  }
    }).catch((err) => {
       // console.log(err);
    });
}



Vue 全局指令 


// 限制按钮点击事件，在结果返回以前不能继续点击
Vue.directive("btn-control", {
    // 插入dom 时做的事情
    inserted: function(el, bind) {
        el.addEventListener("click", () => {
            el.disabled = true;
            bind.value().then(res => {
                el.disabled = false;
            });
        });
    }
});

自定义指令实现按钮级权限控制

• 最近做的一个后台系统,要求权限控制到按钮级别,也就是说对于不同的用户,可操作的按钮是不一样的,换言之,有些按钮对某些客户是不可见的.例如:用户A能看到”新增”按钮,而用户B看不到,假设”新增”按钮”的权限是”sys:add”,

  • 定义一个全局方法,配合v-if实现;

    directives 在全局main.js中注册

    /**权限指令**/
    Vue.directive('has', {
      // 获取按钮权限
      bind: function(el, binding) {
        if (!Vue.prototype.$_has(binding.value)) {
          el.parentNode.removeChild(el);
        }
      }
    });
    
    // 权限检查方法
    Vue.prototype.$_has = function(value) {
      let isExist = false;
      let buttonperms = JSON.parse(localStorage.getItem('user')).accessPage;
      if(buttonperms == undefined || buttonperms == null){
        return false;
      }
      // let buttonperms = JSON.parse(buttonpermsStr);
      for(let i=0;i<buttonperms.length;i++){
        if (buttonperms[i].indexOf(value) > -1) {
          isExist = true;
          break;
        }
      }
      return isExist;
    };
    
    /*页面中按钮只需加v-has即可*/

    ​