Tabs 标签页

Scan me!

用于创建包含内容区域的标签页

引入

  1. import { Tabs } from 'mand-mobile'
  3. Vue.component(Tabs.name, Tabs)

代码演示

基本

  1. <template>
  2.   <div class="md-example-child md-example-child-tabs md-example-child-tabs-0">
  3.     <md-tabs
  4.       :titles="titles"
  5.     >
  6.       <div v-for="(title, index) of titles" :key="index">
  7.         {{title}}的内容
  8.       </div>
  9.     </md-tabs>
  10.   </div>
  11. </template>
  13. <script>
  14. import {Tabs} from 'mand-mobile'
  16. export default {
  17.   name: 'tab-bar-demo',
  18.   components: {
  19.     [Tabs.name]: Tabs,
  20.   },
  21.   data() {
  22.     return {
  23.       titles: ['第一', '第二', '第三', '第四'],
  24.     }
  25.   },
  26. }
  28. </script>
  29.

scope-slot

  1. <template>
  2.   <div class="md-example-child md-example-child-tabs md-example-child-tabs-10">
  3.     <md-tabs
  4.       :titles="titles"
  5.       upside-down
  6.     >
  7.       <div slot="title"
  8.         slot-scope="props">
  9.         <md-icon name="hollow-plus" size="sm"></md-icon>
  10.         {{props.prefix}}{{props.title}}
  11.       </div>
  12.       <div v-for="(title, index) of titles" :key="index">
  13.         {{title.title}}的内容
  14.       </div>
  15.     </md-tabs>
  16.   </div>
  17. </template>
  19. <script>
  20. import {Tabs, Icon} from 'mand-mobile'
  22. export default {
  23.   name: 'tab-bar-demo',
  24.   components: {
  25.     [Tabs.name]: Tabs,
  26.     [Icon.name]: Icon,
  27.   },
  28.   data() {
  29.     return {
  30.       titles: [
  31.         {
  32.           title: '第1',
  33.           prefix: '我',
  34.         },
  35.         {
  36.           title: '第2',
  37.           prefix: '你',
  38.         },
  39.         {
  40.           title: '第3',
  41.           prefix: '他',
  42.         },
  43.       ],
  44.     }
  45.   },
  46. }
  48. </script>
  49.

指定默认标签

默认标签2
  1. <template>
  2.   <div class="md-example-child md-example-child-tabs md-example-child-tabs-2">
  3.     <md-tabs
  4.       :titles="titles"
  5.       :default-index="2"
  6.       show-ink-bar
  7.     >
  8.       <div v-for="(title, index) of titles" :key="index">
  9.         {{title}}的内容
  10.       </div>
  11.     </md-tabs>
  12.   </div>
  13. </template>
  15. <script>
  16. import {Tabs} from 'mand-mobile'
  18. export default {
  19.   name: 'tab-bar-demo',
  20.   components: {
  21.     [Tabs.name]: Tabs,
  22.   },
  23.   data() {
  24.     return {
  25.       titles: ['第一', '第二', '第三', '第四'],
  26.     }
  27.   },
  28. }
  30. </script>
  31.

禁用下划线动画

  1. <template>
  2.   <div class="md-example-child md-example-child-tabs md-example-child-tabs-4">
  3.     <md-tabs
  4.       :titles="titles"
  5.       :ink-bar-animate="false"
  6.       show-ink-bar
  7.     >
  8.       <div v-for="(title, index) of titles" :key="index">
  9.         {{title}}的内容
  10.       </div>
  11.     </md-tabs>
  12.   </div>
  13. </template>
  15. <script>
  16. import {Tabs} from 'mand-mobile'
  18. export default {
  19.   name: 'tab-bar-demo',
  20.   components: {
  21.     [Tabs.name]: Tabs,
  22.   },
  23.   data() {
  24.     return {
  25.       titles: ['第一', '第二', '第三', '第四'],
  26.     }
  27.   },
  28. }
  30. </script>
  31.

