Tabs 标签页

Scan me!

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

引入

  1. import { Tabs } from 'mand-mobile'
  2. 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>
  12. <script>
  13. import {Tabs} from 'mand-mobile'
  14. export default {
  15. name: 'tab-bar-demo',
  16. components: {
  17. [Tabs.name]: Tabs,
  18. },
  19. data() {
  20. return {
  21. titles: ['第一', '第二', '第三', '第四'],
  22. }
  23. },
  24. }
  25. </script>

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>
  18. <script>
  19. import {Tabs, Icon} from 'mand-mobile'
  20. export default {
  21. name: 'tab-bar-demo',
  22. components: {
  23. [Tabs.name]: Tabs,
  24. [Icon.name]: Icon,
  25. },
  26. data() {
  27. return {
  28. titles: [
  29. {
  30. title: '第1',
  31. prefix: '我',
  32. },
  33. {
  34. title: '第2',
  35. prefix: '你',
  36. },
  37. {
  38. title: '第3',
  39. prefix: '他',
  40. },
  41. ],
  42. }
  43. },
  44. }
  45. </script>

指定默认标签

默认标签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>
  14. <script>
  15. 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. }
  27. </script>

禁用下划线动画

  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>
  14. <script>
  15. 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. }
  27. </script>

监听点击事件

  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>
  14. <script>
  15. import {Tabs, Toast} 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. methods: {
  27. alert(index, preIndex) {
  28. Toast.succeed(`index${preIndex}切换为${index}`)
  29. },
  30. },
  31. }
  32. </script>

无动画

  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>
  13. <script>
  14. import {Tabs} from 'mand-mobile'
  15. export default {
  16. name: 'tab-bar-demo',
  17. components: {
  18. [Tabs.name]: Tabs,
  19. },
  20. data() {
  21. return {
  22. titles: ['第一', '第二', '第三', '第四'],
  23. }
  24. },
  25. }
  26. </script>

不带下划线

  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>
  13. <script>
  14. import {Tabs} from 'mand-mobile'
  15. export default {
  16. name: 'tab-bar-demo',
  17. components: {
  18. [Tabs.name]: Tabs,
  19. },
  20. data() {
  21. return {
  22. titles: ['第一', '第二', '第三', '第四'],
  23. }
  24. },
  25. }
  26. </script>
  27.  

设置标题栏边距

  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>
  12. <script>
  13. import {Tabs} from 'mand-mobile'
  14. export default {
  15. name: 'tab-bar-demo',
  16. components: {
  17. [Tabs.name]: Tabs,
  18. },
  19. data() {
  20. return {
  21. titles: ['第一', '第二', '第三', '第四'],
  22. }
  23. },
  24. }
  25. </script>
  26. <style lang="stylus">
  27. .md-example-child-tabs-11
  28. .md-tab-bar
  29. padding 0 100px
  30. </style>
  31.  

指定下划线长度

  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>
  14. <script>
  15. 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. }
  27. </script>
  28.  

自定义内容

  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. </div>
  10. </div>
  11. <div>
  12. 爱你
  13. </div>
  14. <div slot="title">
  15. <div>
  16. <md-icon name="cross" size="sm"></md-icon>
  17. </div>
  18. </div>
  19. <div>
  20. 爱他
  21. </div>
  22. <div slot="title">
  23. <div>
  24. <md-icon name="right" size="sm"></md-icon>
  25. </div>
  26. </div>
  27. <div>
  28. 爱她
  29. </div>
  30. </md-tabs>
  31. </div>
  32. </template>
  33. <script>
  34. import {Icon, Tabs} from 'mand-mobile'
  35. export default {
  36. name: 'tab-bar-demo',
  37. components: {
  38. [Icon.name]: Icon,
  39. [Tabs.name]: Tabs,
  40. },
  41. }
  42. </script>

通过公共方法切换 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>
  14. <script>
  15. 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. mounted() {
  27. window.triggerTabs = () => {
  28. this.$refs.tabs.selectTab(2)
  29. }
  30. },
  31. }
  32. </script>

标题栏处于下方

  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>
  13. <script>
  14. import {Tabs} from 'mand-mobile'
  15. export default {
  16. name: 'tab-bar-demo',
  17. components: {
  18. [Tabs.name]: Tabs,
  19. },
  20. data() {
  21. return {
  22. titles: ['第一', '第二', '第三', '第四'],
  23. }
  24. },
  25. }
  26. </script>

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