input输入框设置 type=‘pasdword‘ 禁止通过浏览器开发者工具修改 type类

页面上通过绑定ref属性来获取DOM元素

<FormItem label="密码：" prop="userPassword">
          <Input
            :type="passwordInputType"
            v-model="formData.userPassword"
            placeholder="请输入密码"
            ref="passwordInput"
          />
        </FormItem>

再data数据中默认给 passwordInputType:"password"

  data() {
    return {
      passwordInputType: "password"
    };
  },

然后自定义一个方法 checkInputType 这个方法可以直接获取到用户再控制台输入来改变type类型，这里如果直接更改这个类型默认还是 密码  password  禁止它更改类型密码明文显示

    checkInputType(e) {
      const inputElement = this.$refs.passwordInput.$el.querySelector('input');
      const observer = new MutationObserver((mutationsList) => {
        for (let mutation of mutationsList) {
          if (mutation.type === 'attributes' && mutation.attributeName === 'type') {
            console.log('Input type changed!');
            // 如果检测到 type 被修改恢复为 password
            if (inputElement.type !== 'password') {
              inputElement.type = 'password';
            }
          }
        }
      });
      observer.observe(inputElement, { attributes: true });
    },

最后一定要再mounted方法里面执行

  mounted() {
    this.checkInputType()
  },

如有更好的解决办法还请大家相互交流