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

由于网站整体用的是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 密码输入框显示隐藏优化相关推荐

html输入密码自动隐藏,原生js实现密码输入框值的显示隐藏
本文实例为大家分享了js显示隐藏密码输入框值的具体代码,供大家参考,具体内容如下直接贴上代码 password intput demo body{ margin:0px; background-co ...
vue点击input框出现弹窗_vue组件实现弹出框点击显示隐藏效果
本文实例为大家分享了vue实现弹出框点击显示隐藏的具体代码,供大家参考,具体内容如下效果如下图由于我的更改密码弹出框是一个组件引用的,所以在一开始是隐藏的,这就需要在当前的页面上对弹出框组件设置v ...
input眼睛显示 vue_2019前端面试题汇总（主要为Vue）
毕业之后就在一直合肥小公司工作,没有老司机.没有技术氛围,在技术的道路上我只能独自摸索.老板也只会画饼充饥,前途一片迷茫看不到任何希望.于是乎,我果断辞职,在新年开工之际来到杭州,这里的互联网公司应该 ...
JS控制DIV的显示隐藏
<html> <head> <meta http-equiv="Content-Type" content="text/html; char ...
vue实现密码显示隐藏、很简单易懂
效果: 思路: 利用input的type属性,当type值是text的时候展示密码,当type值是password的时候隐藏密码: 于是很容易想到用v-bind来绑定type,同时用一个布尔值来控制, ...
frame框架的显示隐藏操作 (转)
下面是主要代码: index.htm <html> <head> <meta HTTP-EQUIV="Content-Type" CONTENT=&q ...
vue 自定义属性判断点击每个item 显示隐藏
用到的知识点有循环读出列表 v-for map 或 vue.set <!DOCTYPE html> <html ng-app="app"> <hea ...
jQuery学习笔记系列（一）——入口函数，jQuery对象和DOM对象，jQuery选择器、样式操作、效果（显示隐藏、滑入滑出、淡入淡出、自定义动画、停止动画队列）
day01 - jQuery 学习目标: 能够说出什么是 jQuery 能够说出 jQuery 的优点能够简单使用 jQuery 能够说出 DOM 对象和 jQuery 对象的区别能够写出常用的 ...
原生js设置div隐藏或者显示_10种JS控制DIV的显示隐藏代码
div隐藏与显示 #menus { background-color: #c4cff0; } function Layer_HideOrShow(cur_div) { var current=docu ...

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

准备图标

创建div

设置样式

定义数据

定义函数

兼容问题

el-input 密码输入框显示隐藏优化相关推荐

最新文章

热门文章

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

准备图标

创建div

设置样式

定义数据

定义函数

兼容问题

el-input 密码输入框 显示隐藏优化相关推荐

最新文章

热门文章

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

el-input 密码输入框显示隐藏优化相关推荐