1500字范文,内容丰富有趣,写作好帮手!
1500字范文 > vue给input密码框设置眼睛睁开闭合对于密码显示与隐藏

vue给input密码框设置眼睛睁开闭合对于密码显示与隐藏

时间:2020-01-02 08:23:07

相关推荐

vue给input密码框设置眼睛睁开闭合对于密码显示与隐藏

1、效果

2、代码

*****

思路:通过click点击改变flag的值,通过flag的值判断眼睛睁开闭合的状态且判断type为password和text两种情况。

<template><div class="login-container"><el-inputv-model="pwd":type="type"class="pwd-input"placeholder="请输入密码"><islot="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>

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。