vue中使⽤AntDesign依次提供了三级选项卡Ant Design 依次提供了三级选项卡,分别⽤于不同的场景。
卡⽚式的页签,提供可关闭的样式,常⽤于容器顶部。
标准线条式页签,⽤于容器内部的主功能切换,这是最常⽤的 Tabs。
可作为更次级的页签来使⽤。
切换的时候绑定点击事件 onTabClick 和改变事件 onChange
<template>
<a-tabs  type="card"  @change="onChange" @tabClick="onTabClick">
<a-tab-pane key="key1" tab="选项卡⼀">选项卡⼀内容</a-tab-pane>
<a-tab-pane key="key2" tab="选项卡⼆">选项卡⼆内容</a-tab-pane>
<a-tab-pane key="key3" tab="选项卡三">选项卡三内容</a-tab-pane>
</a-tabs>
</template>
<script>
export default {
methods: {
onChange(tabKey) {
console.log("tab changed : " + tabKey);
},
onTabClick(tabKey) {
console.log("tab clicked : " + tabKey);
}
}
pane};
</script>