使用element-ui和vue3实现tab页页面框架

安装Element-UI

首先，我们需要安装Element-UI。在终端中输入以下命令：

npm install element-plus

创建Tab页组件

在src/components目录下创建一个名为Tabs.vue的组件文件。代码如下：

<template>
  <div>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="Tab 1" name="1">Content of Tab Pane 1</el-tab-pane>
      <el-tab-pane label="Tab 2" name="2">Content of Tab Pane 2</el-tab-pane>
      <el-tab-pane label="Tab 3" name="3">Content of Tab Pane 3</el-tab-pane>
    </el-tabs>
  </div>
</template>

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

export default {
  setup() {
    const activeName = ref('1');

    const handleClick = (tab) => {
      console.log(tab);
    };

    return {
      activeName,
      handleClick,
    };
  }
}
</script>

在这个组件中，我们使用了Element-UI的<el-tabs>和<el-tab-pane>组件来创建tab页。v-model="activeName"用来绑定当前激活的tab页的名称，@tab-click="handleClick"用来监听tab页的点击事件。在setup()函数中，我们使用了Vue3的ref函数来创建一个响应式的activeName变量，并定义了一个handleClick函数来处理tab页的点击事件。

在App.vue中使用Tabs组件

我们在App.vue组件中导入并使用Tabs组件。代码如下：

<template>
  <div id="app">
    <Tabs />
  </div>
</template>

<script>
import Tabs from "./components/Tabs.vue";

export default {
  name: "App",
  components: {
    Tabs
  }
};
</script>

现在，我们可以在浏览器中看到一个带有三个tab页的页面。

添加动态Tab页

我们可以通过在<el-tabs>组件中动态添加<el-tab-pane>组件来创建动态tab页。在Tabs.vue组件中添加以下代码：

<template>
  <div>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="Tab 1" name="1">Content of Tab Pane 1</el-tab-pane>
      <el-tab-pane label="Tab 2" name="2">Content of Tab Pane 2</el-tab-pane>
      <el-tab-pane label="Tab 3" name="3">Content of Tab Pane 3</el-tab-pane>
      <el-tab-pane v-for="(item, index) in tabs" :key="index" :label="item.label" :name="item.name">{{ item.content }}</el-tab-pane>
    </el-tabs>
  </div>
</template>

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

export default {
  setup() {
    const activeName = ref('1');
    const tabs = ref([
      { label: 'Tab 4', name: '4', content: 'Content of Tab Pane 4' },
      { label: 'Tab 5', name: '5', content: 'Content of Tab Pane 5' },
      { label: 'Tab 6', name: '6', content: 'Content of Tab Pane 6' },
    ]);

    const handleClick = (tab) => {
      console.log(tab);
    };

    return {
      activeName,
      tabs,
      handleClick,
    };
  }
}
</script>

在这个代码中，我们通过<el-tab-pane>组件的v-for指令来动态创建tab页。在setup()函数中，我们使用了Vue3的ref函数来创建一个响应式的tabs变量，用来存储动态tab页的信息。

现在，我们可以在tabs数组中添加新的tab页信息，然后在浏览器中看到它们被动态添加到页面中。

添加关闭按钮

我们可以在每个tab页的标题栏上添加一个关闭按钮，以便用户可以关闭它们。在Tabs.vue组件中添加以下代码：

<template>
  <div>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="Tab 1" name="1">Content of Tab Pane 1</el-tab-pane>
      <el-tab-pane label="Tab 2" name="2">Content of Tab Pane 2</el-tab-pane>
      <el-tab-pane label="Tab 3" name="3">Content of Tab Pane 3</el-tab-pane>
      <el-tab-pane v-for="(item, index) in tabs" :key="index" :label="item.label" :name="item.name">
        {{ item.content }}
        <span class="close-tab" @click="closeTab(index)">x</span>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

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

export default {
  setup() {
    const activeName = ref('1');
    const tabs = ref([
      { label: 'Tab 4', name: '4', content: 'Content of Tab Pane 4' },
      { label: 'Tab 5', name: '5', content: 'Content of Tab Pane 5' },
      { label: 'Tab 6', name: '6', content: 'Content of Tab Pane 6' },
    ]);

    const handleClick = (tab) => {
      console.log(tab);
    };

    const closeTab = (index) => {
      tabs.value.splice(index, 1);
    };

    return {
      activeName,
      tabs,
      handleClick,
      closeTab,
    };
  }
}
</script>

<style>
.close-tab {
  position: absolute;
  top: 6px;
  right: 10px;
  cursor: pointer;
  color: #999;
}
.close-tab:hover {
  color: #333;
}
</style>

在这个代码中，我们在每个tab页的内容区域中添加了一个关闭按钮。可以看到，我们在setup()函数中定义了一个closeTab函数，用来从tabs数组中删除指定的tab页。我们还为关闭按钮添加了一些CSS样式。

现在，我们可以在浏览器中看到每个tab页的标题栏上都有一个关闭按钮，点击它们可以关闭相应的tab页