Vue 如何在密码输入中显示字数限制？

Question

我尝试使用 show-word-limit 但它只适用于普通输入。这是我的代码：

 <el-form
      label-position="right"
      :rules="rules" 
      ref="passwordData"
      :model="passwordData"
      label-width="80px"
      style="margin-top:5px;margin-left:30px">
          <el-row>
            <el-col :span="20">
          <el-form-item  label="原密码" prop="oldPassword" >
          <el-input v-model="passwordData.oldPassword" maxlength="12" show-word-limit type="password"></el-input>
        </el-form-item>
        <el-form-item  label="新密码" prop="newPassword" >
          <el-input v-model="passwordData.newPassword" maxlength="12" show-word-limit type="password"></el-input>
        </el-form-item>
        <el-form-item  label="确认密码" prop="newPassword_confirm">
          <el-input v-model="passwordData.newPassword_confirm" maxlength="12" show-word-limit type="password"></el-input>
        </el-form-item>
        <el-button @click="submitForm('passwordData')">保存</el-button>
        <el-button @click="restorePasswordData()">返回</el-button>
        </el-col>
      </el-row>
      </el-form>

Answer 1

如docs所述，show-word-limit只能用于input:text或textarea。

如果无论如何都需要显示限制，可以尝试“自制”解决方案；但是，限制密码字段的字符数通常是一种糟糕的安全用法，因为密码越长通常越安全。

Vue 如何在密码输入中显示字数限制？

Vue How to show word limit in password input?

html

javascript

vue.js

element-ui