如何在Laravel Voyager中为卡片创建并多选多个分类

问题描述 #

当前界面效果：

期望实现的多选分类效果：

请问如何实现多选分类的功能？

纯前端实现（HTML + CSS + JavaScript） #

如果仅需前端交互展示，无需后端存储，可按以下步骤实现：

1. 基础HTML结构 #

用复选框搭配标签实现可点击的分类选项，既保留原生多选逻辑，又便于自定义样式：

<div class="category-container">
  <label class="category-item">
    <input type="checkbox" name="category" value="tech">
    <span>科技</span>
  </label>
  <label class="category-item">
    <input type="checkbox" name="category" value="life">
    <span>生活</span>
  </label>
  <label class="category-item">
    <input type="checkbox" name="category" value="sports">
    <span>体育</span>
  </label>
  <!-- 可添加更多分类选项 -->
</div>

2. CSS样式美化 #

隐藏原生复选框，给标签设置选中/未选中的视觉样式，贴近你想要的效果：

.category-container {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.category-item {
  padding: 8px 16px;
  border: 1px solid #ddd;
  border-radius: 20px;
  cursor: pointer;
  user-select: none;
  transition: all 0.2s;
}

.category-item input[type="checkbox"] {
  display: none;
}

.category-item input[type="checkbox"]:checked + span {
  color: #fff;
}

.category-item input[type="checkbox"]:checked ~ .category-item {
  background-color: #007bff;
  border-color: #007bff;
}

3. JavaScript处理选中逻辑 #

若需要获取选中的分类值或做额外交互，可通过JS监听事件：

// 获取所有分类复选框
const categoryCheckboxes = document.querySelectorAll('input[name="category"]');

// 监听选中状态变化
categoryCheckboxes.forEach(checkbox => {
  checkbox.addEventListener('change', () => {
    // 提取所有选中的分类值
    const selectedCategories = Array.from(categoryCheckboxes)
      .filter(cb => cb.checked)
      .map(cb => cb.value);
    console.log('选中的分类:', selectedCategories);
    // 此处可将选中值传给后端，或用于页面内容过滤等操作
  });
});

结合后端框架的实现（以Vue为例） #

如果使用Vue这类前端框架，可通过数据绑定简化逻辑：

<template>
  <div class="category-container">
    <label 
      class="category-item"
      :class="{ active: selectedCategories.includes(category.value) }"
      v-for="category in categories"
      :key="category.value"
    >
      <input 
        type="checkbox" 
        :value="category.value"
        v-model="selectedCategories"
      >
      <span>{{ category.label }}</span>
    </label>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue';

// 分类列表数据
const categories = ref([
  { value: 'tech', label: '科技' },
  { value: 'life', label: '生活' },
  { value: 'sports', label: '体育' }
]);

// 存储选中的分类数组
const selectedCategories = ref([]);

// 监听选中状态变化
watch(selectedCategories, (newVal) => {
  console.log('选中的分类:', newVal);
  // 可发送请求到后端保存选中状态或过滤数据
});
</script>

<style scoped>
.category-item {
  padding: 8px 16px;
  border: 1px solid #ddd;
  border-radius: 20px;
  cursor: pointer;
  user-select: none;
  transition: all 0.2s;
}
.category-item.active {
  background-color: #007bff;
  border-color: #007bff;
  color: #fff;
}
.category-item input[type="checkbox"] {
  display: none;
}
</style>

关键注意事项 #

• 保持复选框的name属性一致，方便表单提交时统一获取选中值
• 通过CSS伪类或框架动态类实现选中状态的视觉区分
• 若需后端存储，选中后将分类数组通过接口传给后端存入数据库即可

内容的提问来源于stack exchange，提问作者Tim Erlander