当前位置：首页 > VUE

vue实现密码框显示

2026-01-23 04:40:15VUE

实现密码框显示与隐藏功能

在Vue中实现密码框的显示与隐藏功能，可以通过切换输入框的type属性实现。以下是具体实现方法：

模板部分

<template>
  <div class="password-input">
    <input 
      :type="showPassword ? 'text' : 'password'" 
      v-model="password"
      placeholder="请输入密码"
    />
    <button @click="togglePassword">
      {{ showPassword ? '隐藏' : '显示' }}
    </button>
  </div>
</template>

脚本部分

<script>
export default {
  data() {
    return {
      password: '',
      showPassword: false
    }
  },
  methods: {
    togglePassword() {
      this.showPassword = !this.showPassword
    }
  }
}
</script>

添加图标代替按钮

可以使用字体图标库（如Font Awesome）来替代文字按钮：

<template>
  <div class="password-input">
    <input 
      :type="showPassword ? 'text' : 'password'" 
      v-model="password"
      placeholder="请输入密码"
    />
    <i 
      class="fas"
      :class="showPassword ? 'fa-eye-slash' : 'fa-eye'"
      @click="togglePassword"
    ></i>
  </div>
</template>

样式优化

添加基本样式提升用户体验：

<style scoped>
.password-input {
  position: relative;
  display: inline-block;
}

.password-input input {
  padding-right: 40px;
}

.password-input i {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  color: #666;
}
</style>

使用第三方组件库

如果项目中使用Element UI等组件库，可以直接使用其提供的密码输入组件：

<template>
  <el-input
    v-model="password"
    :type="showPassword ? 'text' : 'password'"
    placeholder="请输入密码"
  >
    <template #suffix>
      <i
        class="el-icon-view"
        @click="togglePassword"
      ></i>
    </template>
  </el-input>
</template>

添加密码强度验证

可以结合密码显示功能添加强度验证：

vue实现密码框显示

computed: {
  passwordStrength() {
    if (!this.password) return 0
    let strength = 0
    if (this.password.length >= 8) strength++
    if (/\d/.test(this.password)) strength++
    if (/[A-Z]/.test(this.password)) strength++
    if (/[^A-Za-z0-9]/.test(this.password)) strength++
    return strength
  }
}

<div class="strength-meter">
  <div 
    v-for="i in 4" 
    :key="i"
    :class="['strength-bar', { 'active': i <= passwordStrength }]"
  ></div>
</div>