码迷,mamicode.com
首页 > 其他好文 > 详细

vue 中使用 Ant Design 依次提供了三级选项卡

时间:2020-06-12 20:24:16      阅读:144      评论:0      收藏:0      [点我收藏+]

标签:efault   cli   依次   default   bsp   绑定   click   round   样式   

Ant Design 依次提供了三级选项卡,分别用于不同的场景。

  • 卡片式的页签,提供可关闭的样式,常用于容器顶部。

  • 标准线条式页签,用于容器内部的主功能切换,这是最常用的 Tabs。

  • RadioButton 可作为更次级的页签来使用。

切换的时候绑定点击事件 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);
          }
      }
  };
</script>

 Ant Design Tabs标签页

Tabs标签页

vue 中使用 Ant Design 依次提供了三级选项卡

标签:efault   cli   依次   default   bsp   绑定   click   round   样式   

原文地址:https://www.cnblogs.com/dafei4/p/13109781.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!