vue3 写一个高级搜索的组件

在 Vue3 中创建一个高级搜索组件，可以按照以下步骤操作：

创建组件

在 Vue3 项目中，可以通过单文件组件的方式创建一个高级搜索组件，例如在 AdvancedSearch.vue 文件中定义组件：

<template>
  <div>
    <!-- 高级搜索表单 -->
  </div>
</template>

<script>
export default {
  name: "AdvancedSearch",
};
</script>

<style>
/* 组件样式 */
</style>

定义组件属性

在组件中定义 props 属性来接收外部传递的参数，例如：

export default {
  name: "AdvancedSearch",
  props: {
    fields: {
      type: Array, // 表单字段配置
      required: true,
    },
    value: {
      type: Object, // 表单值
      default: () => ({}),
    },
  },
};

其中，fields 属性用来定义表单字段的配置，value 属性用来定义表单的默认值。

渲染表单

根据 fields 属性的字段配置，创建表单组件并渲染出来，例如：

<template>
  <div>
    <form @submit.prevent="handleSubmit">
      <div v-for="field in fields" :key="field.name">
        <label :for="field.name">{
   
   { field.label }}</label>
        <component :is="field.type" v-model="value[field.name]" :options="field.options"></component>
      </div>
      <button type="submit">搜索</button>
    </form>
  </div>
</template>

在组件中使用 v-for 循环渲染每个表单字段，使用 v-model 指令绑定表单值，使用 <component :is> 标签动态加载相应的表单组件。

定义表单组件

根据表单字段的类型定义相应的表单组件，在组件中输入绑定和事件响应逻辑。例如，在 Input.vue 中定义一个输入框表单组件：

<template>
  <input :value="value" @input="$emit('input', $event.target.value)">
</template>

<script>
export default {
  props: {
    value: { // 绑定值
      type: String,
      default: "",
    },
  },
};
</script>

提交表单

在组件中定义 handleSubmit 方法来处理表单的提交动作。例如

export default {
  name: "AdvancedSearch",
  props: {
    fields: {
      type: Array,
      required: true,
    },
    value: {
      type: Object,
      default: () => ({}),
    },
  },
  methods: {
    handleSubmit() {
      // 提交表单事件
      this.$emit("submit", this.value);
    },
  },
};

当表单被提交时，会触发 submit 事件将表单值作为参数传递出去。

使用组件

在父组件中使用些新创建的高级搜索组件，并传递相应的参数，例如：

<template>
  <div>
    <AdvancedSearch :fields="fields" v-model="searchParams" @submit="handleSubmit" />
  </div>
</template>

<script>
import AdvancedSearch from "./AdvancedSearch.vue";
export default {
  components: {
    AdvancedSearch,
  },
  data() {
    return {
      fields: [
        {
          name: "name",
          label: "姓名",
          type: "input",
        },
        {
          name: "age",
          label: "年龄",
          type: "input",
        },
        // 其他表单字段配置...
      ],
      searchParams: {},
    };
  },
  methods: {
    handleSubmit(params) {
      // 处理表单提交事件
    },
  },
};
</script>

在父组件中定义高级搜索表单的字段配置和表单值，通过 v-model 双向绑定表单值，通过 @submit 监听表单提交事件。

以上是在 Vue3 中创建一个简单的高级搜索组件的基本步骤。您可以根据实际情况对代码进行调整和扩展。

vue3 写一个高级搜索的组件

猜你喜欢