助力前端组件封装CodeBuddy实战记录

原创

china马斯克

发布于 2025-09-28 08:44:38

2490

友友们，周末好啊。今天我们继续知识充电，进入我们AI工具实战系列。我将分享最近几个月使用ai工具用于工作的那些事。既是一次知识的分享，又是一次自我的一次总结，也希望自己的一些使用经验可以帮助到大家。下面正文开始。

我们在前端开发时，组件封装应该是必不可少的工作。今天我就分享一下，我是如何利用CodeBuddy来辅助进行前端组件封装的。比如，我们在 Vue3 项目开发中，下拉选择组件是高频使用的交互元素。然而，当多个页面需要使用功能相似的下拉组件时，重复开发不仅效率低下，还容易导致代码冗余和维护困难。下面我将展示如何快速封装一个功能丰富、可复用的 Vue3 下拉选择组件，支持动态加载选项、搜索筛选、多选/单选切换以及自定义样式等功能。

一、设置目标

我们先来设置一下需要成的组件功能目标，也方便我们后续进行提问和功能测试，比如我就列了下面5条：

支持动态加载选项，能够从接口获取数据并实时更新选项列表。
提供搜索筛选功能，方便用户快速找到所需选项。
支持多选和单选模式的自由切换。
允许自定义组件样式，以适应不同的页面设计。
在 2 小时内完成组件的封装和初步测试。

二、使用工具与技术栈

同样，我们还是列出本次文章中使用的工具和技术栈。

这里我使用的 AI 工具是 CodeBuddy，辅助进行前端组件封装，采用的技术栈为 Vue3 + TypeScript + Tailwind CSS。Vue3 提供了强大的组合式 API，TypeScript 增强了代码的类型安全性，而 Tailwind CSS 则可以快速实现样式设计。

三、操作步骤

需求输入与初始代码生成

首先，我们向 CodeBuddy 输入了详细的需求描述：“封装 Vue3 可复用下拉选择组件（Select.vue），要求：1. 支持 props：options（选项数组，格式 [{label, value}]）、placeholder（占位提示）、multiple（是否多选，默认 false）、searchable（是否支持搜索，默认 false）、customClass（自定义样式类）；2. 支持事件：change（选中值变化时触发）；3. 内部实现：搜索时过滤 options，多选时显示已选标签，单选时显示选中 label”。

CodeBuddy 迅速生成了组件的初始代码，包含三个主要部分：

template：包含下拉按钮、选项列表以及搜索输入框的结构。下拉按钮用于触发选项列表的显示与隐藏，选项列表展示所有可选项目，搜索输入框在 searchable 为 true 时显示，用于过滤选项。
script setup：定义了 props、emit 以及内部状态。props 用于接收外部传入的参数，如选项列表、占位提示等；emit 用于在选中值变化时触发外部事件；内部状态包括 isOpen（控制选项列表的显示状态）、selectedValue（存储选中的值）、searchValue（存储搜索关键词）。
style：使用 Tailwind CSS 样式，为组件提供了基本的外观和布局。

下面是初始代码的简化示例：

<template>
  <div class="relative">
    <button
      class="px-4 py-2 border rounded"
      @click="isOpen =!isOpen"
    >
      {{ placeholder }}
    </button>
    <div v-if="isOpen" class="absolute mt-1 bg-white border rounded shadow-lg">
      <input
        v-if="searchable"
        v-model="searchValue"
        class="px-2 py-1 border"
        placeholder="搜索..."
      />
      <ul>
        <li
          v-for="option in filteredOptions"
          :key="option.value"
          @click="selectOption(option)"
        >
          {{ option.label }}
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup lang="ts">
const props = defineProps<{
  options: { label: string; value: any }[];
  placeholder: string;
  multiple?: boolean;
  searchable?: boolean;
  customClass?: string;
}>();

const emit = defineEmits(['change']);

const isOpen = ref(false);
const selectedValue = ref(props.multiple? [] : null);
const searchValue = ref('');

const filteredOptions = computed(() => {
  if (!searchValue.value) return props.options;
  return props.options.filter(option =>
    option.label.toLowerCase().includes(searchValue.value.toLowerCase())
  );
});

const selectOption = (option: { label: string; value: any }) => {
  if (props.multiple) {
    const index = selectedValue.value.indexOf(option.value);
    if (index === -1) {
      selectedValue.value.push(option.value);
    } else {
      selectedValue.value.splice(index, 1);
    }
  } else {
    selectedValue.value = option.value;
    isOpen.value = false;
  }
  emit('change', selectedValue.value);
};
</script>

