由于网站整体用的是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;}
以上大功告成！
