您的当前位置:首页正文

Vue3组件二次封装

2023-02-07 来源:帮我找美食网

Form表单组件二次封装

项目中使用Form UI库
1.直接复制 到项目中直接使用  
2.开发者自行进行二次封装(减少代码)

Form组件二次封装考虑组件构成

form组件:
  input  text  passworld
  select
  checkbox
  radio
  文本域
  日期

实现form组件二次封装

1.基础版本
<script lang="ts" setup></script>

<template>
  <div>Form</div>
</template>

组件引入挂载

//引入form组件
import myForm from "./components/myForm/Form.vue";
<!-- 实现form封装 -->
<myForm></myForm>
2.复制UI到封装组件 修改无误  可以出现表单
<template>
  <el-form :inline="true" :model="formInline" class="demo-form-inline">
    <el-form-item label="Approved by">
      <el-input v-model="formInline.user" placeholder="Approved by" />
    </el-form-item>
    <el-form-item label="Activity zone">
      <el-select v-model="formInline.region" placeholder="Activity zone">
        <el-option label="Zone one" value="shanghai" />
        <el-option label="Zone two" value="beijing" />
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">Query</el-button>
    </el-form-item>
  </el-form>
</template>

3.分析出对应的位置 开始抽离组件
如果需要产生多个form表单  ---产生多个el-form-item----需要一个集合数据来循环渲染form-item

结合form表单属性继续分析:
el-form-item  lable  显示文本
  内部标签 el-input  v-model 绑定数据  placeholder 文本提示  等等
  
  首先确认 一个集合 []
          配置内部属性
  在结合 form表单 v-model  定义一个表单数据对象

修改二次封装组件代码使用配置产生form自动生成

<script lang="ts" setup>
//定义组件props
interface propTypes {
  formConfig: Array<{
    name: string;
    placeholder?: string;
    label?: string;
  }>;
}
defineProps<propTypes>();
</script>

<template>
  <el-form :inline="true" class="demo-form-inline">
    <!-- 循环遍历产生Form组件 -->
    <template v-for="(item, index) in formConfig">
      <el-form-item :label="item.label">
        <el-input :placeholder="item.placeholder" />
      </el-form-item>
    </template>
  </el-form>
</template>

4.分析简易封装之后的代码 得知 el-input不是固定,需要根据配置中key 动态切换
  可以使用 vue中component 组件的动态挂载 来完成
   
<script lang="ts" setup>
//按需引入 UI 组件
import { ElInput } from "element-plus";
//定义组件props
interface propTypes {
  formConfig: Array<{
    name: string;
    placeholder?: string;
    label?: string;
  }>;
}
defineProps<propTypes>();
</script>

<template>
  <el-form :inline="true" class="demo-form-inline">
    <!-- 循环遍历产生Form组件 -->
    <template v-for="(item, index) in formConfig">
      <el-form-item :label="item.label">
        <!-- 使用组件动态挂载 -->
        <component :is="ElInput"></component>
      </el-form-item>
    </template>
  </el-form>
</template>


5.使用配置项 动态生成form标签

<script lang="ts" setup>
import { ElInput } from "element-plus";
//定义组件props
interface propTypes {
  formConfig: Array<{
    name: string;
    placeholder?: string;
    label?: string;
  }>;
}
defineProps<propTypes>();

//定义对象存储key:UI组件
interface UIComType {
  [propName: string]: any;
}
let UICom: UIComType = {
  ElInput: ElInput,
};
</script>

<template>
  <el-form :inline="true" class="demo-form-inline">
    <!-- 循环遍历产生Form组件 -->
    <template v-for="(item, index) in formConfig">
      <el-form-item :label="item.label">
        <!-- 使用组件动态挂载 -->
        <component :is="UICom[item.name]" :placeholder="item.placeholder"></component>
      </el-form-item>
    </template>
  </el-form>
</template>

对应的配置 name  
//定义form表单配置
let formConfig = [
  {
    name: "ElInput",
    placeholder: "请输入...",
    label: "姓名:",
  },
];

6.完善form表单中的数据源 绑定表单v-model 数据

<script lang="ts" setup>
import { ElInput } from "element-plus";
//定义组件props
interface propTypes {
  formData: any;
  formConfig: Array<{
    name: string;
    placeholder?: string;
    label?: string;
    key: string;
  }>;
}
defineProps<propTypes>();

//定义对象存储key:UI组件
interface UIComType {
  [propName: string]: any;
}
let UICom: UIComType = {
  ElInput: ElInput,
};
</script>

<template>
  <el-form :inline="true" :model="formData" class="demo-form-inline">
    <!-- 循环遍历产生Form组件 -->
    <template v-for="(item, index) in formConfig">
      <el-form-item :label="item.label">
        <!-- 使用组件动态挂载 -->
        <component
          :is="UICom[item.name]"
          v-model="formData[item.key]"
          :placeholder="item.placeholder"
        ></component>
      </el-form-item>
    </template>
  </el-form>
</template>

在父组件中设置form表单数据 配置key 键 获取表单键 v-model绑定数据

//定义表单对象数据
let formModule = reactive({
  name: "小小",
});

watch(
  formModule,
  () => {
    console.log("Form", formModule);
  },
  { deep: true }
);
</script>

<template>
  <!-- 实现form封装 -->
  <myForm :form-config="formConfig" :form-data="formModule"></myForm>
  <House></House>
</template>
7.form表单封装下拉菜单
//直接在封装组件内部
配置中添加下拉菜单元素
let UICom: UIComType = {
  ElInput: ElInput,
  ElSelect: ElSelect,
};

<component
          :is="UICom[item.name]"
          v-model="formData[item.key]"
          :placeholder="item.placeholder"
        >
        //  下来菜单具有的option
          <el-option label="Zone one" value="shanghai" />
</component>
最终修改完的下拉菜单
//定义组件props
interface propTypes {
  formData: any;
  formConfig: Array<{
    name: string;
    placeholder?: string;
    label?: string;
    key: string;
    children?: Array<{
      label?: string;
      value?: string;
    }>;
  }>;
}
defineProps<propTypes>();

//定义对象存储key:UI组件
interface UIComType {
  [propName: string]: any;
}
let UICom: UIComType = {
  ElInput: ElInput,
  ElSelect: ElSelect,
};
</script>

<template>
  <el-form :inline="true" :model="formData" class="demo-form-inline">
    <!-- 循环遍历产生Form组件 -->
    <template v-for="(item, index) in formConfig">
      <el-form-item :label="item.label">
        <!-- 使用组件动态挂载 -->
        <component
          :is="UICom[item.name]"
          v-model="formData[item.key]"
          :placeholder="item.placeholder"
        >
          <template v-if="item.children && item.children.length">
            <el-option
              v-for="(its, is) in item.children"
              :label="its.label"
              :value="its.value!"
            />
          </template>
        </component>
      </el-form-item>
    </template>
  </el-form>
</template>

因篇幅问题不能全部显示,请点此查看更多更全内容

热门图文

Top