Uniapp/lucky_shop
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

refactor(diy-tab): 统一使用生成函数获取tab和panel的key

Browse Source 
使用getTabKey和getPanelKey方法统一生成key，提高代码可维护性
This commit is contained in:
ZF Sun
2026-02-07 14:11:51 +08:00
parent 1c3f759b35
commit 3ddcc665b8
1 changed files with 16 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
components-diy/diy-tab.vue
View File

@@ -6,7 +6,7 @@
<template v-if="mergedValue.tabPosition === 'top'">
<!-- 标签导航 -->
<view class="tab-nav" :style="tabNavStyle">
<view v-for="(tab, idx) in mergedValue.tabs" :key="tab.id || idx" class="tab-item"
<view v-for="(tab, idx) in mergedValue.tabs" :key="getTabKey(tab, idx)" class="tab-item",
:class="{ active: activeTab === idx }"
:style="[tabItemStyle, activeTab === idx ? tabItemActiveStyle : {}]" @tap="switchTab(idx)">
<text class="tab-text" :style="[tabTextStyle, activeTab === idx ? tabTextActiveStyle : {}]">
@@ -28,7 +28,7 @@
<!-- 内容区域 -->
<view class="tab-content" :style="contentStyle">
<view v-for="(tab, idx) in mergedValue.tabs" :key="'panel' + idx" class="tab-panel"
<view v-for="(tab, idx) in mergedValue.tabs" :key="getPanelKey(tab, idx)" class="tab-panel"
:class="{ active: activeTab === idx }"
:style="[panelStyle, activeTab === idx ? panelActiveStyle : {}]">
<view v-if="tab.components && tab.components.length > 0" class="tab-components">
@@ -44,7 +44,7 @@
<template v-else-if="mergedValue.tabPosition === 'bottom'">
<!-- 内容区域 -->
<view class="tab-content" :style="contentStyle">
<view v-for="(tab, idx) in mergedValue.tabs" :key="'panel' + idx" class="tab-panel"
<view v-for="(tab, idx) in mergedValue.tabs" :key="getPanelKey(tab, idx)" class="tab-panel",
:class="{ active: activeTab === idx }"
:style="[panelStyle, activeTab === idx ? panelActiveStyle : {}]">
<view v-if="tab.components && tab.components.length > 0" class="tab-components">
@@ -67,7 +67,7 @@
<!-- 标签导航 -->
<view class="tab-nav" :style="tabNavStyle">
<view v-for="(tab, idx) in mergedValue.tabs" :key="tab.id || idx" class="tab-item"
<view v-for="(tab, idx) in mergedValue.tabs" :key="getTabKey(tab, idx)" class="tab-item",
:class="[{ active: activeTab === idx }, { 'hover-animation': mergedValue.animation }]"
:style="[tabItemStyle, activeTab === idx ? tabItemActiveStyle : {}, tabItemHoverStyle]" @tap="switchTab(idx)">
<text class="tab-text" :style="[tabTextStyle, activeTab === idx ? tabTextActiveStyle : {}, mergedValue.animation ? tabTextHoverStyle : {}]">
@@ -82,7 +82,7 @@
<view class="tab-layout-horizontal">
<!-- 左侧标签导航 -->
<view class="tab-nav tab-nav-vertical" :style="tabNavStyle">
<view v-for="(tab, idx) in mergedValue.tabs" :key="tab.id || idx" class="tab-item tab-item-vertical"
<view v-for="(tab, idx) in mergedValue.tabs" :key="getTabKey(tab, idx)" class="tab-item tab-item-vertical",
:class="[{ active: activeTab === idx }, { 'hover-animation': mergedValue.animation }]"
:style="[tabItemStyle, activeTab === idx ? tabItemActiveStyle : {}, tabItemHoverStyle]" @tap="switchTab(idx)">
<text class="tab-text" :style="[tabTextStyle, activeTab === idx ? tabTextActiveStyle : {}, mergedValue.animation ? tabTextHoverStyle : {}]">
@@ -104,7 +104,7 @@
<!-- 右侧内容区域 -->
<view class="tab-content" :style="contentStyle">
<view v-for="(tab, idx) in mergedValue.tabs" :key="'panel' + idx" class="tab-panel"
<view v-for="(tab, idx) in mergedValue.tabs" :key="getPanelKey(tab, idx)" class="tab-panel",
:class="{ active: activeTab === idx }"
:style="[panelStyle, activeTab === idx ? panelActiveStyle : {}]">
<view v-if="tab.components && tab.components.length > 0" class="tab-components">
@@ -122,7 +122,7 @@
<view class="tab-layout-horizontal">
<!-- 左侧内容区域 -->
<view class="tab-content" :style="contentStyle">
<view v-for="(tab, idx) in mergedValue.tabs" :key="'panel' + idx" class="tab-panel"
<view v-for="(tab, idx) in mergedValue.tabs" :key="getPanelKey(tab, idx)" class="tab-panel",
:class="{ active: activeTab === idx }"
:style="[panelStyle, activeTab === idx ? panelActiveStyle : {}]">
<view v-if="tab.components && tab.components.length > 0" class="tab-components">
@@ -146,7 +146,7 @@
<!-- 右侧标签导航 -->
<view class="tab-nav tab-nav-vertical" :style="tabNavStyle">
<view v-for="(tab, idx) in mergedValue.tabs" :key="tab.id || idx" class="tab-item tab-item-vertical"
<view v-for="(tab, idx) in mergedValue.tabs" :key="getTabKey(tab, idx)" class="tab-item tab-item-vertical",
:class="[{ active: activeTab === idx }, { 'hover-animation': mergedValue.animation }]"
:style="[tabItemStyle, activeTab === idx ? tabItemActiveStyle : {}, tabItemHoverStyle]" @tap="switchTab(idx)">
<text class="tab-text" :style="[tabTextStyle, activeTab === idx ? tabTextActiveStyle : {}, mergedValue.animation ? tabTextHoverStyle : {}]">
@@ -703,6 +703,14 @@ export default {
// 组件方法
methods: {
// 获取面板key
getPanelKey(tab, idx) {
return 'panel-' + (tab.id || idx);
},
// 获取标签项key
getTabKey(tab, idx) {
return 'tab-' + tab.id || idx;
},
// 更新指示器位置（与后端版本一致）
updateIndicatorPosition() {
this.$nextTick(() => {