uniapp密码框点击小眼睛实现密码的显示与隐藏代码
时间: 2023-12-09 07:03:46 浏览: 82
以下是实现密码框点击小眼睛实现密码的显示与隐藏的代码:
```html
<template>
<div>
<input type="password" :type="showPwd ? 'text' : 'password'" v-model="password">
<span class="icon" :class="{ 'icon-eye-close': !showPwd, 'icon-eye-open': showPwd }" @click="toggleShowPwd"></span>
</div>
</template>
<script>
export default {
data() {
return {
password: '',
showPwd: false
}
},
methods: {
toggleShowPwd() {
this.showPwd = !this.showPwd
}
}
}
</script>
<style>
.icon {
position: relative;
top: -25px;
right: 10px;
font-size: 18px;
cursor: pointer;
}
.icon-eye-close:before {
content: "\e6e1";
}
.icon-eye-open:before {
content: "\e6e2";
}
</style>
```
当点击小眼睛图标时,会通过 `toggleShowPwd` 方法将 `showPwd` 的值取反,然后根据 `showPwd` 的值动态修改密码框的 `type` 属性,实现密码的显示与隐藏。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)