vue实现车型对比

Vue实现车型对比功能

使用Vue实现车型对比功能需要结合组件化开发、状态管理和数据展示。以下是一个完整的实现方案：

数据准备与结构设计

定义车型数据结构，通常包含车型基本信息、参数配置等：

const carModels = [
  {
    id: 1,
    name: 'Model A',
    brand: 'Brand X',
    price: '200,000',
    specs: {
      engine: '2.0T',
      power: '190HP',
      fuel: '7.5L/100km'
    }
  },
  // 其他车型数据...
]

状态管理

使用Vuex或Composition API管理对比状态：

// 使用Composition API
import { ref } from 'vue'

export function useCompare() {
  const comparedItems = ref([])

  const addToCompare = (item) => {
    if (comparedItems.value.length < 4 && !comparedItems.value.some(i => i.id === item.id)) {
      comparedItems.value.push(item)
    }
  }

  const removeFromCompare = (id) => {
    comparedItems.value = comparedItems.value.filter(item => item.id !== id)
  }

  return { comparedItems, addToCompare, removeFromCompare }
}

对比组件实现

创建对比组件展示对比结果：

<template>
  <div class="compare-container">
    <div v-if="comparedItems.length > 0">
      <div class="compare-header">
        <h3>车型对比</h3>
        <button @click="clearAll">清空对比</button>
      </div>

      <div class="compare-table">
        <table>
          <thead>
            <tr>
              <th>参数</th>
              <th v-for="item in comparedItems" :key="item.id">
                {{ item.brand }} {{ item.name }}
                <button @click="removeFromCompare(item.id)">×</button>
              </th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(value, key) in comparedItems[0].specs" :key="key">
              <td>{{ key }}</td>
              <td v-for="item in comparedItems" :key="item.id">
                {{ item.specs[key] }}
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    <div v-else class="empty-compare">
      <p>暂无对比车型，请添加车型进行对比</p>
    </div>
  </div>
</template>

车型列表组件

实现可添加对比的车型列表：

<template>
  <div class="car-list">
    <div v-for="car in cars" :key="car.id" class="car-item">
      <h4>{{ car.brand }} {{ car.name }}</h4>
      <p>价格: {{ car.price }}</p>
      <button 
        @click="addToCompare(car)"
        :disabled="isInCompare(car.id)"
      >
        {{ isInCompare(car.id) ? '已添加' : '加入对比' }}
      </button>
    </div>
  </div>
</template>

样式优化

添加CSS样式提升用户体验：

.compare-container {
  margin: 20px;
  padding: 15px;
  border: 1px solid #eee;
}

.compare-table {
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  padding: 8px 12px;
  border: 1px solid #ddd;
  text-align: left;
}

.car-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
}

.car-item {
  border: 1px solid #ccc;
  padding: 15px;
  border-radius: 5px;
}

高级功能扩展

1. 对比指标自定义：允许用户选择需要对比的具体参数
2. 差异高亮：自动突出显示参数差异
3. 本地存储：使用localStorage保存对比状态
4. 图表展示：对数值型参数使用图表可视化对比

实现差异高亮示例：

// 在对比逻辑中添加差异检测
const highlightDiff = (value, key) => {
  const values = comparedItems.value.map(item => item.specs[key])
  return values.some(v => v !== value) ? 'diff-cell' : ''
}

.diff-cell {
  background-color: #fff3cd;
  font-weight: bold;
}

响应式设计

针对移动设备优化布局：

@media (max-width: 768px) {
  .compare-table {
    display: block;
  }

  table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
}

通过以上方案可以实现一个完整的车型对比功能，包含添加/移除车型、参数对比、差异高亮等核心功能，同时保持代码的可维护性和扩展性。