input密码输入框禁止填充禁止出现历史记录下拉框

需求

1. 注册页面 密码输入框不能自动回填
2. 注册页面不能出现历史下拉框

问题

1. type==password 时输入密码时才会出现*号,这就导致肯定会回填,回填影响背景样式,
2. type==password时必然会出现历史下拉框

解决

1. autocomplete=“new-password” 禁止回填
2. 密码框同时去掉历史下拉框又要满足输入密码时时*号

• 思路

1. type不等于password
2.通过样式达到输入框输入的时候显示的时候显示*号 并且动态切换是否显示密码 

• 完整代码

//class等于password  不用管  show 只是我用于动态切换是否显示密码的
      <el-input
                class="password"
                :class="show ? '' : 'displayPass'"
                placeholder="请输入6-16位密码"
                v-model.trim="ruleForm.password"
                maxlength="16"
                type="text"
                autocomplete="new-password"
              >

• css

  .displayPass {
    text-security: disc;
    -webkit-text-security: disc;
  }