vue 设置 input为密码的属性,并带眼睛的图标,点击图标密码可见
时间: 2023-06-02 20:02:54 浏览: 60
可以使用 Vue 的组件和指令来实现这个功能。以下是一个示例代码:
```
<template>
<div>
<label for="password">密码:</label>
<div class="input-wrapper">
<input type="password" id="password" v-model="password" :class="{'show-password': showPassword}">
<i class="icon" :class="{'fa-eye': !showPassword, 'fa-eye-slash': showPassword}" @click="togglePassword"></i>
</div>
</div>
</template>
<script>
export default {
data() {
return {
password: '',
showPassword: false
}
},
methods: {
togglePassword() {
this.showPassword = !this.showPassword;
}
}
}
</script>
<style scoped>
.input-wrapper {
position: relative;
display: inline-block;
}
.icon {
position: absolute;
top: 50%;
right: 10px;
transform: translateY(-50%);
cursor: pointer;
}
.show-password {
-webkit-text-security: none;
text-security: none;
}
</style>
```
这个示例使用了 Font Awesome 图标库中的“眼睛”和“眼睛斜杠”图标。点击图标时,调用 `togglePassword` 方法切换密码可见性。在样式中,使用了 `text-security` 属性来设置密码的显示方式。`-webkit-text-security` 是为了兼容 Safari 浏览器。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.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)