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

科技前沿 • 2025-01-19 20:38 • 阅读 47

大家好，我是讯享网，很高兴认识大家。

前言

一般情况下，输入框的密码我们是看不到密码的，只有当我们点击查看密码的小图标时，密码才会显现出来，实现起来也非常简单，通过点击图标让 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>

讯享网

实现效果

在这里插入图片描述

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

前言

实现思路

实例代码

实现效果

相关推荐