阻止浏览器记住密码功能实现

浏览器自动填充密码是很方便的， 但是在部分业务场景下，我们需要屏蔽浏览器的这一功能。
在网上看了很多博客，给的方案都是设置autocomplete="off"，不好用，经过多次尝试，下边这种方法是可以用的：
将密码输入框的类型设置为text
重写样式 .no-autofill-pwd

<template>
  <div class="loginBox">
    <div class="loginFormHeader">
      用户登录
    </div>
    <el-form ref="ruleFormRef" :model="loginForm" label-width="0" size="large">
      <el-form-item prop="loginName">
        <el-input v-model="loginForm.loginName" placeholder="请输入您的用户名"></el-input>
      </el-form-item>
      <el-form-item prop="loginPwd">
        <el-input v-model="loginForm.loginPwd" type="text" class="no-autofill-pwd" placeholder="请输入您的密码"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="userLogin(ruleFormRef)">
          登 录
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script setup lang="ts">
  ...
</script>
<style lang="scss">
 .no-autofill-pwd { 
   :deep .el-input__inner { 
     -webkit-text-security: disc !important; 
   }
 }
</style>