Vue3面包屑效果

Silence_xl2025-04-23 18:08

代码解释

模板部分 ：使用 visibleBreadcrumbItems 来渲染面包屑项，它会根据点击状态动态显示。
1. 脚本部分 ： - clickedIndex 用于记录点击的面包屑项的索引，初始值为 -1 表示未点击。 - visibleBreadcrumbItems 是一个计算属性，根据 clickedIndex 的值来决定显示哪些面包屑项。如果 clickedIndex 为 -1，则显示全部面包屑项；否则，显示从开始到 clickedIndex 对应的项。 - handleBreadcrumbClick 方法在点击面包屑项时被调用，将 clickedIndex 设置为当前点击项的索引。这样，当你点击某个面包屑项时，该项之后的所有面包屑项就会消失。

xml 复制代码

<template>
  <nav class="flex space-x-2 items-center text-gray-700">
    <span v-for="(item, index) in visibleBreadcrumbItems" :key="index" class="flex items-center cursor-pointer" @click="handleBreadcrumbClick(index)">
      <span v-if="index > 0" class="mr-2 text-gray-400">/</span>
      <span class="text-sm font-medium hover:text-blue-600 transition-colors duration-200">
        {{ item.title }}
      </span>
    </span>
  </nav>
</template>

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

// 模拟面包屑数据，可根据实际情况修改
const breadcrumbItems = ref([
  { title: '首页' },
  { title: '分类' },
  { title: '子分类' },
  { title: '当前页面' }
]);

const clickedIndex = ref(-1);

const visibleBreadcrumbItems = computed(() => {
  if (clickedIndex.value === -1) {
    return breadcrumbItems.value;
  }
  return breadcrumbItems.value.slice(0, clickedIndex.value + 1);
});

const handleBreadcrumbClick = (index) => {
  clickedIndex.value = index;
};
</script>

<style scoped>
/* 样式可以根据需求调整 */
.flex {
  display: flex;
}
.space-x-2 > * + * {
  margin-left: 0.5rem;
}
.items-center {
  align-items: center;
}
.text-gray-700 {
  color: #4b5563;
}
.text-gray-400 {
  color: #9ca3af;
}
.text-sm {
  font-size: 0.875rem;
}
.font-medium {
  font-weight: 500;
}
.cursor-pointer {
  cursor: pointer;
}
.hover:text-blue-600:hover {
  color: #2563eb;
}
.transition-colors {
  transition-property: color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}
</style>