基于Ant Design Vue 封装配置式的表单搜索组件

2023-09-17 03:37:52

前言

在前端开发中，我们经常需要在页面上提供一个表单，以便用户输入查询条件，然后根据这些条件对数据进行搜索。传统的表单搜索组件通常都是由开发人员手动编写的，这不仅费时费力，而且容易出错。为了解决这个问题，我们可以使用Ant Design Vue提供的Form组件来封装一个配置式的表单搜索组件。

组件设计

总体设计

我们的表单搜索组件将由以下几个部分组成：

Form组件：用于管理表单中的输入字段。
Input组件：用于输入查询条件。
Button组件：用于触发搜索操作。
Result组件：用于展示搜索结果。

交互设计

我们的表单搜索组件将支持以下交互：

用户可以在Input组件中输入查询条件。
用户可以点击Button组件触发搜索操作。
搜索结果将在Result组件中展示。

组件实现

Form组件

首先，我们来实现Form组件。Form组件的代码如下：

<template>
  <form @submit.prevent="onSubmit">
    <slot />
  </form>
</template>

<script>
export default {
  methods: {
    onSubmit(event) {
      // 阻止表单提交
      event.preventDefault();

      // 获取表单数据
      const formData = new FormData(this.$el);

      // 将表单数据发送给父组件
      this.$emit('submit', formData);
    }
  }
};
</script>

Input组件

接下来，我们来实现Input组件。Input组件的代码如下：

<template>
  <input :placeholder="placeholder" v-model="value" @input="onInput" />
</template>

<script>
export default {
  props: {
    placeholder: {
      type: String,
      default: ''
    },
    value: {
      type: [String, Number],
      default: ''
    }
  },
  methods: {
    onInput(event) {
      // 将输入值发送给父组件
      this.$emit('input', event.target.value);
    }
  }
};
</script>

Button组件

然后，我们来实现Button组件。Button组件的代码如下：

<template>
  <button @click="onClick">{{ text }}</button>
</template>

<script>
export default {
  props: {
    text: {
      type: String,
      default: '搜索'
    }
  },
  methods: {
    onClick() {
      // 触发搜索操作
      this.$emit('click');
    }
  }
};
</script>

Result组件

最后，我们来实现Result组件。Result组件的代码如下：

<template>
  <div v-if="result">
    {{ result }}
  </div>
</template>

<script>
export default {
  props: {
    result: {
      type: String,
      default: ''
    }
  }
};
</script>

使用示例

<template>
  <form-search @submit="onSubmit">
    <input-text placeholder="请输入查询条件" v-model="query" />
    <button-search @click="onSearch">搜索</button-search>
  </form-search>

  <result :result="result" />
</template>

<script>
import FormSearch from './components/FormSearch.vue';
import InputText from './components/InputText.vue';
import ButtonSearch from './components/ButtonSearch.vue';
import Result from './components/Result.vue';

export default {
  components: {
    FormSearch,
    InputText,
    ButtonSearch,
    Result
  },
  data() {
    return {
      query: '',
      result: ''
    };
  },
  methods: {
    onSubmit(formData) {
      // 获取表单数据
      const query = formData.get('query');

      // 发送搜索请求
      this.result = `搜索结果：${query}`;
    },
    onSearch() {
      // 触发搜索操作
      this.$refs.formSearch.submit();
    }
  }
};
</script>