在开发中常常需要对某个组件进行二次封装来提升快速开发的效率，比如form表单
需求：需要对表单进行二次封装以及基于表单封装进行封装搜索组件
在src下面新建 base-ui文件夹其中：src文件夹：存放组件，types文件:存放类型，inde.ts：集中导出组件和类型
image.png
封装 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的基础上封装搜索组件
image.png
<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 进行展示不同的搜索组件了
image.png
