LimeTabbar 标签栏

• 用于在不同功能模块之间进行快速切换，位于页面底部。兼容uniapp/uniappx
• 插件依赖lime-style,lime-shared,lime-badge,lime-icon,lime-svg不喜勿下。

安装

在 导入即可，首次安装可能需要重新编译

注意

• 🔔 本插件依赖的lime-svg在 uniapp x app中是原生插件，如果购买(收费为5元)则需要自定义基座，才能使用！uniapp可忽略。
• 🔔 如果不需要lime-svg在lime-icon代码中注释掉即可

// lime-icon/components/l-icon.uvue 第4行 注释掉即可。
<!-- <l-svg class="l-icon" :class="classes" :style="styles" :color="color" :src="iconUrl" v-else :web="web" @error="imageError" @load="imageload" @click="$emit('click')"></l-svg> -->

代码演示

基础使用

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

<l-tabbar v-model="active">
	<l-tabbar-item icon="home">首页</l-tabbar-item>
	<l-tabbar-item icon="app">应用</l-tabbar-item>
	<l-tabbar-item icon="chat">聊天</l-tabbar-item>
	<l-tabbar-item icon="user">我的</l-tabbar-item>
</l-tabbar>

const active = ref('0')

通过值匹配

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

<l-tabbar v-model="active">
	<l-tabbar-item icon="home" value="home">首页</l-tabbar-item>
	<l-tabbar-item icon="app" value="app">应用</l-tabbar-item>
	<l-tabbar-item icon="chat" value="chat">聊天</l-tabbar-item>
	<l-tabbar-item icon="user" value="user">我的</l-tabbar-item>
</l-tabbar>

const active = ref('home')

徽标提示

设置 lime-badge插件的 badgeProps 在图标右上角展示相应的徽标。

<l-tabbar v-model="active">
	<l-tabbar-item icon="home" :badgeProps="{ content: 16, max:5 }" value="home">首页</l-tabbar-item>
	<l-tabbar-item icon="app"  :badgeProps="{ dot: true }" value="app">应用</l-tabbar-item>
	<l-tabbar-item icon="chat" :badgeProps="{ content: 'New', offset: [10,-2] }" value="chat">聊天</l-tabbar-item>
	<l-tabbar-item icon="user" :badgeProps="{ content: '···' }" value="user">我的</l-tabbar-item>
</l-tabbar>

const active = ref('home')

自定义图标

设置icon属性可设置图标，图标可看 lime-icon或icon插槽。

<l-tabbar v-model="active">
	<l-tabbar-item icon="home" value="home">
		<template #icon>
			<image style="width: 20px;height: 20px;" v-show="active == 'home'" :src="activeImg" ></image>
			<image style="width: 20px;height: 20px;" v-show="active != 'home'" :src="inactiveImg" ></image>
		</template>
	</l-tabbar-item>
	<l-tabbar-item icon="app"  value="app">应用</l-tabbar-item>
	<l-tabbar-item icon="chat" value="chat">聊天</l-tabbar-item>
	<l-tabbar-item icon="user" value="user">我的</l-tabbar-item>
</l-tabbar>

const active = ref('home')
const activeImg = 'https://fastly.jsdelivr.net/npm/@vant/assets/user-active.png'
const inactiveImg = 'https://fastly.jsdelivr.net/npm/@vant/assets/user-inactive.png'

自定义颜色

通过 active-color 属性设置选中标签的颜色，通过 color 属性设置未选中标签的颜色。

<l-tabbar activeColor="red" color="#999">
	<l-tabbar-item icon="home" value="home"></l-tabbar-item>
	<l-tabbar-item icon="app" value="app"></l-tabbar-item>
	<l-tabbar-item icon="chat" value="chat"></l-tabbar-item>
	<l-tabbar-item icon="user" value="user"></l-tabbar-item>
</l-tabbar>

监听切换事件

通过 change 事件来监听选中标签的变化。

<l-tabbar v-model="active" @change="change">
	<l-tabbar-item icon="home" value="home"></l-tabbar-item>
	<l-tabbar-item icon="app" value="app"></l-tabbar-item>
	<l-tabbar-item icon="chat" value="chat"></l-tabbar-item>
	<l-tabbar-item icon="user" value="user"></l-tabbar-item>
</l-tabbar>

const change = (value : string) => {
	console.log('value', value)
}

查看示例

• 导入后直接使用这个标签查看演示效果

<!-- // 代码位于 uni_modules/lime-tabbar/compoents/lime-tabbar -->
<lime-tabbar />

插件标签

• 默认 l-tabbar 为 component
• 默认 lime-tabbar 为 demo

关于vue2的使用方式

• 插件使用了composition-api, 如果你希望在vue2中使用请按官方的教程vue-composition-api配置
• 关键代码是: 在main.js中 在vue2部分加上这一段即可

// vue2
import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'
Vue.use(VueCompositionAPI)

API

Tabbar Props

参数	说明	类型	默认值
v-model	当前选中标签的名称或索引值	string	-
value	当前选中标签的名称或索引值	string	-
fixed	是否固定在底部	boolean	true
bordered	是否显示外边框	boolean	true
placeholder	固定在底部时，是否在标签位置生成一个等高的占位元素	boolean	true
zIndex	元素 z-index	number	885
shape	标签栏的形状,可选round	boolean	normal
safeAreaInsetBottom	是否开启底部安全区适配，设置 fixed 时默认开启	boolean	true
activeColor	选中标签的颜色	string	-
color	未选中标签的颜色	string	-
activeBgColor	选中标签的背景颜色	string	-
iconSize	图标大小	string	-
lStyle	样式	string	-

Tabbar Events

事件名	说明	回调参数
change	切换标签时触发	active: string

TabbarItem Props

参数	说明	类型	默认值
value	标签值，作为匹配的标识符	string	-
icon	图标名称或图片链接，等同于 Icon 组件的 name 属性	string	-
disabled	是否禁用	boolean	false
label	标签文本	string	``
badgeProps	自定义徽标的属性，传入的对象会被透传给 Badge 组件的 props	Object	``

TabbarItem Slots

名称	说明
icon	自定义图标

主题定制

样式变量

组件提供了下列 CSS 变量，可用于自定义样式，uvue app无效。

名称	默认值	描述
--l-tabbar-bg-color	$bg-color-container	-
--l-tabbar-border-color	$border-color-1	-
--l-tabbar-round-shadow	$shadow-3	-
--l-tabbar-z-index	10	-
--l-tabbar-height	80rpx	-
--l-tabbar-color	$text-color-1	-
--l-tabbar-active-color	$primary-color	-
--l-tabbar-font-size	32rpx	-

打赏

如果你觉得本插件，解决了你的问题，赠人玫瑰，手留余香。

源代码

组件源码