更新记录

0.0.1（2024-11-13） 下载此版本

• init

平台兼容性

lime-tabbar 标签栏

• 用于在不同功能模块之间进行快速切换，位于页面底部。兼容uniapp/uniappx
• 插件依赖lime-style,lime-shared,lime-badge,lime-icon,lime-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

Tabbar Events

TabbarItem Props

TabbarItem Slots

主题定制

样式变量

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

常见问题

插件包含一下lime-svg为收费插件。如果你不需要svg，可以在lime-icon里注释掉，lime-svg为APP原生插件，收费为1元，源码为5元。如果你需要svg，可以考虑一下购买。

// 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> -->

打赏

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