基于element-ui组件二次封装篇（1）-input输入框

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第11天，点击查看活动详情

写在前面的话

由于要求系统的组件风格统一且功能大致相同，所以每次需要用到某个相同组件时都需要复制复制复制，这样即浪费开发者的时间，又时重复劳动，很繁琐且容易出错。那么，本系列文章就组件封装提供一个思路，开发者可以根据自己的业务需求开发属于自己组件。

交代开发环境

本项目基于vue2.0+vuex+ts+element-ui开发，使用vue-property-decorator风格。

封装思路

本文主要总结关于封装组件input搜索框。

1.新建组件

2.样式开发

3.基本input功能开发

4.其他功能封装

开始开发

1.新建组件

首先，在components新建一个公用组件，我这边新建为SearchBox。

这样，此后在业务界面中哪里需要用到就直接引入并使用即可。

2.样式开发

本次本人需要开发的风格样式如下：

大致代码随意贴图如下

3.基本功能代码开发

在SearchBox子组件中：接受父组件传递过来的searchValue变量值，当值发生变化，触发父组件的updateSearchValue方法，当提交值时，触发submitSearchValue方法。

<input
     class="search-input"
     type="text"
     :value="searchValue"
     @change="inputChange"
/>
<img
   class="icon"
   src="../../assets/search.png"
   alt="搜索图标"
   @click="submitValue"
/>
 ………
<script lang="ts">
……
export default class SearchBox extends Vue {
  @Prop(String) private searchValue!: string;
  
  public inputChange(e: any) {
    this.$emit("updateSearchValue", e.target.value.trim());
  }
  public submitValue() {
    this.$emit("submitSearchValue");
  }
}
</script>

业务组件

 <SearchBox
     :search-value="mobile"
     @updateSearchValue="updateManagementmobile"
     @submitSearchValue="submitManagementmobile"
></SearchBox>

这样一个基本的input输入框封装基本完成。

4.其他功能封装

基本的功能已完成，那么还有可以个性化封装的小功能，如输入框的icon图标可设置为可变的，因本项目不需要改变，则不做此功能，还有就是placeholder可自定义。

同理，在子组件接受inputPlaceholder变量，如有传入则使用传入的值，如无使用则默认Placeholder。具体实现如下：

SearchBox子组件

 <input
    :placeholder="inputPlaceholder || '请输入点什么'"
    :value="searchValue"
    @change="inputChange"
/>
<script lang="ts">
……
export default class SearchInput extends Vue {
  @Prop(String) private inputPlaceholder!: string;
……

业务组件

<SearchBox
    input-placeholder="请输入用户手机号"
    :search-value="mobile"
    @submitSearchValue="submitManagementmobile"
></SearchBox>

总结

到这里，一个基于element-ui组件二次封装的组件开发基本完成，其实这个input组件封装是最简单的，最重要的还是要学习封装的思想，减少重复造轮子。