Vue How to show word limit in password input?

620 Views Asked by At

I tried to use show-word-limit but it just works on common input. Here is my code:

 <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>
1

There are 1 best solutions below

0
On BEST ANSWER

As said in the docs, the show-word-limit can only be used on input:text or textarea.

If you need to display the limit anyway, you can try an "homemade" solution; however, it is generally a bad security usage to limit the number of characters for a password field, because the longer the password generally the safer.