一步步教你用vue实现密码可见与不可见切换

前言

一般情况下，输入框的密码我们是看不到密码的，只有当我们点击查看密码的小图标时，密码才会显现出来，实现起来也非常简单，通过点击图标让 input 的 type 属性变化即可。但是隐藏的密码一般是 "•" 展示，那我们想要用 "*" 或者其他的符号显示该怎么办呢，今天就教大家用其他的符号代替 "•" 在密码隐藏时展示。

---

实现思路

• 在模板中：

  使用 v-if 指令来判断 codeType 的值是否为 1，如果是 1，则显示密钥内容 privates，否则显示星号字符串 star；
  使用 v-else 指令来处理 codeType 不为 1 时的情况；
  使用 <img> 标签作为切换显示/隐藏图标，并通过 @click 事件监听点击事件，调用 toggleCodeType 方法；

• 在 data 中：

  定义了 privates 变量，用于存储密钥内容，codeType 变量，用于控制密钥的显示和隐藏，star 变量，用于存储星号字符串，revealIcon 和 concealIcon 变量，分别存储显示和隐藏图标的 URL；

• 在 mounted 钩子函数中：

  将 privates 字符串转换为星号字符串，通过 split 方法将字符串拆分为字符数组，然后使用 map 方法将每个字符替换为星号，最后使用 join 方法将字符数组转换回字符串，并将结果赋值给 star 变量；

• 在 methods 方法中：

  定义了 toggleCodeType 方法，用于切换 codeType 的值。如果 codeType 为 1，则将其设置为 0，否则将其设置为 1；

• 在 style 中：

  定义了 .private 类的样式，用于设置显示密钥内容的容器的样式。.private img 类用于设置切换图标的样式，.special 类用于设置星号字符串的样式。

---

实例代码

<template>
  <div class="private">
    <!-- 显示密钥内容 -->
    <span v-if="codeType === 1">{{ privates }}</span>
    <!-- 显示星号 -->
    <span class="special" v-else>{{ star }}</span>
    <!-- 切换显示/隐藏图标 -->
    <span>
      <img @click="toggleCodeType" :src="codeType === 1 ? revealIcon : concealIcon" />
    </span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      privates: "dhwiglfliagw5f34a1w3w54f", // 密钥内容
      codeType: 0, // 控制密钥显示隐藏，等于1时显示，等于0时隐藏
      star: "", // 星号字符串
      revealIcon: "https://s4.ax1x.com/2022/01/07/79E7dg.png", // 显示图标
      concealIcon: "https://s4.ax1x.com/2022/01/07/79EOWn.png", // 隐藏图标
    };
  },
  mounted() {
    // 生成星号字符串
    this.star = this.privates
      .split("")
      .map(() => "*")
      .join("");
  },
  methods: {
    // 切换显示/隐藏密钥内容
    toggleCodeType() {
      this.codeType = this.codeType === 1 ? 0 : 1;
    },
  },
};
</script>

<style scoped>
.private {
  display: flex;
  align-items: center;
}

.private img {
  width: 20px;
  height: 20px;
  vertical-align: middle;
  cursor: pointer;
  margin-left: 9px;
}

.special {
  position: relative;
  top: 4px;
}
</style>

---

实现效果