标签页 Tab

基本用法

标签页 Tabs - 图1

  1. <template lang="html">
  2. <main>
  3.      <div class="demo-hidden">
  4.     <za-panel>
  5.       <za-panel-header title="基本"></za-panel-header>
  6.       <za-panel-body>
  7.         <za-tabs v-model="activeName" @change="handleClick">
  8.           <za-tab-pane label='用户管理' name='first'>
  9.             <div class='content'>用户管理</div>
  10.           </za-tab-pane>
  11.           <za-tab-pane label='配置管理' name='second'>
  12.             <div class='content'>配置管理</div>
  13.           </za-tab-pane>
  14.           <za-tab-pane label='角色管理' name='third'>
  15.             <div class='content'>角色管理</div>
  16.           </za-tab-pane>
  17.         </za-tabs>
  18.       </za-panel-body>
  19.     </za-panel>
  21.     <za-panel>
  22.       <za-panel-header title="可滑动"></za-panel-header>
  23.       <za-panel-body>
  24.         <za-tabs v-model="activeNameSwipe" @change="handleClick" canSwipe>
  25.           <za-tab-pane label='选项卡1' name='first'>
  26.             <div class='content'>试试左滑</div>
  27.           </za-tab-pane>
  28.           <za-tab-pane label='选项卡2' name='second'>
  29.             <div class='content'>试试左右滑</div>
  30.           </za-tab-pane>
  31.           <za-tab-pane label='选项卡3' name='third'>
  32.             <div class='content'>试试右滑</div>
  33.           </za-tab-pane>
  34.         </za-tabs>
  35.       </za-panel-body>
  36.     </za-panel>
  38.     <za-panel>
  39.       <za-panel-header title="联动"></za-panel-header>
  40.       <za-panel-body>
  41.         <za-tabs v-model="activeName6" @change="handleClick2">
  42.           <za-tab-pane label='用户管理' name='first'>
  43.             <div class='content'>用户管理</div>
  44.           </za-tab-pane>
  45.           <za-tab-pane label='配置管理' name='second'>
  46.             <div class='content'>配置管理</div>
  47.           </za-tab-pane>
  48.           <za-tab-pane label='角色管理' name='third'>
  49.             <div class='content'>角色管理</div>
  50.           </za-tab-pane>
  51.         </za-tabs>
  52.         <za-tabs v-model="activeName7" @change="handleClick">
  53.           <za-tab-pane label='用户管理' name='first'>
  54.             <div class='content'>用户管理</div>
  55.           </za-tab-pane>
  56.           <za-tab-pane label='配置管理' name='second'>
  57.             <div class='content'>配置管理</div>
  58.           </za-tab-pane>
  59.           <za-tab-pane label='角色管理' name='third'>
  60.             <div class='content'>角色管理</div>
  61.           </za-tab-pane>
  62.         </za-tabs>
  63.       </za-panel-body>
  64.     </za-panel>
  66.     <za-panel>
  67.       <za-panel-header title="指定默认选项"></za-panel-header>
  68.       <za-panel-body>
  69.         <za-tabs v-model="activeName8" @change="handleClick">
  70.           <za-tab-pane label='用户管理' name='first'>
  71.             <div class='content'>用户管理</div>
  72.           </za-tab-pane>
  73.           <za-tab-pane label='配置管理' name='second'>
  74.             <div class='content'>配置管理</div>
  75.           </za-tab-pane>
  76.           <za-tab-pane label='角色管理' name='third'>
  77.             <div class='content'>角色管理</div>
  78.           </za-tab-pane>
  79.         </za-tabs>
  80.       </za-panel-body>
  81.     </za-panel>
  83.     <za-panel>
  84.       <za-panel-header title="指定线条宽度"></za-panel-header>
  85.       <za-panel-body>
  86.         <za-tabs v-model="activeName9" @change="handleClick" :lineWidth='60'>
  87.           <za-tab-pane label='用户管理' name='first'>
  88.             <div class='content'>用户管理</div>
  89.           </za-tab-pane>
  90.           <za-tab-pane label='配置管理' name='second'>
  91.             <div class='content'>配置管理</div>
  92.           </za-tab-pane>
  93.           <za-tab-pane label='角色管理' name='third'>
  94.             <div class='content'>角色管理</div>
  95.           </za-tab-pane>
  96.         </za-tabs>
  97.       </za-panel-body>
  98.     </za-panel>
  100.     <za-panel>
  101.       <za-panel-header title="禁用指定选项"></za-panel-header>
  102.       <za-panel-body>
  103.         <za-tabs v-model="activeName0" @change="handleClick">
  104.           <za-tab-pane label='用户管理' name='first'>
  105.             <div class='content'>用户管理</div>
  106.           </za-tab-pane>
  107.           <za-tab-pane label='配置管理' name='second' disabled>
  108.             <div class='content'>配置管理</div>
  109.           </za-tab-pane>
  110.           <za-tab-pane label='角色管理' name='third'>
  111.             <div class='content'>角色管理</div>
  112.           </za-tab-pane>
  113.         </za-tabs>
  114.       </za-panel-body>
  115.     </za-panel>
  116.   </div>
  117. </main>
  118. </template>
  119. <script>
  120. export default {
  121.   data() {
  122.     return {
  123.       activeName: 'first',
  124.       activeName2: 'first',
  125.       activeName3: 'first',
  126.       activeName4: 'first',
  127.       activeName5: 'first',
  128.       activeName6: 'first',
  129.       activeName7: 'first',
  130.       activeName8: 'second',
  131.       activeName9: 'first',
  132.       activeName0: 'first',
  133.       activeNameSwipe: 'first',
  134.     }
  135.   },
  136.   methods: {
  137.     handleClick(tab, event) {
  138.       // console.log(tab, event);
  139.     },
  140.     handleClick2(tab, event){
  141.       this.activeName7 = this.activeName6;
  142.     }
  143.   },
  144. };
  145. </script>

API

Tabs Attributes

属性类型默认值可选值／参数说明
prefixClsstringza-tab类名前缀
themestring'primary''default', 'primary', 'info', 'success', 'warning', 'error'主题
v-modelstring绑定当前tab的name值
disabledboolfalse是否禁用
canSwipeboolfalse是否支持滑动切换
lineWidthnumber, string线条宽度

Tabs Event

事件名称说明回调参数
changetab被选中时触发1. 选中tab的vue实例, 2. event 事件对象

Tab Pane Attributes

属性类型默认值可选值／参数说明
disabledboolfalse是否禁用
labelstring标题
namestring标识