当前位置：首页 > VUE

vue 实现货架效果

2026-01-20 16:08:05VUE

实现货架效果的基本思路

货架效果通常指在网页中展示商品或物品的网格布局，可能包含拖拽排序、分类筛选、动画交互等功能。Vue.js 结合第三方库（如 vue-draggable 或 CSS Grid）可以高效实现此类需求。

使用 CSS Grid 布局

通过 CSS Grid 实现基础的网格布局，适用于静态货架展示：

<template>
  <div class="shelf-container">
    <div v-for="(item, index) in items" :key="index" class="shelf-item">
      <img :src="item.image" :alt="item.name">
      <p>{{ item.name }}</p>
    </div>
  </div>
</template>

<style scoped>
.shelf-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
  padding: 20px;
}
.shelf-item {
  border: 1px solid #ddd;
  padding: 10px;
  text-align: center;
}
</style>

拖拽排序功能

集成 vue-draggable-next（Vue 3）实现拖拽交互：

npm install vue-draggable-next

组件实现：

<template>
  <draggable 
    v-model="items" 
    item-key="id" 
    class="shelf-container"
    @end="onDragEnd">
    <template #item="{element}">
      <div class="shelf-item">
        <img :src="element.image" :alt="element.name">
        <p>{{ element.name }}</p>
      </div>
    </template>
  </draggable>
</template>

<script setup>
import { ref } from 'vue';
import draggable from 'vue-draggable-next';

const items = ref([
  { id: 1, name: '商品A', image: 'url1' },
  { id: 2, name: '商品B', image: 'url2' }
]);

const onDragEnd = () => {
  console.log('当前顺序:', items.value);
};
</script>

动态筛选分类

添加分类筛选功能，结合计算属性：

<template>
  <div>
    <select v-model="selectedCategory">
      <option value="all">全部</option>
      <option v-for="cat in categories" :value="cat">{{ cat }}</option>
    </select>
    <div class="shelf-container">
      <div v-for="item in filteredItems" :key="item.id" class="shelf-item">
        <img :src="item.image" :alt="item.name">
        <p>{{ item.name }}</p>
      </div>
    </div>
  </div>
</template>

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

const selectedCategory = ref('all');
const categories = ['食品', '电子', '服饰'];
const items = ref([
  { id: 1, name: '商品A', category: '食品', image: 'url1' }
]);

const filteredItems = computed(() => {
  return selectedCategory.value === 'all' 
    ? items.value 
    : items.value.filter(item => item.category === selectedCategory.value);
});
</script>

动画过渡效果

通过 Vue 的 <transition-group> 实现布局变化时的动画：

<template>
  <transition-group name="shelf" tag="div" class="shelf-container">
    <div v-for="item in items" :key="item.id" class="shelf-item">
      <img :src="item.image" :alt="item.name">
      <p>{{ item.name }}</p>
    </div>
  </transition-group>
</template>

<style scoped>
.shelf-move {
  transition: transform 0.5s ease;
}
</style>

响应式设计建议

通过媒体查询调整货架列数：

@media (max-width: 768px) {
  .shelf-container {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 480px) {
  .shelf-container {
    grid-template-columns: 1fr;
  }
}

性能优化

对于大型数据集，建议使用虚拟滚动库如 vue-virtual-scroller：

npm install vue-virtual-scroller

示例实现：

<template>
  <RecycleScroller 
    class="scroller" 
    :items="items" 
    :item-size="200"
    key-field="id">
    <template #default="{ item }">
      <div class="shelf-item">
        <img :src="item.image" :alt="item.name">
        <p>{{ item.name }}</p>
      </div>
    </template>
  </RecycleScroller>
</template>

vue 实现货架效果