先按配图 来套肩部spa放松操~

前言

阅读完本文,大概需要 5 分钟 时间

你将会学到

. 修改 element-ui 源码,适配各种业务场景.

在线预览地址

codesandbox.io/s/gracious-…

小试牛刀

ui 大大小鹿 给的设计稿如下

此时底层前端 小阳 心里窃喜,这不就是 element-ui的密码输入框吗?

简单 ctrl cv 安排

<el-input placeholder="请输入密码" v-model="input" show-password></el-input>

直接上测试环境不过分吧?

三秒后,真的就三秒吧....

"小阳,你的 bug,你的狗眼👀没闭上" 测试大大小姐姐 暴躁的甩过来了一张截图

我靠,我这暴脾气 这不得去发表一下?差点丢了工作...

作为一个卑微的底层业务开发,其实忍一忍也就忍一忍了...

言归正传,让我们来解决一下这个问题(不知道element-ui团队是不是疏忽了,还是这种小需求大佬不 care,不过作为一名前端开发,还是得致敬伟大的团队!👏不能又嫖又当又立不是~)

方案一 suffix 插槽

此部分不是本文重点,直接上代码(实在没找到官方提供的 闭眼 的icon,后续都用 👻 替代,欢迎看官老爷们补充~)

<template>
  <div id="app">
    <el-input size="min" placeholder="请输入密码" v-model="input" :type="showPassword?'text':'password'">
      <template slot="suffix">
        <i @click="showPassword=!showPassword" v-if="showPassword" class="el-input__icon">👻</i>
        <i @click="showPassword=!showPassword" v-else class="el-input__icon el-icon-view"></i>
      </template>
    </el-input>
  </div>
</template>

<script>

export default {
  name: 'App',
  components: {
  },
  data(){
    return {
      showPassword:false,
      input:''
    }
  }
}
</script>

看下效果,开发已解决

什么, 干掉了 show-password? 这样做真的很不 element-ui 🤐

方案二 修改 element-ui input 源码

下面借助于 vue 提供的 extends 方法,我们来尝试从 el-input 底层来解决问题

克隆 element-ui 到本地

git clone https://github.com/ElemeFE/element.git

1. 进入 packages/input/src/input.vue
2. 将就着看下源码吧....(可以直接跳过👀)
3. 我们直接定位到问题代码,发现这个 icon 就是 el-icon-view

引入组件

1. 在我们本地项目中 创建一个 el-input-extends.vue 的文件
2. 拷贝 packages/input/src/input.vue 的 template 部分到el-input-extends.vue

3. 继续修改 el-input-extends.vue 接下来我们就要 利用 extends 继承 el-input 非常简单,我们在文件中 加入以下代码

<script>
import { Input } from 'element-ui'
export default {
  extends:Input
}
</script>

1. 在 App.vue 引入我们的组件 el-input-extends.vue

<template>
  <div id="app">
    <elInputExtends v-model="input" show-password/>
  </div>
</template>

<script>
import elInputExtends from './components/el-input-extends.vue'
export default {
  name: 'App',
  components: {
    elInputExtends
  },
  data(){
    return {
      showPassword:false,
      input:''
    }
  }
}
</script>

看下效果,没差 还是这个熟悉的👀

改造源码

既然我们知道了 问题出在 el-icon-view

那接下来就容易了,大致逻辑 就是 点击 👀 的时候 换个 class 样式不就行了?

还是回到 element 源码,我们首先要找到这个点击事件 handlePasswordVisible

发现它内部维护了一个 passwordVisible 变量,接下来大家都懂了吧?

修改部分的代码

<template v-if="showPwdVisible">
    <span v-if="passwordVisible"
      class="el-input__icon el-input__clear"
      @click="handlePasswordVisible"
    >👻</span>
    <i v-else
      class="el-input__icon el-icon-view el-input__clear"
      @click="handlePasswordVisible"
    ></i>
</template>

让我们来看下效果

这下可以顺利交差了吧? 那么这个小技巧,看官们能打几分呢?

写在最后

技术源于业务,服务于业务

本文的核心 其实 就在于 extends, 但是我们往往只是对其了于表面 而非真正应用于业务,导致业务开发的时候无从下手

如有帮助,一键三连✌ 如有错误,欢迎留言评论交流😘

前端性能优化专家 红盾 看了都点赞 🤙