由于网站整体用的是elementui样式,但是在使用过程发现,type为password类型的输入框,若使用show-password参数虽然可以做到点击一下隐藏再点击一下显示的效果,但是页面的交互显示的一直都是这个样子的:小图标,显然我们想要的是可以“睁眼”和“闭眼”的小图标,SO就需要我们DIY一下子了。
准备图标
首先我们需要找到两个心仪的小图标:
``
创建div
<el-input id="passwordinput" :type="pwdType" autocomplete="off" v-model="password" placeholder="请输入密码"></el-input><img :src="seen?openeye:offeye" @click="changeye()" class="eye">
设置样式
.eye{width: 18px;height: 20px;position: absolute;left: 93%;top: 42%;}
定义数据
data () {return {`seen: '',pwdType: 'password', openeye: require('../../static/assets/images/icons/openeye.jpg'),offeye: require('../../static/assets/images/icons/offeye.jpg'),password: null}}``
定义函数
changeye () {this.pwdType = this.pwdType === 'password' ? 'text' : 'password'this.seen = !this.seen}
兼容问题
你以为到这里就到这里就大功告成了嘛,nonono当你使用Microsoft Edge查看的时候会发现,这个浏览器竟然自己带隐藏和显示的小图标,我们需要把自带的图标隐藏掉以解决兼容性的问题
//注:要放到<style>中,而不是<style scoped>中!#passwordinput::-ms-reveal{display: none;}#passwordinput::-ms-clear{display: none;}#passwordinput::-o-clear{display: none;}
以上大功告成!
如果觉得《el-input 密码输入框 显示隐藏优化》对你有帮助,请点赞、收藏,并留下你的观点哦!