自定义指令实现按钮加密

1. 需求描述

给按钮加一个密码保护，输入的密码正确之后才能进行下一步操作。

2. 实现思路

1. 直接在点击事件里面处理密码校验，

<!--  template -->
<el-button type="warning" @click="handlePub">发布</el-button>

//js
//发布
handlePub () {
   this.$prompt("请输入密码", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      inputPattern: /\S/,
      inputType: "password",
      inputErrorMessage: "密码不能为空"
    }).then(({ value }) => {
      //对比密码
      if(value==123456){
        // 其他操作
      }else{
         this.$message.error('密码错误')
      }
    })
}

这种处理加密的方式对原来的代码入侵比较大，且如果涉及到需要加密的按钮比较多的时候，代码复用率也很低

2. 用自定义指令实现

 <el-button type="warning" v-password="handlePub">发布</el-button>

//注册自定义指令
  directives: {
    //自定义指令
    password:{
      // 当被绑定的元素插入到 DOM 中时……
	  inserted: function(el, binding) {
	    el.addEventListener("click", e => {
	      e.preventDefault();
	         checkPassword() //校验密码
	        .then(() => {
	          binding.value();
	        })
	        .catch(() => {
	          console.log("密码错误");
	        });
	    });
	  }
    }
  }
  function checkPassword(value) {
	  return new Promise((resolve, reject) => {
	    MessageBox.prompt("请输入密码", "提示", {
	      confirmButtonText: "确定",
	      cancelButtonText: "取消",
	      inputPattern: /\S/,
	      inputType: "password",
	      inputErrorMessage: "密码不能为空"
	    }).then(({ value }) => {
	      if (value === "258369") {
	        resolve(true);
	      } else {
	        Message({
	          type: "error",
	          message: "密码错误!"
	        });
	        reject(new Error("密码错误"));
	      }
	   });
	});
}