Element的input密码框小眼睛（点击眼睛显示密码,再次点击图标隐藏密码）

一、知识点：

带 icon 的输入框，可以通过 prefix-icon 和 suffix-icon 属性在 input 组件首部和尾部增加显示图标，也可以通过 slot 来放置图标。
因为图标涉及点击事件，带 icon 的输入框，采用的是 slot 方式。
slot=“suffix” 表示，图标会出现在input 的尾部；

二、实现思路

要变化的有，图标样式和input的显示方式
定义一个flag默认false，绑定input 的type值，flag为true时，type为 text 类型（可以看见数字，实现显示密码），否则为 password 类型（隐藏密码）
图标随之改变，也需绑定class,点击图标时，改变flag的值

<i slot=“suffix”
:class="[flag?‘el-icon-minus’:‘el-icon-view’]"
style=“margin-top:8px;font-size:18px;”
autocomplete=“auto”
@click=“flag=!flag” />

data () {
return {
flag: false,
}

最终效果：

点击小眼睛，密码显示

Element的input密码框小眼睛（点击眼睛显示密码,再次点击图标隐藏密码）相关推荐

Element的input 实现带图标密码框的明密文（点击眼睛显示密码,再次点击图标隐藏密码）
更新: 新版本中,添加 show-password 属性,即可支持配置显示密码按钮:详情见:https://element.eleme.cn/#/zh-CN/component/changelog 和 ...
在ie edge中消除默认出现的密码框小眼睛标志
在ie edge中消除默认出现的密码框小眼睛标志 <style>/*去除ie edge的密码框默认出现的小眼睛给人添乱这一块,巨硬从来都没让我失望过*/input[type="p ...
JS实现密码框小眼睛的显示与隐藏(使用字体图标)
JS实现密码框小眼睛的显示与隐藏(使用字体图标) 前端学习路上的小练习,如若不喜,请勿喷. 眼睛使用的是 iconfont 阿里矢量图标库的内容链接:https://www.iconfont.cn/ ...
浏览器兼容：在ie edge中消除默认出现的密码框小眼睛标志
在ie edge中消除默认出现的密码框小眼睛标志 <style>/*去除ie edge的密码框默认出现的小眼睛给人添乱这一块,巨硬从来都没让我失望过*/input[type="p ...
实现密码框小眼睛效果
点击眼睛显示密码,再次点击图标隐藏密码,需要变化的图标样式和input的显示方式. 效果: 代码: <!DOCTYPE html> <html><head>< ...
小程序点击显示隐藏（点击标题，内容显示，再次点击隐藏，同时切换箭头的状态，且默认第一组的内容显示）
哈喽,大家下午好,时间过的真快,转眼啊又好长时间没写博客啦,嘿嘿最近公司比较忙,手上一直有项目需要处理,现在终于空闲了一点,赶快来一篇呀,嘿嘿~ 最近我一直在做小程序的项目,其中值得一提的是项目中有一 ...
解决IE 自带的密码框小眼睛与输入框X符号
input::-ms-clear{display:none;}/*删除文本框中的叉号*/ input::-ms-reveal{display:none;} /*删除密码框中的小眼睛*/ 注:使用inp ...
点击密码框显示密码（点击密码框小眼睛可显示输入密码）
案例分析` 登录注册页面中,当我们输入密码时,密码显示的是不可见的,是属于密码框类型,点击小眼睛之后显示密码. **核心思路:**1.点击眼睛按钮,把不可见的密码框类型改成可见的文本框就可看见里面的密 ...
vue 和 uniapp 的密码框小眼睛（通用）
密码输入框的小眼睛适合Vue 或者 uniapp使用步骤1动态绑定:type 步骤2在data里声明 Data(){ Return{ seen:'', pwdType: 'password', // ...

Element的input密码框小眼睛（点击眼睛显示密码,再次点击图标隐藏密码）

一、知识点：

二、实现思路

Element的input密码框小眼睛（点击眼睛显示密码,再次点击图标隐藏密码）相关推荐

最新文章

热门文章