基于ElementUI将input、select以及date-picker等组件进行封装，提升表单页面效率以及配置化！

前言

对于大多的后台管理系统来说，避免不了有很多表单的存在，写着写着就会有一大堆的冗余代码，例如 select、input、date 等这几种常见的表单项，虽然没太大的难度，但写起来会有些烦人，代码量也不可避免形成一大堆；因此，我也抽取了点时间将常用的一些表单组件进行了封装，可根据不同的 type 显示不同的组件，预留出了常用的配置，也相应的提升了开发的效率以及表单的可配置性。

项目环境

• vue：2.6.11
• element-ui：2.15.1

封装过程

• 新建一个 searchCondition.vue 的文件，并初始化模版。

• 在使用的页面中引入声明并使用。

• 下面开始来封装组件

  • 从基本的输入框开始，需要 v-model 将数据进行双向绑定，用 v-if 控制显示状态，以及绑定其它的配置。

  <div>
    <!-- 输入框 -->
    <el-input v-model="model" v-if="show(['input'])" v-bind="parseConfig"></el-input>
  </div>
  

  • v-model 的绑定实现，通过 get 和 set 来实现双向绑定。

  model: {
    prop: "value",
    event: "input",
  },
  props:{
      /**
     * @description 双向绑定的值
     * @example
     * <SearchCondition v-model="value" />
     */
    value: {
      type: [String, Number, Array, Object, Date],
    },
  },
  computed: {
    // 主要利用set来emit input 进行双向绑定 需要组件有input事件
    model: {
      get() {
        return this.value || "";
      },
      set(v) {
        this.$emit("input", v);
      },
    },
  

  • props 中约束值类型

   props:{
      /**
     * @description 展示的类型, 必须和组件同名
     * @example
     * 例如你需要el-input
     * 则type 为input
     * <SearchCondition type='input' />
     */
    type: {
      type: String,
      default: () => "input",
    },
    
    /**
     * @description 双向绑定的值
     * @example
     * <SearchCondition v-model="value" />
     */
    value: {
      type: [String, Number, Array, Object, Date],
    },
   }
  

  • computed 中增加其它配置

  computed: {
    // 主要利用set来emit input 进行双向绑定 需要组件有input事件
    model: {
      get() {
        return this.value || "";
      },
      set(v) {
        this.$emit("input", v);
      },
    },
  
    // 其它配置，详见config
    parseConfig() {
      return this.config[this.type] ? this.config[this.type] : this.config;
    },
  },
  

  • 在 methods 中新增show方法，控制组件显隐。

  methods: {
    // 返回 true/false
    show(typeArr) {
      return typeArr.includes(this.type);
    },
  },
  

• 关于 input 输入框的组件基本封装完成。

• 其它的常用组件的封装就不一一罗列了，完整版的代码如下。

  • template 部分

  <template>
    <div>
      <!-- 输入框 -->
      <el-input v-model="model" v-if="show(['input'])" v-bind="parseConfig"></el-input>
  
      <!-- select选项 -->
      <el-select
        v-model="model"
        v-if="show(['select', 'mul_select'])"
        v-bind="parseConfig"
        :multiple="type == 'mul_select' ? true : false"
        filterable
       >
        <el-option
          v-for="(item, index) in options"
          :key="index"
          :label="item[option.name]"
          :value="item[option.code]"
        ></el-option>
      </el-select>
  
      <!-- 时间选择器 -->
      <el-time-picker
        v-model="model"
        v-if="show(['time'])"
        v-bind="parseConfig"
        value-format="HH:mm:ss"
        >
      </el-time-picker>
  
      <!-- 日期/日期时间 -->
      <el-date-picker
        v-model="model"
        :type="type"
        v-if="show(['date', 'datetime'])"
        :value-format="type == 'datetime' ? 'yyyy-MM-dd HH:mm:ss' : 'yyyy-MM-dd'"
        v-bind="parseConfig"
      >
      </el-date-picker>
    </div>
  </template>
  

  • script 部分

    export default {
      model: {
        prop: "value",
        event: "input",
      },
      props: {
        /**
         * @description 展示的类型, 必须和组件同名
         * @example
         * 例如你需要el-input
         * 则type 为input
         * <SearchCondition type='input' />
         */
        type: {
          type: String,
          default: () => "input",
        },
        /**
         * @description 双向绑定的值
         * @example
         * <SearchCondition v-model="value" />
         */
        value: {
          type: [String, Number, Array, Object, Date],
        },
  
        /**
         * @description 组件配置，配置同element
         * @example
         * <SearchCondition v-model="value" :config="{}" />
         * <SearchCondition v-model="value" :config="{ input: {} }" />
         */
        config: {
          type: Object,
          default: () => {
            return {
              size: "mini",
              clearable: true,
            };
          },
        },
  
        /**
         * @description select组件配置
         * @example
         * <SearchCondition v-model="value" :option="{code:'code',name:'name'}" />
         */
        option: {
          type: Object,
          default: () => {
            return {
              code: "code",
              name: "value",
            };
          },
        },
  
        /**
         * @description select组件配置
         * @example
         * <SearchCondition v-model="value" :options="[
         *  {code:'code',name:'name'},
         * ]" />
         */
        options: {
          type: Array,
          default: () => [],
        },
      },
      computed: {
        // 主要利用set来emit input 进行双向绑定 需要组件有input事件
        model: {
          get() {
            return this.value || "";
          },
          set(v) {
            this.$emit("input", v);
          },
        },
  
        // 其它配置，详见config
        parseConfig() {
          return this.config[this.type] ? this.config[this.type] : this.config;
        },
      },
      methods: {
        show(typeArr) {
          return typeArr.includes(this.type);
        },
      },
    };
  

  使用方法

  • input 输入框

  <SearchCondition v-model="inputValue" type="input" />
  

  • select 下拉框，关于下拉框配置，code，name可配置为下拉选项显示的字段。

  <SearchCondition
      v-model="selectValue"
      type="select"
      :options="options"
      :option="{ code: 'code', name: 'name' }"
    />
  

  • mul_select 多选下拉框

  <SearchCondition
      v-model="mulSelectValue"
      type="mul_select"
      :options="options"
      :option="{ code: 'code', name: 'name' }"
    />
  

  • time 时间选择

  <SearchCondition v-model="timeValue" type="time" />
  

  • date 日期选择

  <<SearchCondition v-model="dateValue" type="date" />
  

  • datetime 日期时间选择

  <SearchCondition v-model="dateTimeValue" type="datetime" />
  

  其它配置可如下配置：

  <!-- example -->
  <SearchCondition v-model="inputValue" type="input" :config="{ placeholder: '请输入名称', size: 'mini' }" />
  

项目地址及预览

• 项目地址
• 预览
• 常用的组件效果如下：

觉得以上内容有帮助的话点个赞吧！