vue3+elementplus tabs 切换
时间: 2023-05-16 09:03:53 浏览: 1066
Vue3和ElementPlus是一组流行的JavaScript库,使用它们可以方便地开发Web应用,尤其是基于组件的应用。而Tabs是一种常用的UI组件,可以让用户在不同的选项卡之间切换并显示不同的内容。在Vue3和ElementPlus中,实现Tabs切换也是非常容易的。
首先,需要在Vue3和ElementPlus中引入相应的组件,并且在页面中定义Tabs的参数和选项卡的内容。例如:
```
<template>
<div>
<el-tabs v-model="activeTab" @tab-click="handleTabClick">
<el-tab-pane label="选项卡一">选项卡一的内容</el-tab-pane>
<el-tab-pane label="选项卡二">选项卡二的内容</el-tab-pane>
<el-tab-pane label="选项卡三">选项卡三的内容</el-tab-pane>
</el-tabs>
</div>
</template>
<script>
import { ElTabs, ElTabPane } from 'element-plus';
import { ref } from 'vue';
export default {
components: {
ElTabs,
ElTabPane,
},
setup() {
const activeTab = ref('选项卡一');
const handleTabClick = (tab) => {
console.log('点击了', tab.name);
};
return {
activeTab,
handleTabClick,
};
},
};
</script>
```
在上面的代码中,定义了一个包含三个选项卡的Tabs组件,每个选项卡都有一个label和对应的内容。activeTab是用来保存当前选中的选项卡的名称,handleTabClick是用来处理切换选项卡时触发的事件。在代码中打印了点击的选项卡的名称,以便验证切换是否成功。
为了在页面中显示Tabs组件,需要在App.vue中引入这个组件并显示出来:
```
<template>
<div id="app">
<Navigation />
<router-view />
<Tabs />
</div>
</template>
<script>
import Tabs from './components/Tabs.vue';
import Navigation from './components/Navigation.vue';
export default {
components: {
Tabs,
Navigation,
},
};
</script>
```
在上面的代码中,引入了Tabs组件并显示出来。同时还引入了另一个自定义组件Navigation来作为页面的导航栏,router-view用来显示页面内容。这里可以根据实际需要调整组件的引入和显示方式。
最后,在页面中点击Tabs的选项卡,就可以看到控制台输出了选项卡的名称,证明切换选项卡已经成功了。这样,就可以轻松实现Vue3和ElementPlus中的Tabs切换功能。