自定义tabs（支持横向/竖向排列）

效果展示：

组件代码：

CustomTabs.vue组件代码如下：

<template> <div class="custom-tabs" :class="[`tabs-${type}`, { 'tabs-vertical': type === 'vertical' }]"> <!-- 横向布局 --> <template v-if="type === 'horizontal'"> <!-- 左侧翻页按钮 --> <div class="scroll-btn left-btn" :class="{ disabled: !canScrollLeft }" @click="scrollLeft" v-show="showScrollButtons"> <span>&lt;</span> </div> <!-- 标签页容器 --> <div class="tabs-container" ref="containerRef"> <div class="tabs-wrap" ref="wrapRef" :style="{ transform: `translateX(${translateX}px)` }"> <!-- 标签页 --> <div v-for="(tab, index) in tabs" :key="index" class="tab-item" :class="{ active: modelValue === tab.value }" @click="handleTabClick(tab.value)" ref="tabRefs" > {{ tab.label }} </div> <!-- 底部滑动条 --> <div class="active-bar" :style="activeBarStyle"></div> </div> </div> <!-- 右侧翻页按钮 --> <div class="scroll-btn right-btn" :class="{ disabled: !canScrollRight }" @click="scrollRight" v-show="showScrollButtons"> <span>&gt;</span> </div> </template> <!-- 竖向布局 --> <template v-else> <!-- 上侧翻页按钮 --> <div class="scroll-btn top-btn" :class="{ disabled: !canScrollTop }" @click="scrollTop" v-show="showScrollButtons"> <span>↑</span> </div> <!-- 标签页容器 --> <div class="tabs-container" ref="containerRef"> <div class="tabs-wrap" ref="wrapRef" :style="{ transform: `translateY(${translateY}px)` }"> <!-- 标签页 --> <div v-for="(tab, index) in tabs" :key="index" class="tab-item" :class="{ active: modelValue === tab.value }" @click="handleTabClick(tab.value)" ref="tabRefs" > {{ tab.label }} </div> <!-- 右侧滑动条 --> <div class="active-bar" :style="activeBarStyle"></div> </div> </div> <!-- 下侧翻页按钮 --> <div class="scroll-btn bottom-btn" :class="{ disabled: !canScrollBottom }" @click="scrollBottom" v-show="showScrollButtons"> <span>↓</span> </div> </template> </div> </template> <script setup> import { ref, computed, watch, onMounted, nextTick, onUnmounted } from "vue"; const props = defineProps({ modelValue: { type: [String, Number], required: true }, tabs: { type: Array, required: true, default: () => [] }, type: { type: String, default: "horizontal", validator: value => ["horizontal", "vertical"].includes(value) }, height: { type: String, default: "300px" } }); const emit = defineEmits(["update:modelValue", "tab-click"]); // Refs const containerRef = ref(null); const wrapRef = ref(null); const tabRefs = ref([]); // 状态 const translateX = ref(0); const translateY = ref(0); const containerWidth = ref(0); const containerHeight = ref(0); const wrapWidth = ref(0); const wrapHeight = ref(0); const activeTabIndex = ref(0); // 计算属性 const showScrollButtons = computed(() => { if (props.type === "horizontal") { return wrapWidth.value > containerWidth.value; } else { return wrapHeight.value > containerHeight.value; } }); const canScrollLeft = computed(() => translateX.value < 0); const canScrollRight = computed(() => { const remainingWidth = wrapWidth.value + translateX.value; return remainingWidth > containerWidth.value; }); const canScrollTop = computed(() => translateY.value < 0); const canScrollBottom = computed(() => { const remainingHeight = wrapHeight.value + translateY.value; return remainingHeight > containerHeight.value; }); // 激活标签的滑动条样式 const activeBarStyle = computed(() => { if (!tabRefs.value.length || activeTabIndex.value >= tabRefs.value.length) { return props.type === "horizontal" ? { width: "0px", transform: "translateX(0px)" } : { height: "0px", transform: "translateY(0px)" }; } const activeTab = tabRefs.value[activeTabIndex.value]; if (!activeTab) { return props.type === "horizontal" ? { width: "0px", transform: "translateX(0px)" } : { height: "0px", transform: "translateY(0px)" }; } if (props.type === "horizontal") { return { width: `${activeTab.offsetWidth}px`, transform: `translateX(${activeTab.offsetLeft}px)` }; } else { return { height: `${activeTab.offsetHeight}px`, transform: `translateY(${activeTab.offsetTop}px)` }; } }); // 更新容器和包裹层尺寸 const updateDimensions = () => { if (!containerRef.value || !wrapRef.value) return; containerWidth.value = containerRef.value.offsetWidth; containerHeight.value = containerRef.value.offsetHeight; wrapWidth.value = wrapRef.value.scrollWidth; wrapHeight.value = wrapRef.value.scrollHeight; // 重置偏移值为0，确保靠左/上对齐 if (props.type === "horizontal") { if (wrapWidth.value <= containerWidth.value) { translateX.value = 0; } } else { if (wrapHeight.value <= containerHeight.value) { translateY.value = 0; } } // 确保当前激活标签可见 ensureActiveTabVisible(); }; // 左右/上下翻页 const scrollLeft = () => { if (!canScrollLeft.value) return; const scrollAmount = Math.min(containerWidth.value * 0.8, -translateX.value); translateX.value += scrollAmount; }; const scrollRight = () => { if (!canScrollRight.value) return; const remainingWidth = wrapWidth.value + translateX.value - containerWidth.value; const scrollAmount = Math.min(containerWidth.value * 0.8, remainingWidth); translateX.value -= scrollAmount; }; const scrollTop = () => { if (!canScrollTop.value) return; const scrollAmount = Math.min(containerHeight.value * 0.8, -translateY.value); translateY.value += scrollAmount; }; const scrollBottom = () => { if (!canScrollBottom.value) return; const remainingHeight = wrapHeight.value + translateY.value - containerHeight.value; const scrollAmount = Math.min(containerHeight.value * 0.8, remainingHeight); translateY.value -= scrollAmount; }; // 确保激活标签可见 const ensureActiveTabVisible = () => { // 如果没有溢出，直接返回 if (props.type === "horizontal") { if (wrapWidth.value <= containerWidth.value) { translateX.value = 0; return; } } else { if (wrapHeight.value <= containerHeight.value) { translateY.value = 0; return; } } nextTick(() => { if (!tabRefs.value.length || activeTabIndex.value >= tabRefs.value.length) return; const activeTab = tabRefs.value[activeTabIndex.value]; if (!activeTab) return; if (props.type === "horizontal") { const tabLeft = activeTab.offsetLeft; const tabRight = tabLeft + activeTab.offsetWidth; // 如果标签在可视区域左侧 if (tabLeft < -translateX.value) { translateX.value = -tabLeft; } // 如果标签在可视区域右侧 else if (tabRight > -translateX.value + containerWidth.value) { translateX.value = -(tabRight - containerWidth.value); } // 限制边界 clampTranslateX(); } else { const tabTop = activeTab.offsetTop; const tabBottom = tabTop + activeTab.offsetHeight; // 如果标签在可视区域上方 if (tabTop < -translateY.value) { translateY.value = -tabTop; } // 如果标签在可视区域下方 else if (tabBottom > -translateY.value + containerHeight.value) { translateY.value = -(tabBottom - containerHeight.value); } // 限制边界 clampTranslateY(); } }); }; // 限制平移范围 const clampTranslateX = () => { const maxTranslate = Math.min(0, containerWidth.value - wrapWidth.value); translateX.value = Math.max(maxTranslate, Math.min(0, translateX.value)); }; const clampTranslateY = () => { const maxTranslate = Math.min(0, containerHeight.value - wrapHeight.value); translateY.value = Math.max(maxTranslate, Math.min(0, translateY.value)); }; // 标签点击处理 const handleTabClick = value => { emit("update:modelValue", value); emit("tab-click", value); // 查找激活的索引 const index = props.tabs.findIndex(tab => tab.value === value); if (index !== -1) { activeTabIndex.value = index; ensureActiveTabVisible(); } }; // 监听值变化 watch( () => props.modelValue, newVal => { const index = props.tabs.findIndex(tab => tab.value === newVal); if (index !== -1) { activeTabIndex.value = index; ensureActiveTabVisible(); } } ); // 监听tabs变化 watch( () => props.tabs, () => { nextTick(() => { updateDimensions(); }); }, { deep: true } ); // 监听type变化 watch( () => props.type, () => { translateX.value = 0; translateY.value = 0; nextTick(() => { updateDimensions(); }); } ); // 生命周期 onMounted(() => { nextTick(() => { updateDimensions(); }); // 监听窗口大小变化 window.addEventListener("resize", updateDimensions); // 使用ResizeObserver监听容器大小变化 const resizeObserver = new ResizeObserver(updateDimensions); if (containerRef.value) { resizeObserver.observe(containerRef.value); } // 清理 onUnmounted(() => { window.removeEventListener("resize", updateDimensions); resizeObserver.disconnect(); }); }); // 初始查找激活标签索引 const initActiveIndex = () => { const index = props.tabs.findIndex(tab => tab.value === props.modelValue); activeTabIndex.value = index !== -1 ? index : 0; }; initActiveIndex(); </script> <style scoped> .custom-tabs { display: inline-flex; position: relative; /* width: 100%; */ } /* 横向布局 */ .tabs-horizontal { flex-direction: row; align-items: center; height: 40px; border-bottom: 1px solid #e4e7ed; } .tabs-horizontal .tabs-container { flex: 1; overflow: hidden; position: relative; height: 100%; } .tabs-horizontal .tabs-wrap { display: inline-flex; position: relative; height: 100%; white-space: nowrap; transition: transform 0.3s ease; min-width: 100%; } .tabs-horizontal .tab-item { position: relative; display: inline-flex; align-items: center; justify-content: center; padding: 0 20px; height: 100%; font-size: 14px; color: #606266; cursor: pointer; user-select: none; transition: all 0.3s ease; flex-shrink: 0; } .tabs-horizontal .tab-item:hover { color: #409eff; } .tabs-horizontal .tab-item.active { color: #409eff; font-weight: 500; } .tabs-horizontal .active-bar { position: absolute; bottom: 0; left: 0; height: 2px; background-color: #409eff; transition: all 0.3s ease; z-index: 1; } .tabs-horizontal .scroll-btn { display: flex; align-items: center; justify-content: center; width: 32px; height: 100%; color: #606266; cursor: pointer; user-select: none; transition: color 0.3s; background: #fff; border-bottom: 1px solid #e4e7ed; z-index: 2; flex-shrink: 0; } .tabs-horizontal .scroll-btn:hover { color: #409eff; } .tabs-horizontal .scroll-btn.disabled { color: #c0c4cc; cursor: not-allowed; } .tabs-horizontal .scroll-btn.left-btn { border-right: 1px solid #e4e7ed; } .tabs-horizontal .scroll-btn.right-btn { border-left: 1px solid #e4e7ed; } .tabs-horizontal .scroll-btn span { font-size: 14px; } /* 竖向布局 */ .tabs-vertical { flex-direction: column; height: v-bind(height); border-right: 1px solid #e4e7ed; } .tabs-vertical .tabs-container { flex: 1; overflow: hidden; position: relative; width: 100%; } .tabs-vertical .tabs-wrap { display: inline-flex; flex-direction: column; position: relative; /* width: 100%; */ transition: transform 0.3s ease; min-height: 100%; } .tabs-vertical .tab-item { position: relative; display: flex; align-items: center; padding: 12px 20px; font-size: 14px; color: #606266; cursor: pointer; user-select: none; transition: all 0.3s ease; flex-shrink: 0; white-space: nowrap; } .tabs-vertical .tab-item:hover { color: #409eff; background-color: #f5f7fa; } .tabs-vertical .tab-item.active { color: #409eff; font-weight: 500; background-color: #ecf5ff; } .tabs-vertical .active-bar { position: absolute; top: 0; right: 0; width: 2px; background-color: #409eff; transition: all 0.3s ease; z-index: 1; } .tabs-vertical .scroll-btn { display: flex; align-items: center; justify-content: center; width: 100%; height: 32px; color: #606266; cursor: pointer; user-select: none; transition: color 0.3s; background: #fff; flex-shrink: 0; z-index: 2; } .tabs-vertical .scroll-btn:hover { color: #409eff; background-color: #f5f7fa; } .tabs-vertical .scroll-btn.disabled { color: #c0c4cc; cursor: not-allowed; background-color: #fff; } .tabs-vertical .scroll-btn.top-btn { border-bottom: 1px solid #e4e7ed; } .tabs-vertical .scroll-btn.bottom-btn { border-top: 1px solid #e4e7ed; } .tabs-vertical .scroll-btn span { font-size: 14px; } </style>