监听点击事件

  1. <template>
  2.   <div class="md-example-child md-example-child-tabs md-example-child-tabs-6">
  3.     <md-tabs
  4.       :titles="titles"
  5.       show-ink-bar
  6.       @indexChanged="alert"
  7.     >
  8.       <div v-for="(title, index) of titles" :key="index">
  9.         {{title}}的内容
  10.       </div>
  11.     </md-tabs>
  12.   </div>
  13. </template>
  15. <script>
  16. import {Tabs, Toast} from 'mand-mobile'
  18. export default {
  19.   name: 'tab-bar-demo',
  20.   components: {
  21.     [Tabs.name]: Tabs,
  22.   },
  23.   data() {
  24.     return {
  25.       titles: ['第一', '第二', '第三', '第四'],
  26.     }
  27.   },
  28.   methods: {
  29.     alert(index, preIndex) {
  30.       Toast.succeed(`index由${preIndex}切换为${index}`)
  31.     },
  32.   },
  33. }
  35. </script>
  36.

无动画

  1. <template>
  2.   <div class="md-example-child md-example-child-tabs md-example-child-tabs-8">
  3.     <md-tabs
  4.       :titles="titles"
  5.       noslide
  6.     >
  7.       <div v-for="(title, index) of titles" :key="index">
  8.         {{title}}的内容
  9.       </div>
  10.     </md-tabs>
  11.   </div>
  12. </template>
  14. <script>
  15. import {Tabs} from 'mand-mobile'
  17. export default {
  18.   name: 'tab-bar-demo',
  19.   components: {
  20.     [Tabs.name]: Tabs,
  21.   },
  22.   data() {
  23.     return {
  24.       titles: ['第一', '第二', '第三', '第四'],
  25.     }
  26.   },
  27. }
  29. </script>
  30.

不带下划线

  1. <template>
  2.   <div class="md-example-child md-example-child-tabs md-example-child-tabs-1">
  3.     <md-tabs
  4.       :titles="titles"
  5.       :show-ink-bar="false"
  6.     >
  7.       <div v-for="(title, index) of titles" :key="index">
  8.         {{title}}的内容
  9.       </div>
  10.     </md-tabs>
  11.   </div>
  12. </template>
  14. <script>
  15. import {Tabs} from 'mand-mobile'
  17. export default {
  18.   name: 'tab-bar-demo',
  19.   components: {
  20.     [Tabs.name]: Tabs,
  21.   },
  22.   data() {
  23.     return {
  24.       titles: ['第一', '第二', '第三', '第四'],
  25.     }
  26.   },
  27. }
  29. </script>
  30.  
  31.

设置标题栏边距

  1. <template>
  2.   <div class="md-example-child md-example-child-tabs md-example-child-tabs-11">
  3.     <md-tabs
  4.       :titles="titles"
  5.     >
  6.       <div v-for="(title, index) of titles" :key="index">
  7.         {{title}}的内容
  8.       </div>
  9.     </md-tabs>
  10.   </div>
  11. </template>
  13. <script>
  14. import {Tabs} from 'mand-mobile'
  16. export default {
  17.   name: 'tab-bar-demo',
  18.   components: {
  19.     [Tabs.name]: Tabs,
  20.   },
  21.   data() {
  22.     return {
  23.       titles: ['第一', '第二', '第三', '第四'],
  24.     }
  25.   },
  26. }
  28. </script>
  30. <style lang="stylus">
  31. .md-example-child-tabs-11
  32.   .md-tab-bar
  33.     padding 0 100px
  34. </style>
  35.  
  36.

指定下划线长度

  1. <template>
  2.   <div class="md-example-child md-example-child-tabs md-example-child-tabs-3">
  3.     <md-tabs
  4.       :titles="titles"
  5.       :ink-bar-length="40"
  6.       show-ink-bar
  7.     >
  8.       <div v-for="(title, index) of titles" :key="index">
  9.         {{title}}的内容
  10.       </div>
  11.     </md-tabs>
  12.   </div>
  13. </template>
  15. <script>
  16. import {Tabs} from 'mand-mobile'
  18. export default {
  19.   name: 'tab-bar-demo',
  20.   components: {
  21.     [Tabs.name]: Tabs,
  22.   },
  23.   data() {
  24.     return {
  25.       titles: ['第一', '第二', '第三', '第四'],
  26.     }
  27.   },
  28. }
  30. </script>
  31.  
  32.

