vue-weui

Appearance

Tabbar 底部导航 ​

TabBar 主要用于底部tab栏显示.

基础使用 ​

显示代码
vue
<template>
  <weui-tabbar v-model="navBar">
    <weui-tabbar-item
      v-for="tab in navBars"
      :key="tab.value"
      :label="tab.label"
      :value="tab.value"
      :icon="tab.icon"
    >
      {{ tab.label }} ---- Tab
    </weui-tabbar-item>
  </weui-tabbar>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const navBar = ref('menu1');
const navBars = [
  { label: '菜单1', value: 'menu1', icon: 'https://weui.io/images/icon_tabbar.png' },
  { label: '菜单2', value: 'menu2', icon: 'https://weui.io/images/icon_tabbar.png' }
];
</script>

API ​

Tabbar Props ​

名称类型默认值说明版本
modelValueany-当前选择的tab-

Tabbar Slots ​

名称参数说明版本
default-每个Tab的内容-

Tabbar Events ​

名称描述参数版本
update:modelValue当前选择的tab改变(val: any) => void-
change当前选择的tab改变(val: any) => void-

TabbarItem Props ​

名称类型默认值说明版本
labelstring-tab栏标题-
valueany-tab栏的值-
iconstring-tab栏显示的icon-

TabbarItem Slots ​

名称参数说明版本
default-当前Tab的内容-