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>
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论