Vue 轻松构建 Tabs 页

2023-11-14 05:33:41

好的，以下是关于“东拼西凑完成一个‘前端框架’(4) - Tabs页”的文章。

在现代 Web 开发中，构建可重用的组件对于创建复杂而强大的应用程序至关重要。在本文中，我们将介绍如何使用 Vue.js 构建一个可关闭的选项卡组件。我们将从创建一个基础的 Tabs 组件开始，然后添加选中状态，最后为选项卡添加关闭按钮。

布局

首先，我们需要创建一个基础的 Tabs 组件布局。我们将使用 Vue.js 的 template 选项来定义组件的 HTML 结构。我们的布局将包括一个容器元素来容纳选项卡和一个 slot 元素来容纳选项卡的内容。

<template>
  <div class="tabs">
    <ul class="tabs-nav">
      <li v-for="tab in tabs" :key="tab.id" class="tabs-nav-item">
        <a :href="tab.href" @click="selectTab(tab)">{{ tab.title }}</a>
      </li>
    </ul>
    <div class="tabs-content">
      <slot></slot>
    </div>
  </div>
</template>

选中状态

接下来，我们需要添加选中状态。我们将使用 Vue.js 的 data 选项来定义组件的数据，并将 selectedTab 属性设置为 null。然后，我们在 selectTab() 方法中更新 selectedTab 属性，并在 template 中使用 v-if 指令来显示选中的选项卡内容。

export default {
  data() {
    return {
      tabs: [],
      selectedTab: null,
    };
  },
  methods: {
    selectTab(tab) {
      this.selectedTab = tab;
    },
  },
  template: `
    <div class="tabs">
      <ul class="tabs-nav">
        <li v-for="tab in tabs" :key="tab.id" class="tabs-nav-item">
          <a :href="tab.href" @click="selectTab(tab)">{{ tab.title }}</a>
        </li>
      </ul>
      <div class="tabs-content">
        <slot v-if="selectedTab">
          {{ selectedTab.content }}
        </slot>
      </div>
    </div>
  `,
};

增加关闭按钮

最后，我们需要为选项卡添加关闭按钮。我们将使用 Vue.js 的 v-on 指令来监听关闭按钮的点击事件，并在 closeTab() 方法中将选项卡从 tabs 数组中移除。

export default {
  data() {
    return {
      tabs: [],
      selectedTab: null,
    };
  },
  methods: {
    selectTab(tab) {
      this.selectedTab = tab;
    },
    closeTab(tab) {
      this.tabs = this.tabs.filter(t => t !== tab);
    },
  },
  template: `
    <div class="tabs">
      <ul class="tabs-nav">
        <li v-for="tab in tabs" :key="tab.id" class="tabs-nav-item">
          <a :href="tab.href" @click="selectTab(tab)">{{ tab.title }}</a>
          <button @click="closeTab(tab)">×</button>
        </li>
      </ul>
      <div class="tabs-content">
        <slot v-if="selectedTab">
          {{ selectedTab.content }}
        </slot>
      </div>
    </div>
  `,
};