前端element组件库中el-input密码右侧添加小眼睛切换状态

el-input 右侧添加小眼睛，显示密码与隐藏状态

✍ 一、el-input

👇本次演示使用的是阿里图标库自定义图标，详细如何引入阿里图标库，请参考下方文章

核心代码解析：

• :type="flagType" 为动态绑定data中的flagType:'password',
• :class="[this.flag?'iconfont icon-zhengyan':'iconfont icon-biyan']" 为动态样式 ，默认显示闭眼状态
• getFlag()函数，切换小眼睛图标

<!-- 密码 -->
  <el-form-item label="密码" prop="password">
    <el-input placeholder="请输入密码"
              :type="flagType"
              v-model="ruleForm.password">
              autocomplete="off"
      <i slot="suffix"
         :class="[this.flag?'iconfont icon-zhengyan':'iconfont icon-biyan']"
         style="margin-top:8px;font-size:18px;"
         @click="getFlag()" />
    </el-input>
  </el-form-item>

✍ 二、写入状态【script】

data(){
	return{
		//密码小眼睛切换状态
       flag: false,
       flagType:'password',
	}
}

 methods:{
    //小眼睛切换状态
     getFlag(){
       this.flag = !this.flag
       this.flagType = this.flag ? 'text' : 'password'//text为显示密码；password为隐藏密码
     },
 }