使用方式：

<template> <div class="demo-container"> <h2>支持横向和竖向的Tabs组件</h2> <div class="demo-section"> <h3>横向布局（默认）</h3> <div style="margin-bottom: 20px"> <label> <input type="radio" v-model="direction" value="horizontal" /> 横向 </label> <label style="margin-left: 20px"> <input type="radio" v-model="direction" value="vertical" /> 竖向 </label> </div> <CustomTabs v-model="activeTab" :tabs="tabs" :type="direction" :height="'400px'" @tab-click="handleTabClick" /> <div class="tab-content"> <div v-if="activeTab === 'home'"> <h4>首页</h4> <p>这是首页的内容...</p> </div> <div v-if="activeTab === 'products'"> <h4>产品中心</h4> <p>展示我们的产品和服务...</p> </div> <div v-if="activeTab === 'cases'"> <h4>客户案例</h4> <p>成功案例展示...</p> </div> <div v-if="activeTab === 'about'"> <h4>关于我们</h4> <p>公司介绍和团队信息...</p> </div> <div v-if="activeTab === 'contact'"> <h4>联系我们</h4> <p>联系方式和地址...</p> </div> </div> </div> <div class="demo-section"> <h3>动态切换演示</h3> <div class="demo-grid"> <div class="demo-box"> <h4>横向窄容器（显示滚动按钮）</h4> <CustomTabs v-model="activeTab2" :tabs="longTabs" type="horizontal" style="width: 400px" /> </div> <div class="demo-box"> <h4>横向宽容器（不显示滚动按钮）</h4> <CustomTabs v-model="activeTab2" :tabs="longTabs" type="horizontal" style="width: 800px" /> </div> <div class="demo-box"> <h4>竖向矮容器（显示滚动按钮）</h4> <CustomTabs v-model="activeTab2" :tabs="longTabs" type="vertical" height="200px" /> </div> <div class="demo-box"> <h4>竖向高容器（不显示滚动按钮）</h4> <CustomTabs v-model="activeTab2" :tabs="longTabs" type="vertical" height="400px" /> </div> </div> </div> </div> </template> <script setup> import { ref, watch } from "vue"; import CustomTabs from "@/components/customTabs/index.vue"; const direction = ref("horizontal"); const activeTab = ref("home"); const activeTab2 = ref("tab1"); const tabs = ref([ { label: "首页", value: "home" }, { label: "产品中心", value: "products" }, { label: "客户案例", value: "cases" }, { label: "关于我们", value: "about" }, { label: "联系我们", value: "contact" } ]); const longTabs = ref([ { label: "标签页 1", value: "tab1" }, { label: "标签页 2", value: "tab2" }, { label: "标签页 3", value: "tab3" }, { label: "标签页 4", value: "tab4" }, { label: "标签页 5", value: "tab5" }, { label: "标签页 6", value: "tab6" }, { label: "标签页 7", value: "tab7" }, { label: "标签页 8", value: "tab8" } ]); const handleTabClick = value => { console.log("标签被点击:", value); }; // 监听方向变化时重置激活标签 watch(direction, () => { activeTab.value = "home"; }); </script> <style scoped> .demo-container { padding: 20px; margin: 0 auto; } .demo-section { margin: 40px 0; padding: 20px; border: 1px solid #e4e7ed; border-radius: 8px; } .demo-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 20px; } .demo-box { padding: 15px; border: 1px solid #dcdfe6; border-radius: 4px; background: #f8f9fa; } .demo-box h4 { margin: 0 0 10px 0; font-size: 14px; color: #606266; } .tab-content { padding: 20px; background: #f5f7fa; margin-top: 20px; border-radius: 4px; min-height: 150px; } label { display: inline-flex; align-items: center; cursor: pointer; } input[type="radio"] { margin-right: 5px; } h2 { color: #303133; border-bottom: 1px solid #e4e7ed; padding-bottom: 10px; } h3 { color: #606266; margin-bottom: 15px; } h4 { color: #303133; margin-bottom: 10px; } </style>