更新记录

0.0.3（2024-10-17） 下载此版本

• chore: 更新文档

0.0.2（2024-10-17） 下载此版本

• chore: 兼容vue2

0.0.1（2024-10-17） 下载此版本

• init

平台兼容性

lime-tabs 选项卡

• 标签页选项卡组件，用于在不同的内容区域之间进行切换。兼容uniapp/uniappx
• 插件依赖lime-shared,lime-badge,lime-style不喜勿下

安装

在插件市场导入即可，首次导入可能需要重新编译

代码演示

基础使用

通过 v-model 绑定当前激活标签对应的索引值，默认情况下启用第一个标签。通过list设置选项卡列表

<l-tabs v-model="value" :list="list" />

const value = ref(0)
const list = [
    {
        value: 1,
        label: '选项',
    },
    {
        value: 2,
        label: '选项',
    },
    {
        value: 3,
        label: '选项',
    },
    {
        value: 4,
        label: '选项',
    }
]

子组件

除了使用list设置列表，还可以通过l-tab-panel子组件设置标签

<l-tabs>
    <l-tab-panel :value="0" label="选项" />
    <l-tab-panel :value="1" label="选项" />
    <l-tab-panel :value="2" label="选项" />
</l-tabs>

标签栏滚动

通过设置space-evenly取消等距，当数量宽度超过父级时可滚动。

<l-tabs :space-evenly="false">
    <l-tab-panel :value="0" label="选项" />
    <l-tab-panel :value="1" label="选项" />
    <l-tab-panel :value="2" label="选项" />
    <l-tab-panel :value="3" label="选项" />
    <l-tab-panel :value="4" label="选项" />
    <l-tab-panel :value="5" label="选项" />
    <l-tab-panel :value="6" label="选项" />
</l-tabs>

徽标

通过设置dot为true可显示小红点，通过设置badge设置徽标内容，通过设置offset设置徽标偏移量。

<l-tabs :space-evenly="false">
    <l-tab-panel :value="0" label="选项" />
    <l-tab-panel :value="1" label="选项" :dot="true" />
    <l-tab-panel :value="2" label="选项" />
    <l-tab-panel :value="3" label="选项" badge="8" :offset="[-8,3]"/>
    <l-tab-panel :value="4" label="选项" />
    <l-tab-panel :value="5" label="选项" />
    <l-tab-panel :value="6" label="选项" />
</l-tabs>

切换动画

通过 animated 属性可以开启切换标签内容时的转场动画。

<l-tabs v-model="value" :space-evenly="false" :animated="true">
    <l-tab-panel :value="0" label="选项">
        <text style="padding: 15px;">选项卡内容1</text>
    </l-tab-panel>
    <l-tab-panel :value="1" label="选项">
        <text style="padding: 15px;">选项卡内容2</text>
    </l-tab-panel>
    <l-tab-panel :value="2" label="选项">
        <text style="padding: 15px;">选项卡内容3</text>
    </l-tab-panel>
    <l-tab-panel :value="3" label="选项">
        <text style="padding: 15px;">选项卡内容4</text>
    </l-tab-panel>
</l-tabs>

滑动切换

通过 swipeable 属性可以开启滑动切换标签页。

<l-tabs v-model="value" :space-evenly="false" :animated="true" :swipeable="true">
    <l-tab-panel :value="0" label="选项">
        <text style="padding: 15px;">选项卡内容1</text>
    </l-tab-panel>
    <l-tab-panel :value="1" label="选项">
        <text style="padding: 15px;">选项卡内容2</text>
    </l-tab-panel>
    <l-tab-panel :value="2" label="选项">
        <text style="padding: 15px;">选项卡内容3</text>
    </l-tab-panel>
    <l-tab-panel :value="3" label="选项">
        <text style="padding: 15px;">选项卡内容4</text>
    </l-tab-panel>
</l-tabs>

受控

通过 onClick 属性可以在切换标签前执行特定的逻辑。

<l-tabs :value="value" @click="onClick">
    <l-tab-panel :value="0" label="选项">
        <text style="padding: 15px;">选项卡内容1</text>
    </l-tab-panel>
    <l-tab-panel :value="1" label="选项">
        <text style="padding: 15px;">选项卡内容2</text>
    </l-tab-panel>
    <l-tab-panel :value="2" label="选项">
        <text style="padding: 15px;">选项卡内容3</text>
    </l-tab-panel>
    <l-tab-panel :value="3" label="选项">
        <text style="padding: 15px;">选项卡内容4</text>
    </l-tab-panel>
</l-tabs>

const value = ref(1);
const onClick = (index: number) => {
    uni.showLoading({title:'校验中'})
    setTimeout(()=>{
        uni.hideLoading()
        value.value = index
    },1000)
}

查看示例

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

 // 代码位于 uni_modules/lime-tabs/compoents/lime-tabs 
<lime-tabs />

插件标签

• 默认 l-tabs 为 component
• 默认 l-tab-panel 为 component
• 默认 lime-tabs 为 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

Tabs Props

TabPanel Props

GridItem Events

主题定制

样式变量

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

打赏

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