el-input 密码输入框显示隐藏优化

是菜菜的小前端啊

已于 2022-11-01 20:23:44 修改

阅读量2.2k

点赞数

分类专栏： vue css 文章标签：前端 css

于 2022-11-01 20:23:13 首次发布

本文链接：https://blog.csdn.net/yyuea/article/details/127640177

版权

vue 同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

css

1 篇文章 0 订阅

订阅专栏

由于网站整体用的是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;
  }