让网页更酷炫：手把手教你用 Vue+TS+Vite 实现标签页展示

2024-01-21 04:02:15

前言

标签页是一种常用的网页交互元素，它可以帮助用户在不同的网页之间快速切换，而无需重新加载整个页面。如今，随着前端技术的发展，标签页的实现方式也变得更加多样化。在本文中，我们将使用 Vue+TS+Vite 来实现标签页的动态添加、菜单栏的创建和标签页的切换。

实现步骤

1. 安装依赖

首先，我们需要安装 Vue、TypeScript 和 Vite 的相关依赖。可以使用以下命令：

npm install vue@next typescript vite

2. 创建项目

安装好依赖后，我们就可以创建一个新的 Vue 项目。可以使用以下命令：

vue create my-app --template typescript

3. 配置 TypeScript

接下来，我们需要配置 TypeScript。在项目根目录下的 tsconfig.json 文件中，添加以下内容：

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "moduleResolution": "node",
    "jsx": "react",
    "experimentalDecorators": true
  },
  "include": ["src"]
}

4. 创建组件

现在，我们可以开始创建组件了。在 src 目录下，创建一个名为 Tab.vue 的文件，并添加以下内容：

<template>
  <div class="tab">
    <div class="tab-header">
      <span class="tab-title">{{ title }}</span>
      <span class="tab-close" @click="closeTab">×</span>
    </div>
    <div class="tab-content">
      <slot />
    </div>
  </div>
</template>

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

export default defineComponent({
  props: ['title'],
  setup() {
    const active = ref(false);

    const closeTab = () => {
      active.value = false;
    };

    return {
      active,
      closeTab
    };
  }
});
</script>

<style>
.tab {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.tab-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 10px;
  background-color: #f5f5f5;
}

.tab-title {
  flex: 1;
}

.tab-close {
  cursor: pointer;
}

.tab-content {
  flex: 1;
  overflow: auto;
  padding: 10px;
}
</style>

在 src 目录下，创建一个名为 Tabs.vue 的文件，并添加以下内容：

<template>
  <div class="tabs">
    <div class="tabs-header">
      <button @click="addTab">+</button>
      <span v-for="tab in tabs" :key="tab.title">
        <Tab :title="tab.title" />
      </span>
    </div>
    <div class="tabs-content">
      <slot />
    </div>
  </div>
</template>

<script>
import { defineComponent, ref } from 'vue';
import Tab from './Tab.vue';

export default defineComponent({
  components: {
    Tab
  },
  setup() {
    const tabs = ref([]);

    const addTab = () => {
      const title = `Tab ${tabs.value.length + 1}`;
      tabs.value.push({ title });
    };

    return {
      tabs,
      addTab
    };
  }
});
</script>

<style>
.tabs {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.tabs-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 10px;
  background-color: #f5f5f5;
}

.tabs-header button {
  cursor: pointer;
}

.tabs-content {
  flex: 1;
  overflow: auto;
  padding: 10px;
}
</style>

5. 使用组件

在 src 目录下的 App.vue 文件中，添加以下内容：

<template>
  <div id="app">
    <Tabs>
      <Tab title="Home">
        <h1>Home</h1>
      </Tab>
      <Tab title="About">
        <h1>About</h1>
      </Tab>
    </Tabs>
  </div>
</template>

<script>
import { createApp } from 'vue';
import Tabs from './Tabs.vue';

const app = createApp({
  components: {
    Tabs
  }
});

app.mount('#app');
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
}
</style>