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