使用Vue3和TypeScript对Element UI Form表单进行二次包装与定制

在开发中常常需要对某个组件进行二次封装来提升快速开发的效率，比如form表单

需求：需要对表单进行二次封装以及基于表单封装进行封装搜索组件

在src下面新建 base-ui文件夹其中：src文件夹：存放组件，types文件:存放类型，inde.ts：集中导出组件和类型

封装 form

types:index.ts

// ddaterange' | 'date' 日期选择器;
// 表单中的组件类型
type IFormType =
  | 'input'
  | 'password'
  | 'select'
  | 'cascader'
  | 'daterange'
  | 'date';

// 表单所需要的数据类型
// field：双向绑定关键字    
// type：表单中组件的类型（通过type进行匹配：比如：input 是一个输入框，password则是密码框） 
// label  标签名称
// rules 验证规则
// placeholder 提醒文字
// options  数据（比如select ）
export interface IFormItem {
  field: string;
  type: IFormType;
  label: string;
  rules?: any[];
  placeholder?: string | number;
  options?: any[];
}

// 表单的配置
export interface IForm {
  formItems: IFormItem[];
  labelWidth?: string;
  colLayout?: any;
  itemLayout?: any;
}

组件编写

<template>
  <div class="search">
    <div class="header">
      <slot name="header"></slot>
    </div>
    <el-form :label-width="props.labelWidth">
      <el-row>
        <template v-for="item in props.formItems" :key="item.label">
          <el-col v-bind="props.colLayout">
            <el-form-item :label="item.label">
              <template
                v-if="item.type === 'input' || item.type === 'password'"
              >
                <el-input
                  :show-password="item.type == 'password'"
                  :placeholder="item.placeholder"
                  v-model="formData[`${item.field}`]"
                ></el-input>
              </template>
              <template v-else-if="item.type === 'select'">
                <el-select
                  :placeholder="item.placeholder"
                  v-model="formData[`${item.field}`]"
                >
                  <el-option
                    v-for="option in item.options"
                    :key="option.value"
                    :value="option.value"
                    :label="option.label"
                  />
                </el-select>
              </template>
              <template v-else-if="item.type === 'cascader'">
                <el-cascader
                  v-model="formData[`${item.field}`]"
                  :options="item.options"
                  :show-all-levels="false"
                  :placeholder="item.placeholder"
                />
              </template>
              <template v-else-if="item.type === 'date'">
                <el-date-picker
                  v-model="formData[`${item.field}`]"
                  type="date"
                  range-separator="至"
                  :placeholder="item.placeholder"
                  end-placeholder="End date"
                />
              </template>
              <template v-else-if="item.type === 'daterange'">
                <el-date-picker
                  v-model="formData[`${item.field}`]"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始时间"
                  :placeholder="item.placeholder"
                  end-placeholder="结束时间"
                />
              </template>
            </el-form-item>
          </el-col>
        </template>
      </el-row>
    </el-form>
    <div class="footer">
      <slot name="footer"></slot>
    </div>
  </div>
</template>

<script setup lang="ts">
import { IFormItem } from '../types';
import { defineProps, defineEmits, ref, watch } from 'vue';
const emits = defineEmits(['update:modelValue']);
const props = defineProps({
// 双向绑定
  modelValue: {
    type: Object,
    required: true
  },
// 组件数据
  formItems: {
    type: Array as () => IFormItem[],
    default: () => []
  },
//  label宽度
  labelWidth: {
    type: String,
    default: '80px'
  },
// 用于响应式
  colLayout: {
    type: Object,
    default: () => ({
      xl: 4,
      lg: 6,
      md: 8,
      xs: 24
    })
  }
});

// 这里选择里办法一进行实现
// 办法1：获取值：{ ...props.modelValue} 进行浅拷贝，避免破坏props单向数据流,
// v-model="formData[`${item.field}`]"
const formData = ref({ ...props.modelValue });


// 办法2：使用computed，需要把组件中的v-model 改成 :model-value="modleValue[`${item.field}`]"  和 @update:modelValue='handleValueChange($event,item.field)'

