elementui密码

Element UI 密码输入框

Element UI 提供了 el-input 组件用于密码输入，通过设置 type="password" 属性即可实现密码输入框功能。密码输入框默认会隐藏输入内容，显示为圆点或星号。

基本用法

<el-input type="password" v-model="password" placeholder="请输入密码"></el-input>

显示密码切换按钮

通过添加 show-password 属性，可以为密码输入框添加一个切换按钮，用于显示或隐藏密码。

<el-input type="password" v-model="password" show-password placeholder="请输入密码"></el-input>

自定义密码输入框样式

可以通过 class 或内联样式自定义密码输入框的外观。

<el-input 
  type="password" 
  v-model="password" 
  show-password 
  placeholder="请输入密码"
  style="width: 300px"
></el-input>

密码输入框验证

结合 Element UI 的表单验证功能，可以对密码输入进行校验。

<el-form :model="form" :rules="rules" ref="form">
  <el-form-item label="密码" prop="password">
    <el-input type="password" v-model="form.password" show-password></el-input>
  </el-form-item>
</el-form>

<script>
export default {
  data() {
    return {
      form: {
        password: ''
      },
      rules: {
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 20, message: '密码长度在 6 到 20 个字符', trigger: 'blur' }
        ]
      }
    }
  }
}
</script>

密码强度提示

可以通过自定义内容在密码输入框下方添加密码强度提示。

<el-input type="password" v-model="password" show-password placeholder="请输入密码"></el-input>
<div v-if="password" :style="{ color: getPasswordStrengthColor() }">
  {{ getPasswordStrength() }}
</div>

<script>
export default {
  data() {
    return {
      password: ''
    }
  },
  methods: {
    getPasswordStrength() {
      if (this.password.length < 6) return '弱'
      if (this.password.length < 10) return '中'
      return '强'
    },
    getPasswordStrengthColor() {
      if (this.password.length < 6) return 'red'
      if (this.password.length < 10) return 'orange'
      return 'green'
    }
  }
}
</script>

禁用状态

通过设置 disabled 属性可以禁用密码输入框。

<el-input type="password" v-model="password" disabled placeholder="请输入密码"></el-input>