昨天写了功能后，就又封了一个指令，可以直接应用于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试图修改密码输入框以查看明文密码。至于注册是全局还是局部，诸君请便。
以上。