QinUi

# Tabbar 底部导航栏

统一封装

# 基础用法

设置 :fixed="false" 不固定在底部。设置 :show="true" 显示出来。

<template>
  <qinui-tabbar
    :data="theData1"
    v-model="value1"
    @change="change1"
    :fixed="false"
    :show="true"
  />
</template>
<script>
  export default {
    data() {
      return {
        value1: 'Tabbar',
        theData1: [
          {
            label: '首页',
            value: 'Home',
            icon: 'icon-yuyue',
          },
          {
            label: '底部导航',
            value: 'Tabbar',
            icon: 'icon-yuyue',
          },
          {
            label: '选项卡',
            value: 'Tabs',
            icon: 'icon-yuyue',
          },
        ],
      };
    },
    methods: {
      onChange(e) {
        this.value1 = e;
      },
    },
  };
</script>

# 没有跳转点击高亮演示

设置 link-type="" 。设置 :safeAreaInsetBottom="false" 兼容安全区域。

<template>
  <qinui-tabbar
    :data="theData2"
    v-model="value2"
    :fixed="false"
    :safeAreaInsetBottom="false"
    :show="true"
    link-type=""
  />
</template>
<script>
  export default {
    data() {
      return {
        value1: 'Tabbar',
        theData1: [
          {
            label: '首页',
            value: 'Home',
            icon: 'icon-yuyue',
          },
          {
            label: '底部导航',
            value: 'Tabbar',
            icon: 'icon-yuyue',
          },
          {
            label: '选项卡',
            value: 'Tabs',
            icon: 'icon-yuyue',
          },
        ],
      };
    },
    methods: {
      onChange(e) {
        this.value1 = e;
      },
    },
  };
</script>

# 自定义字段演示

设置 fieldNames。

<template>
  <qinui-tabbar
    :data="theData3"
    v-model="value3"
    link-type=""
    :fieldNames="{
      value: 'routerName',
      label: 'title',
      icon: 'icon',
    }"
    :show="true"
  />
</template>
<script>
  export default {
    data() {
      return {
        value3: 'Tabs',
        theData3: [
          {
            title: '首页',
            routerName: 'Home',
            icon: 'icon-yuyue',
          },
          {
            title: '徽章',
            routerName: 'Tabbar',
            icon: 'icon-yuyue',
          },
          {
            title: '选项卡',
            routerName: 'Tabs',
            icon: 'icon-yuyue',
          },
        ],
      };
    },
  };
</script>

# 自定义颜色演示

设置 yesColor 选中文字颜色，设置 noColor 不选中文字颜色， bgColor 背景颜色。

<template>
  <qinui-tabbar
    :data="theData3"
    v-model="value3"
    yesColor="#ff0"
    noColor="#f0f"
    bgColor="#00f"
    :fieldNames="{
      value: 'routerName',
      label: 'title',
      icon: 'icon',
    }"
    :show="true"
  />
</template>
<script>
  export default {
    data() {
      return {
        value3: 'Tabs',
        theData3: [
          {
            title: '首页',
            routerName: 'Home',
            icon: 'icon-yuyue',
          },
          {
            title: '徽章',
            routerName: 'Tabbar',
            icon: 'icon-yuyue',
          },
          {
            title: '选项卡',
            routerName: 'Tabs',
            icon: 'icon-yuyue',
          },
        ],
      };
    },
  };
</script>

# 自定义圆角演示

设置 radius="large"。

<template>
  <qinui-tabbar
    :data="theData3"
    v-model="value3"
    radius="large"
    :show="true"
  />
</template>
<script>
  export default {
    data() {
      return {
        value1: 'Tabbar',
        theData1: [
          {
            label: '首页',
            value: 'Home',
            icon: 'icon-yuyue',
          },
          {
            label: '底部导航',
            value: 'Tabbar',
            icon: 'icon-yuyue',
          },
          {
            label: '选项卡',
            value: 'Tabs',
            icon: 'icon-yuyue',
          },
        ],
      };
    },
  };
</script>

# 自定义圆角演示

设置 radius="large"。

<template>
  <qinui-tabbar
    :data="theData4"
    v-model="value4"
    :fixed="false"
    :show="true"
    :useStore="false"
  />
</template>
<script>
  export default {
    data() {
      return {
        value4: 'Tabs',
        theData4: [
          {
            label: '首页',
            noImage:
              'https://dz-cdn.test.fanzhi.cn/material/app/image/common/wm_home.png',
            yesImage:
              'https://dz-cdn.test.fanzhi.cn/material/app/image/common/wm_home_selected.png',
            value: 'Home',
          },
          {
            label: '徽章',
            noImage:
              'https://dz-cdn.test.fanzhi.cn/material/app/image/common/wm_order.png',
            yesImage:
              'https://dz-cdn.test.fanzhi.cn/material/app/image/common/wm_order_selected.png',
            value: 'Badge',
          },
          {
            label: '选项卡',
            noImage:
              'https://dz-cdn.test.fanzhi.cn/material/app/image/common/wm_statis.png',
            yesImage:
              'https://dz-cdn.test.fanzhi.cn/material/app/image/common/wm_statis_selected.png',
            value: 'Tabs',
          },
        ],
      };
    },
  };
</script>

# API

# Props

参数 说明 类型 默认值 可选值 全局配置
modelValue (v-model) 选中的值 String | NUmber 2 - -
show 是否显示 Boolean false - -
safeAreaInsetBottom 是否为iPhoneX留出底部安全距离 Boolean true - -
data 数据，字段参考 Array - - 支持
border 是否显示上方边框 Boolean false - -
fixed 是否固定在底部 Boolean true - -
yesColor 选中文字颜色 String var(--qinuiPrimaryColor, #ff361f) - -
noColor 未选中文字颜色 String rgba(0,0,0,0.45) - -
bgColor 背景颜色 String - - -
radius 圆角。none 方形 0 ， default 正常圆角 16rpx ， large 大圆角 24rpx String none none | default | large -
fieldNames 字段映射，参考 Object {
icon: 'icon',
value: 'value',
label: 'label',
useLogin: 'useLogin',
}		 - -
linkType 跳转方式 String replace push | replace \ navigateTo 等 QinJs 支持的跳转方式
placeholder 占位显示 Boolean false - -
useStore 是否使用 store Boolean true
diyStyle 自定义外部样式，如：设置边框等样式 String - - -

# Data Props

参数 说明 类型 默认值 可选值 版本
value 选中的值 String - - -
label 中文 String - - -
icon icon 的 class 名 String - - -
noImage 未选中的图片 String noImage - 1.10.0+
yesImage 选中的图片 String yesImage - 1.10.0+

# FieldNames Props

参数 说明 类型 默认值 可选值 版本
icon 图标 String icon - -
noImage 未选中的图片 String noImage - 1.10.0+
yesImage 选中的图片 String yesImage - 1.10.0+
value 选中的值 String value - -
label 中文 String label - -
useLogin 是否登录 (暂时用不到) String useLogin - -

# Events

事件名 说明 回调参数
@change 改变状态触发 -

← Tabs 选项卡 →