<style scoped>
/* Tailwind CSS 样式 */
</style>

问题反馈与修复

在测试初始代码时，我们发现了一个问题：“多选模式下，选中值无法正确回显”。具体表现为当 multiple 为 true 时，即使 selectedValue 设置为数组，组件也未显示已选标签。我们及时向 CodeBuddy 反馈了这一问题：“multiple 为 true 时，selectedValue 设置为数组后，组件未显示已选标签”。

CodeBuddy 迅速对代码进行了修正，在模板中添加了 “v-if="multiple"” 的标签显示区域，用于在多选模式下展示已选中的标签。修正后的代码如下：

<template>
  <div class="relative">
    <button
      class="px-4 py-2 border rounded"
      @click="isOpen =!isOpen"
    >
      <span v-if="!multiple && selectedValue">{{ getSelectedLabel() }}</span>
      <span v-else-if="multiple">
        <span
          v-for="value in selectedValue"
          :key="value"
          class="px-2 py-1 mr-1 bg-gray-200 rounded"
        >
          {{ getLabelByValue(value) }}
        </span>
      </span>
      <span v-else>{{ placeholder }}</span>
    </button>
    <!-- 其余部分保持不变 -->
  </div>
</template>

<script setup lang="ts">
// 其余部分保持不变

const getSelectedLabel = () => {
  if (!selectedValue.value) return placeholder;
  const selectedOption = props.options.find(
    option => option.value === selectedValue.value
  );
  return selectedOption? selectedOption.label : placeholder;
};

const getLabelByValue = (value: any) => {
  const selectedOption = props.options.find(option => option.value === value);
  return selectedOption? selectedOption.label : '';
};
</script>

动态加载选项的扩展

考虑到项目使用情况，为了满足从接口动态加载选项的需求，我们进一步补充了需求：“组件支持通过 slot 或 props 动态加载 options，如接口请求完成后更新 options”。CodeBuddy 提出了建议：“props 中的 options 支持响应式，父组件请求接口后更新 options，子组件自动响应；同时添加 loading 状态 props，加载时显示加载动画”。

根据建议，我们对组件进行了扩展，添加了 loading 状态 props，并在模板中添加了加载动画的显示逻辑。扩展后的代码如下：

<template>
  <div class="relative">
    <button
      class="px-4 py-2 border rounded"
      @click="isOpen =!isOpen"
    >
      <!-- 显示选中值的逻辑保持不变 -->
    </button>
    <div v-if="isOpen" class="absolute mt-1 bg-white border rounded shadow-lg">
      <input
        v-if="searchable"
        v-model="searchValue"
        class="px-2 py-1 border"
        placeholder="搜索..."
      />
      <div v-if="loading" class="px-4 py-2">加载中...</div>
      <ul v-else>
        <li
          v-for="option in filteredOptions"
          :key="option.value"
          @click="selectOption(option)"
        >
          {{ option.label }}
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup lang="ts">
const props = defineProps<{
  options: { label: string; value: any }[];
  placeholder: string;
  multiple?: boolean;
  searchable?: boolean;
  customClass?: string;
  loading?: boolean;
}>();

// 其余部分保持不变
</script>

四、最终效果验证

在我们经过上述步骤的开发和优化完成后，我们最终封装的 Vue3 下拉选择组件具备了以下功能：

单选/多选切换：通过 multiple props 可以自由切换单选和多选模式。
搜索筛选：当 searchable 为 true 时，用户可以通过搜索输入框快速过滤选项。
动态加载选项：支持通过响应式 props 动态更新选项列表，并在加载时显示加载动画。
自定义样式：通过 customClass props 可以自定义组件的样式，以适应不同的页面设计。

在项目实测中，组件在多个页面中成功复用，选中值变化时能够正确触发 change 事件，用户体验良好，达到了开始设置的开发目标。

五、总结

总体来说，这次的开发应该是很顺利的。目前使用ai来开发这种前端组件应该还是十分好用。当然我们开发完成后，组件测试需要覆盖不同的使用场景，如单选/多选模式、动态选项加载等。同时，要注意可能遗漏的边界场景，如多选回显问题。通过手动测试并及时反馈问题，才能够确保组件的质量和稳定性。好了，本次分享就到这里，我们下期见！！

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

腾讯技术创作特训营S15#AI协作日志

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

腾讯技术创作特训营S15#AI协作日志

登录后参与评论

0 条评论

热度