【饿了么UI】elementUI密码框图标实现睁眼和闭眼效果（阿里巴巴iconfront图标库vue项目本地引用）网站首页 学无止境

【饿了么UI】elementUI密码框图标实现睁眼和闭眼效果（阿里巴巴iconfront图标库vue项目本地引用）

牧之_ 2024-06-17 10:19:00

简介【饿了么UI】elementUI密码框图标实现睁眼和闭眼效果（阿里巴巴iconfront图标库vue项目本地引用）

elementUI中输入框的密码框属性，

默认是一个始终睁眼的图标，测试今天提bug要有闭眼效果（无大语）…
因为elementUI中的icon没有闭眼的，所以还要去iconfront下载引入
效果图：
在这里插入图片描述
点击后

一、下载图标

https://www.iconfont.cn 搜索闭眼，找到合适图表，加入购物车，然后点击右上购物车，下载代码
在这里插入图片描述

在这里插入图片描述

二、项目引入

下载的zip解压到项目的静态资源文件夹，如static，重命名一个合适名字
需要使用的页面中import引入iconfont.css，路径要正确，

import iconfont from '../../../static/images/iconfont/iconfont.css'

定义icon iconfont类样式（可以随便改间距大小之类的）

.icon, .iconfont {
  font-family:"iconfont" !important;
  font-size: 16px;
  font-style: normal;
  line-height: 32px;
  height: 100%;
  width: 25px;
  margin-right: 5px;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: 0.2px;
  -moz-osx-font-smoothing: grayscale;
  cursor: pointer;
}

data中定义几个用到的变量

      icon: "icon iconfont icon-biyan",	// 控制图标显示
      showpwd:false,	// 用来判断当前是否显示密码
      inputType:'password'	//input框的type类型

给el-ipnut框添加图标插槽

 		<el-input
          size="small"
          :type="inputType"
          placeholder="请输入密码"
        >
          <i slot="prefix" class="el-input__icon el-icon-lock"></i>
          <i slot="suffix" :class="icon" @click="showPass"></i>
        </el-input>

定义showPass方法（别问样式和type控制为啥不简写到input上，习惯了，就是懒）

    showPass(){
        if(!this.showpwd){
          this.icon = "el-input__icon el-icon-view";
          this.showpwd=true
          this.inputType='input'
        }
        else{
          this.icon = "icon iconfont icon-biyan";
          this.showpwd=false
          this.inputType='password'
        }
    },