当前位置：首页 > VUE

vue实现密码明文切换

2026-02-23 20:39:14VUE

实现密码明文切换功能

在Vue中实现密码明文切换功能，可以通过动态绑定input的type属性来实现。以下是具体实现方法：

基础实现方式

创建一个数据属性控制输入框类型：

data() {
  return {
    password: '',
    showPassword: false
  }
}

模板中使用动态绑定：

vue实现密码明文切换

<input 
  :type="showPassword ? 'text' : 'password'" 
  v-model="password"
>
<button @click="showPassword = !showPassword">
  {{ showPassword ? '隐藏' : '显示' }}
</button>

使用图标切换的增强版

安装图标库（如Font Awesome）：

npm install @fortawesome/fontawesome-free

更完善的实现：

vue实现密码明文切换

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

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

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

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

.toggle-icon {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
}
</style>

使用Vue组件封装

创建可复用的密码输入组件：

// PasswordInput.vue
<template>
  <div class="password-input">
    <input
      :type="showPassword ? 'text' : 'password'"
      :value="value"
      @input="$emit('input', $event.target.value)"
      :placeholder="placeholder"
    >
    <span class="toggle-icon" @click="togglePassword">
      <i :class="showPassword ? 'far fa-eye-slash' : 'far fa-eye'"></i>
    </span>
  </div>
</template>

<script>
export default {
  props: {
    value: String,
    placeholder: {
      type: String,
      default: '请输入密码'
    }
  },
  data() {
    return {
      showPassword: false
    }
  },
  methods: {
    togglePassword() {
      this.showPassword = !this.showPassword
    }
  }
}
</script>

父组件中使用：

<password-input v-model="password"></password-input>

添加无障碍支持

为增强可访问性，可以添加ARIA属性：

<span 
  class="toggle-icon" 
  @click="togglePassword"
  :aria-label="showPassword ? '隐藏密码' : '显示密码'"
  role="button"
  tabindex="0"
  @keydown.enter="togglePassword"
>
  <i :class="showPassword ? 'far fa-eye-slash' : 'far fa-eye'"></i>
</span>

这些方法提供了从基础到进阶的密码明文切换实现，可以根据项目需求选择合适的方案。