自定义内容

  1. <template>
  2.   <div class="md-example-child md-example-child-tabs md-example-child-tabs-5">
  3.     <md-tabs
  4.       show-ink-bar
  5.     >
  6.       <div slot="title">
  7.         <div>
  8.           <md-icon name="hollow-plus" size="sm"></md-icon>
  9.           我
  10.         </div>
  11.       </div>
  12.       <div>
  13.         爱你
  14.       </div>
  15.       <div slot="title">
  16.         <div>
  17.           <md-icon name="cross" size="sm"></md-icon>
  18.           你
  19.         </div>
  20.       </div>
  21.       <div>
  22.         爱他
  23.       </div>
  24.       <div slot="title">
  25.         <div>
  26.           <md-icon name="right" size="sm"></md-icon>
  27.           他
  28.         </div>
  29.       </div>
  30.       <div>
  31.         爱她
  32.       </div>
  33.     </md-tabs>
  34.   </div>
  35. </template>
  37. <script>
  38. import {Icon, Tabs} from 'mand-mobile'
  40. export default {
  41.   name: 'tab-bar-demo',
  42.   components: {
  43.     [Icon.name]: Icon,
  44.     [Tabs.name]: Tabs,
  45.   },
  46. }
  48. </script>
  49.

通过公共方法切换 selectTab(2)

  1. <template>
  2.   <div class="md-example-child md-example-child-tabs md-example-child-tabs-7">
  3.     <md-tabs
  4.       ref="tabs"
  5.       :titles="titles"
  6.       show-ink-bar
  7.     >
  8.       <div v-for="(title, index) of titles" :key="index">
  9.         {{title}}的内容
  10.       </div>
  11.     </md-tabs>
  12.   </div>
  13. </template>
  15. <script>
  16. import {Tabs} from 'mand-mobile'
  18. export default {
  19.   name: 'tab-bar-demo',
  20.   components: {
  21.     [Tabs.name]: Tabs,
  22.   },
  23.   data() {
  24.     return {
  25.       titles: ['第一', '第二', '第三', '第四'],
  26.     }
  27.   },
  28.   mounted() {
  29.     window.triggerTabs = () => {
  30.       this.$refs.tabs.selectTab(2)
  31.     }
  32.   },
  33. }
  35. </script>
  36.

标题栏处于下方

  1. <template>
  2.   <div class="md-example-child md-example-child-tabs md-example-child-tabs-9">
  3.     <md-tabs
  4.       :titles="titles"
  5.       upside-down
  6.     >
  7.       <div v-for="(title, index) of titles" :key="index">
  8.         {{title}}的内容
  9.       </div>
  10.     </md-tabs>
  11.   </div>
  12. </template>
  14. <script>
  15. import {Tabs} from 'mand-mobile'
  17. export default {
  18.   name: 'tab-bar-demo',
  19.   components: {
  20.     [Tabs.name]: Tabs,
  21.   },
  22.   data() {
  23.     return {
  24.       titles: ['第一', '第二', '第三', '第四'],
  25.     }
  26.   },
  27. }
  29. </script>
  30.

API

Tabs Props

属性说明类型默认值备注
titles标签标题数组Array-传入该数组会直接根据数组内容渲染组件，也可以不使用该属性，直接在控件中插入定制的标题按钮。在不使用scope-slot时，该值为字符串数组；在使用scope-slot时，该值为对象数组，每个对象会作为props供父组件使用
show-ink-bar是否显示下划线Booleantrue-
ink-bar-length下划线宽度Number70该数值为下划线占标签按钮宽度的百分比，须在0-100之间
ink-bar-animate是否启用下划线动画Booleantrue-
default-index默认激活的标签索引Number0-
noslide动画样式Booleanfalse如果为真，则不显示滑动动画

Tabs Methods

selectTab(index)

选择某一标签

属性说明类型
index标签索引Number

Tabs Events

@change(index, preIndex)

标签索引发生变化事件

属性说明类型
index改变后的标签索引Number
preIndex改变前的标签索引Number