DolphinHybrid
点我扫二维码，查看demo

# TabBar 标签栏组件

# 介绍

标签栏组件用于多页面之间的切换。

# 引入

通过以下方式来按需注册组件。

import Vue from 'vue';
import { TabBar, TabBarItem } from '@dolphin-iot/ui'

Vue.use(TabBar);
Vue.use(TabBarItem);
1
2
3
4
5

# 代码演示

# 基础用法

v-model 默认绑定选中标签的索引值，通过修改 v-model 即可切换选中的标签。

<template>
    <div>
        <mx-tab-bar v-model="active" class="bg-shadow">
            <mx-tab-bar-item icon="star">标签</mx-tab-bar-item>
            <mx-tab-bar-item icon="search">标签</mx-tab-bar-item>
            <mx-tab-bar-item icon="close">标签</mx-tab-bar-item>
            <mx-tab-bar-item icon="star-line">标签</mx-tab-bar-item>
        </mx-tab-bar>
    </div>
</template>
<script>
    export default {
        data(){
            return {
                active: 0
            }
        }
    }
</script>
<style lang="scss" scoped>
.bg-shadow{
    box-shadow: 0 -1px 5px 0 rgba(0, 0, 0, 0.05);
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

# 通过名称匹配

在标签指定 name 属性的情况下，v-model 的值为当前标签的 name。

<template>
    <div>
        <mx-tab-bar v-model="active" class="bg-shadow">
            <mx-tab-bar-item icon="star">标签</mx-tab-bar-item>
            <mx-tab-bar-item icon="search">标签</mx-tab-bar-item>
            <mx-tab-bar-item icon="close">标签</mx-tab-bar-item>
            <mx-tab-bar-item icon="star-line">标签</mx-tab-bar-item>
        </mx-tab-bar>
    </div>
</template>
<script>
    export default {
        data(){
            return {
                active: 0
            }
        }
    }
</script>
<style lang="scss" scoped>
.bg-shadow{
    box-shadow: 0 -1px 5px 0 rgba(0, 0, 0, 0.05);
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

# 徽标提示

设置 dot 属性后，会在图标右上角展示一个小红点；设置 badge 属性后，会在图标右上角展示相应的徽标。

<template>
    <div>
        <mx-tab-bar v-model="active" class="bg-shadow">
          <mx-tab-bar-item icon="star">标签</mx-tab-bar-item>
          <mx-tab-bar-item icon="search" :dot="true">标签</mx-tab-bar-item>
          <mx-tab-bar-item icon="close" badge="9">标签</mx-tab-bar-item>
          <mx-tab-bar-item icon="star-line" badge="hot">标签</mx-tab-bar-item>
        </mx-tab-bar>
    </div>
</template>
<script>
    export default {
        data(){
            return {
                active: 0
            }
        }
    }
</script>
<style lang="scss" scoped>
.bg-shadow{
    box-shadow: 0 -1px 5px 0 rgba(0, 0, 0, 0.05);
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

# 自定义图标

通过 icon 插槽自定义图标，可以通过 slot-scope 判断标签是否选中。

<template>
    <div>
        <mx-tab-bar v-model="iconm" class="bg-shadow">
            <mx-tab-bar-item>
                <template v-slot:icon="props">
                    <img :src="props.active ? icon.active : icon.inactive" />
                </template>
                自定义
            </mx-tab-bar-item>
            <mx-tab-bar-item icon="search">标签</mx-tab-bar-item>
            <mx-tab-bar-item icon="star-line" badge="hot">标签</mx-tab-bar-item>
        </mx-tab-bar>
    </div>
</template>
<script>
    export default {
        data(){
            return {
                active: 0,
                icon: {
                    active: 'http://dolphin-weex-dev.msmartlife.cn/cdn/images/common/mail.png',
                    inactive: 'http://dolphin-weex-dev.msmartlife.cn/cdn/images/common/equipment.png',
                },
            }
        }
    }
</script>
<style lang="scss" scoped>
.bg-shadow{
    box-shadow: 0 -1px 5px 0 rgba(0, 0, 0, 0.05);
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

# 自定义颜色

通过 activeColor 属性设置选中标签的颜色, 通过 inactiveColor 设置未选中标签的颜色。

<template>
    <div>
        <mx-tab-bar v-model="color" active-color="#22a3d6" inactive-color="#7C879B" class="bg-shadow">
          <mx-tab-bar-item icon="star">标签</mx-tab-bar-item>
          <mx-tab-bar-item icon="search" :dot="true">标签</mx-tab-bar-item>
          <mx-tab-bar-item icon="close" badge="9">标签</mx-tab-bar-item>
          <mx-tab-bar-item icon="star-line" badge="hot">标签</mx-tab-bar-item>
        </mx-tab-bar>
    </div>
</template>
<script>
    export default {
        data(){
            return {
                active: 0
            }
        }
    }
</script>
<style lang="scss" scoped>
.bg-shadow{
    box-shadow: 0 -1px 5px 0 rgba(0, 0, 0, 0.05);
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

# 三个图标功能排版

<template>
    <div>
        <mx-tab-bar v-model="count3" active-color="#22a3d6" inactive-color="#7C879B" class="bg-shadow">
            <mx-tab-bar-item icon="star">标签</mx-tab-bar-item>
            <mx-tab-bar-item icon="search" :dot="true">标签</mx-tab-bar-item>
            <mx-tab-bar-item icon="close" badge="9">标签</mx-tab-bar-item>
        </mx-tab-bar>
    </div>
</template>
<script>
    export default {
        data(){
            return {
                count3: 0
            }
        }
    }
</script>
<style lang="scss" scoped>
.bg-shadow{
    box-shadow: 0 -1px 5px 0 rgba(0, 0, 0, 0.05);
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

# 两个图标功能排版

<template>
    <div>
        <mx-tab-bar v-model="count2" active-color="#22a3d6" inactive-color="#7C879B" class="bg-shadow">
            <mx-tab-bar-item icon="star">标签</mx-tab-bar-item>
            <mx-tab-bar-item icon="search" :dot="true">标签</mx-tab-bar-item>
        </mx-tab-bar>
    </div>
</template>
<script>
    export default {
        data(){
            return {
                count2: 0
            }
        }
    }
</script>
<style lang="scss" scoped>
.bg-shadow{
    box-shadow: 0 -1px 5px 0 rgba(0, 0, 0, 0.05);
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

# Api

# TabBar Props

参数 说明 类型 默认值 是否必须
value 选中的标签值 number | string - 是
activeColor 选中标签的颜色 string #000000 -
inactiveColor 未选中标签的颜色 boolean #8a8a8f -
fixed 标签栏是否固定在底部 boolean false -
safeAreaInsetBottom 是否开启底部安全区 boolean false -

# TabBar Events

事件名称 说明 回调参数
change 标签切换时触发 active: 当前选中标签的索引或者名称

# TabBarItem Props

参数 说明 类型 默认值 是否必须
name 标签名称 string - -
icon 标签的图标 string - 是
iconPrefix 图标类名前缀，同 Icon 组件的 class-prefix 属性 string - -
dot 图标是否显示红点 boolean false -
badge 图标右上角显示的徽标内容 string | number - -
size 自定义图标大小 string | number 48 -

# TabBarItem Slots

名称 说明
default 标签内容
icon 自定义标签图标
更新时间: 12/3/2021, 1:36:49 PM

← Tab 标签页 →