// 同时需要把 值更新：结构props.modelValue，[field]:value则实现值替换
const handleValueChange=(value:any,field){ emits(''update:modelValue",{...props.modelValue,[field]:value}) }
// const formData = computed(() => ({ ...props.modelValue }));
// 进行深度监听,实现组件双向绑定
watch(
  formData,
  (newValue) => {
    emits('update:modelValue', newValue);
  },
  {
    deep: true
  }
);
</script>

<style scoped lang="less">
// 铺满
.el-select,
/deep/.el-cascader {
  width: 100%;
}
.header {
  text-align: center;
}
</style>

在form的基础上封装搜索组件

<template>
  <div class="page-search">
    <hSearch v-bind="props.searchformConfig" v-model="formData">
      <template #footer>
        <div class="search-btn">
          <el-button
            type="default"
            :icon="RefreshLeft"
            @click="handleResetClick"
            >重置</el-button
          >
          <el-button type="primary" :icon="Search" @click="handleQueryClick"
            >搜索</el-button
          >
        </div>
      </template>
    </hSearch>
  </div>
</template>

<script setup lang="ts">
import hSearch from '../../../base-ui/form';
import { Search, RefreshLeft } from '@element-plus/icons-vue';
import { ref, defineProps, defineExpose, defineEmits } from 'vue';
const emits = defineEmits(['handleQueryClick', 'handleResetClick']);
// 基础配置
const props = defineProps({
  searchformConfig: {
    type: Object,
    required: true
  }
});
// 获取数据：
const formItems = props.searchformConfig.formItems ?? [];
// 对数据进行初始化
const formOriginData: any = {};
for (const item of formItems) {
  formOriginData[item.field] = '';
}
// 把初始化的数据进行赋值
const formData = ref(formOriginData);

// 重置按钮方法
const handleResetClick = () => {
// 根据form 组件的双向绑定 进行重置数据
  for (const key in formOriginData) {
    // 办法一
    formData.value[`${key}`] = formOriginData[key];
    // 办法二
    // formData.value = formOriginData;
  }
  emits('handleResetClick');
};
// 搜索按钮事件
const handleQueryClick = () => {
  emits('handleQueryClick', formData.value);
};

// 暴露方法
defineExpose({
  handleQueryClick,
  handleResetClick
});
</script>

<style scoped lang="less">
.search-btn {
  text-align: right;
  padding: 5px;
}
</style>

#######inde.ts 导出

import pageSearchVue from './src/page-search.vue';
export default pageSearchVue;

封装完成，在页面进行使用

<template>
  <div class="user">
    <pageSearch
      :searchformConfig="searchformConfig"
      @handleQueryClick="handleQueryClick"
      @handleResetClick="handleResetClick"
    ></pageSearch>
  </div>
</template>

<script setup lang="ts">
// 引入搜索组件
import pageSearch from '@/components/page-search';
// 引入搜索组件的配置文件：组件内容根据配置文件进行显示
import { searchformConfig } from './config/search.config';
// 搜索事件
const handleQueryClick = (value: any) => {
// value 是搜索对象的关键字
  console.log(value, '搜索');
};

// 重置事件
const handleResetClick = () => {
  console.log('重置');
};
</script>

<style scoped lang="less">
.user {
  background: #fff;
  padding: 10px;
  box-sizing: border-box;
  height: 100vh;
}
.search-btn {
  text-align: right;
  padding: 5px;
}
</style>

配置文件

import { IForm } from '@/base-ui/form/types';
export const searchformConfig: IForm = {
  formItems: [
    {
      // field：双向绑定的关键字 
      field: 'id',
      // form表单类型
      type: 'input',
      // label
      label: 'id',
      // 搜索框文字提醒
      placeholder: '请输入id'
    },
    {
      field: 'name',
      type: 'input',
      label: '用户名',
      placeholder: '请输入用户名'
    },
    {
      field: 'password',
      type: 'password',
      label: '密码',
      placeholder: '请输入密码'
    },
    {
      field: 'date',
      type: 'date',
      label: '日期',
      placeholder: '请选择日期'
    },
    {
      field: 'daterange',
      type: 'daterange',
      label: '日期范围',
      placeholder: '请选择日期范围'
    },
    {
      field: 'sport',
      type: 'select',
      label: '运动',
      placeholder: '请选择运动',
      options: [
        { label: '足球', value: '33' },
        { label: '篮球', value: '22' },
        { label: '排球', value: '11' }
      ]
    },
    {
      field: 'cascader',
      type: 'cascader',
      label: '运动',
      placeholder: '请选择运动',
      options: [
        {
          value: 'guide',
          label: 'Guide',
          children: [
            {
              value: 'disciplines',
              label: 'Disciplines',
              children: [
                {
                  value: 'consistency',
                  label: 'Consistency'
                },
                {
                  value: 'feedback',
                  label: 'Feedback'
                },
                {
                  value: 'efficiency',
                  label: 'Efficiency'
                },
                {
                  value: 'controllability',
                  label: 'Controllability'
                }
              ]
            },
            {
              value: 'navigation',
              label: 'Navigation',
              children: [
                {
                  value: 'side nav',
                  label: 'Side Navigation'
                },
                {
                  value: 'top nav',
                  label: 'Top Navigation'
                }
              ]
            }
          ]
        }
      ]
    }
  ]
};

实现效果图:在不同的页面通过配置searchformConfig 进行展示不同的搜索组件了

最后实现的代码：gitee链接：huai_ran_ya/element-ui-secondary-packaging/