vue给input密码框设置眼睛睁开闭合对于密码显示与隐藏
思路:通过click点击改变flag的值,通过flag的值判断眼睛睁开闭合的状态且判断type为password和text两种情况。
·
1、效果
2、代码
*****
思路:通过click点击改变flag的值,通过flag的值判断眼睛睁开闭合的状态且判断type为password和text两种情况。
<template>
<div class="login-container">
<el-input
v-model="pwd"
:type="type"
class="pwd-input"
placeholder="请输入密码"
>
<i
slot="suffix"
class="icon-style"
:class="elIcon"
autocomplete="auto"
@click="flag = !flag"
/>
</el-input>
</div>
</template>
<script>
export default {
data() {
return {
flag: false
};
},
computed: {
type() {
return this.flag ? "text" : "password";
},
elIcon() {
return this.flag ? "el-icon-minus" : "el-icon-view";
}
}
};
</script>
<style>
.icon-style {
margin-top: 8px;
font-size: 18px;
}
.pwd-input {
border: 1px solid #fff;
width: 250px;
}
</style>
更多推荐
已为社区贡献14条内容
所有评论(0)