TabBar 标签栏

使用指南

页面底部菜单栏

代码演示

查看代码

<template>
  <div class="list">
    <p class="sub-title">
      基础用法
    </p>
    <h3-tab-bar v-model="active1" :fixed="false">
      <h3-tab-bar-item icon="home-o">
        标签
      </h3-tab-bar-item>
      <h3-tab-bar-item icon="address-o">
        标签
      </h3-tab-bar-item>
      <h3-tab-bar-item icon="pushpin-o">
        标签
      </h3-tab-bar-item>
      <h3-tab-bar-item icon="user-o">
        标签
      </h3-tab-bar-item>
    </h3-tab-bar>
    <p class="sub-title">
      activeIcon用法
    </p>
    <h3-tab-bar v-model="active2" :fixed="false">
      <h3-tab-bar-item icon="home-o" activeIcon="home">
        标签
      </h3-tab-bar-item>
      <h3-tab-bar-item icon="address-o" activeIcon="address">
        标签
      </h3-tab-bar-item>
      <h3-tab-bar-item icon="pushpin-o" activeIcon="pushpin">
        标签
      </h3-tab-bar-item>
      <h3-tab-bar-item icon="user-o" activeIcon="user">
        标签
      </h3-tab-bar-item>
    </h3-tab-bar>
    <p class="sub-title">
      name用法
    </p>
    <h3-tab-bar v-model="active3" :fixed="false">
      <h3-tab-bar-item icon="home-o" activeIcon="home" name="home">
        标签
      </h3-tab-bar-item>
      <h3-tab-bar-item icon="address-o" activeIcon="address" name="address">
        标签
      </h3-tab-bar-item>
      <h3-tab-bar-item icon="pushpin-o" activeIcon="pushpin" name="pushpin">
        标签
      </h3-tab-bar-item>
      <h3-tab-bar-item icon="user-o" activeIcon="user" name="user">
        标签
      </h3-tab-bar-item>
    </h3-tab-bar>
    <p class="sub-title">
      插槽用法
    </p>
    <h3-tab-bar v-model="active4" :fixed="false">
      <h3-tab-bar-item>
        <template #icon="{active}">
          <h3-icon :type="active ? 'home' : 'home-o'" />
        </template>
        标签
      </h3-tab-bar-item>
      <h3-tab-bar-item>
        <template #icon="{active}">
          <h3-icon :type="active ? 'address' : 'address-o'" />
        </template>
        标签
      </h3-tab-bar-item>
      <h3-tab-bar-item>
        <template #icon="{active}">
          <h3-icon :type="active ? 'pushpin' : 'pushpin-o'" />
        </template>
        标签
      </h3-tab-bar-item>
      <h3-tab-bar-item>
        <template #icon="{active}">
          <h3-icon :type="active ? 'user' : 'user-o'" />
        </template>
        标签
      </h3-tab-bar-item>
    </h3-tab-bar>
    <!-- <router-view /> -->
    <p class="sub-title">
      默认固定在底部
    </p>
    <h3-tab-bar v-model="active5">
      <h3-tab-bar-item icon="home-o" activeIcon="home">
        标签
      </h3-tab-bar-item>
      <h3-tab-bar-item dot icon="address-o" activeIcon="address">
        标签
      </h3-tab-bar-item>
      <h3-tab-bar-item icon="pushpin-o" activeIcon="pushpin">
        标签
      </h3-tab-bar-item>
      <h3-tab-bar-item text="2" icon="user-o" activeIcon="user">
        标签
      </h3-tab-bar-item>
    </h3-tab-bar>
  </div>
</template>

<script>
import { H3TabBar, H3TabBarItem } from '@/components/h3-tab-bar';
import H3Icon from '@/components/h3-icon';

export default {
  name: 'TabBarDemo',
  components: {
    H3TabBar,
    H3TabBarItem,
    H3Icon,
  },
  data () {
    return {
      active1: 0,
      active2: 0,
      active3: 'home',
      active4: 0,
      active5: 0,
    };
  },
};
</script>
<style lang="less" scoped>
.list {
  p {
    font-weight: 600;
    font-size: 16px;
    padding: 15px;
  }
}
</style>

与h3-mobile-vue组件的区别以及迁移

新增组件

API - H3TabBar

Props - H3TabBar

属性	说明	类型	默认值
index	要选中的H3TabBarItem的下标，若为字符串则为H3TabBarItem的name。v-model绑定值	string|number	0
activeColor	选中标签的颜色	string	#107fff
inactiveColor	未选中标签的颜色	string	#333333
fixed	是否固定在底部	boolean	true
border	是否显示上边框	boolean	true

Events - H3TabBar

事件名	说明	参数
input	v-model绑定事件	value:number|string
change	标签选择变化事件	value:number|string

API - H3TabBarItem

Props - H3TabBarItem

属性	说明	类型	默认值
name	标签名称，作为匹配的标识符	string	-
dot	是否显示图标右上角小红点	boolean	false
text	图标右上角徽标的内容	number|string	''
limit	限制text展示，若超过则为显示 ${limit}+	number	99
icon	默认图标名称	string	''
activeIcon	选中标签图标名称	string	''

Events - H3TabBarItem

事件名	说明	参数
click	点击触发事件

Slots - H3TabBarItem

插槽名	说明	SlotProps
icon	自定义图标	{active: 是否为选中标签}