基于mutationObserve的自定义指令以监听用户使用f12修改dom

昨天写了功能后，就又封了一个指令，可以直接应用于ui框架的input组件上

贴贴：

preventChange/index.js 
export const preventChange = {
  inserted(el, binding) {
    const elTag = el.tagName.toLowerCase();
    // 获取当前dom下类型为password的input标签
    const passwordInput = el.querySelector(`${elTag}  input[type="password"]`);
    // if has psdipt
    if (passwordInput) {
      const config = {
        attributes: true, // 监听到修改属性时触发
        childList: false,
        subtree: false
      };
      // 以上述配置开始观察目标节点
      const observeInstance = new MutationObserver(mutationsList => {
        for (let mutation of mutationsList) {
          if (mutation.type === "attributes") {
            passwordInput.type = "password";
            // 停止监听，一定要有这一步，否则页面将直接卡死！
            observeInstance.disconnect();
            // 随即重新监听
            observeInstance.observe(passwordInput, config);
          }
        }
      });
      observeInstance.observe(passwordInput, config); // 监听paswd
      passwordInput.__mutationObserver = observeInstance;
    }
  },
  unbind(el) {
    const elTag = el.tagName.toLowerCase();
    const passwordInput = el.querySelector(`${elTag}  input[type="password"]`);
    if (passwordInput) {
      const observer = passwordInput.__mutationObserver;
      if (observer) {
        //  observer.disconnect && observer.disconnect();
         delete passwordInput.__mutationObserver;
      }
    }
  }
};

使用:

<el-input v-model="input" type="password" v-preventChange placeholder="请输入内容"></el-input>

其实还可以再进一步判断当前dom是不是input[type="password"]，但K桑实在是太懒了
此自定义指令作用为：屏蔽用户打开f12试图修改密码输入框以查看明文密码。 至于注册是全局还是局部，诸君请便。

以上。