Vue3从零到一实战：打造动态详情页，优化样式，实现Tab栏联动功能

前端

2023-10-26 16:42:30

优化 Vue3 详情页：提升样式与联动功能

导言

在我们的 Vue3 实战系列中，我们已经创建了一个详情页。为了增强用户体验，我们现在将优化其样式并实现 Tab 栏和内容区域之间的联动功能。

样式优化

我们采用以下策略优化样式：

使用语义化 HTML 标签以提高代码可读性
采用模块化 CSS 以便于管理和重用
利用 Sass 预处理器以简化编写

优化后的样式代码：

.detail-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.detail-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.detail-title {
  font-size: 24px;
}

.detail-tabs {
  display: flex;
  gap: 10px;
}

.detail-tab {
  padding: 10px 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
  cursor: pointer;
}

.detail-tab--active {
  background-color: #ccc;
  border-color: #ccc;
}

.detail-content {
  flex: 1;
  padding: 20px;
  background-color: #fff;
}

.detail-content-body {
  font-size: 16px;
  line-height: 1.5;
}

Tab 栏联动功能

Tab 栏联动功能允许用户在不同的 Tab 之间切换，并更新内容区域中的相应内容。我们使用 Vue3 的 v-model 指令实现这一功能：

<template>
  <div class="detail-container">
    <div class="detail-header">
      <div class="detail-title">{{ title }}</div>
      <div class="detail-tabs">
        <div
          v-for="tab in tabs"
          :key="tab.id"
          @click="changeTab(tab.id)"
          :class="{ 'detail-tab--active': tab.id === activeTabId }"
          class="detail-tab"
        >
          {{ tab.title }}
        </div>
      </div>
    </div>
    <div class="detail-content">{{ activeTabContent }}</div>
  </div>
</template>

<script>
import { reactive, toRefs } from 'vue';

export default {
  setup() {
    const state = reactive({
      activeTabId: 1,
      tabs: [
        { id: 1, title: 'Tab 1' },
        { id: 2, title: 'Tab 2' },
        { id: 3, title: 'Tab 3' },
      ],
      tabContents: [
        'Content for Tab 1',
        'Content for Tab 2',
        'Content for Tab 3',
      ],
    });

    const changeTab = (tabId) => {
      state.activeTabId = tabId;
    };

    return {
      ...toRefs(state),
      changeTab,
    };
  },
};
</script>