vue3组件封装之搜索组件的封装

vue3组件封装之搜索组件的封装

码云地址 ：git clone -b learn-js https://gitee.com/fsj178884799/vue3-typescript.git
组件封装环境：

• 组件使用的是Ant Design Vue2.x版本下载地址：https://2x.antdv.com/components/form-cn
• vue3+ ts 项目。

1.封装好的search组件

<template>
  <a-card>
    <a-form
      :model="searchInfo"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
      layout="inline"
    >
      <div v-for="(item, index) in searchData" :key="index">
        <a-form-item v-if="item.type == 'input'" :label="item.label">
          <a-input v-model:value="searchInfo[item.value]" />
        </a-form-item>
        <a-form-item v-if="item.type == 'select'" :label="item.label">
          <a-select
            v-model:value="searchInfo[item.value]"
            :placeholder="item.placeholder"
            :options="item.menu"
            style="width: 120px"
          >
          </a-select>
        </a-form-item>
        <a-form-item v-if="item.type === 'picker'" :label="item.label">
          <a-date-picker
            v-model:value="searchInfo[item.value]"
            show-time
            type="date"
            :placeholder="item.placeholder"
            style="width: 100%"
          />
        </a-form-item>
      </div>
      <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
        <a-button type="primary" @click="onSubmit">搜索</a-button>
      </a-form-item>
      <a-form-item>
        <a-button style="margin-left: 10px">重置</a-button>
      </a-form-item>
    </a-form>
  </a-card>
</template>
<script lang="ts">
import { Moment } from "moment";
import { defineComponent, reactive, toRaw } from "vue";
export default defineComponent({
  name: "search",
  props: {
    searchInfo: {
      default: {},
      type: Object,
    },
    searchData: {
      default: [],
      type: Array,
    },
  },
  setup(props: any, ctx) {
    const searchInfo: any = reactive(props.searchInfo);
    const searchData = reactive(props.searchData);
    const onSubmit = () => {
      console.log("submit!", toRaw(searchInfo));
      ctx.emit("submit-data", toRaw(searchInfo));
    };
    console.log(searchInfo);
    console.log(searchData);
    return {
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
      searchInfo,
      onSubmit,
      searchData,
    };
  },
});
</script>

2.组件的调用 组件只需要传一个searchData查询输入框相关 数组，和一个需要绑定的searchInfo的对象

<template>
  <div>
    <Search
      :searchData="searchData"
      @submitData="submit"
      :searchInfo="info"
    ></Search>
    <HelloWorld msg="Welcome to Your Vue.js + TypeScript App" />
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRaw } from "vue";
import HelloWorld from "@/components/HelloWorld.vue"; // @ is an alias to /src
import Search from "@/components/search.vue";

export default defineComponent({
  name: "Home",
  components: {
    HelloWorld,
    Search,
  },
  setup() {
    const searchArr = reactive([
      {
        type: "input",
        value: "name",
        label: "姓名",
        placeholder: "请输入姓名",
      },
      {
        type: "select",
        value: "sex",
        label: "性别",
        placeholder: "请输入性别",
        menu: [
          {
            value: 1,
            label: "女",
          },
          { value: 0, label: "男" },
        ],
      },
      {
        type: "picker",
        value: "date",
        label: "日期",
      },
    ]);
    const searchInfo = reactive({
      name: "",
      sex: "",
      date: "",
    });
    const submit = (value: object) => {
      console.log(value, "我是组件返回的查询条件");
    };
    const searchData = toRaw(searchArr);
    const info = toRaw(searchInfo);
    return {
      searchData,
      submit,
      info,
    };
  },
});
</script>

图片中的数据是search点击查询返回的数据。