更新记录

1.0.0（2025-06-18） 下载此版本

插件首次创建

平台兼容性

uni-app

其他

cl-ftabs

本想取名cl-tabs，但是被占用了/(ㄒoㄒ)/~~

说明

该组件百分比还原uni-ui的uni-segmented-control分段器组件。

• 支持v-model双向数据绑定
• 支持对象数组/基础类型数组的选项格式
• 支持label插槽自定义回显
• 支持监听tabs切换

Props 属性

方法列表

插槽说明

使用方式

<template>
    <view class="content">
        <uni-section>按钮样式</uni-section>
        <cl-ftabs v-model="value1" :option="option"></cl-ftabs>
        <uni-section>文本样式</uni-section>
        <cl-ftabs v-model="value2" :option="option" styleType="text" @change="handleChange"></cl-ftabs>
        <uni-section>插槽</uni-section>
        <cl-ftabs v-model="value2" :option="option" styleType="text" @change="handleChange">
            <template #label="{label, tabItem, isActive}">
                <text v-if="!isActive" style="color:blueviolet;">{{label}}~{{tabItem.value}}</text>
                <text v-else style="color:red;">{{label}}~{{tabItem.value}}</text>
            </template>
        </cl-ftabs>
    </view>
</template>
<script setup>
    import {
        ref
    } from 'vue'
    const option = [{
            value: '1',
            label: '数据1'
        },
        {
            value: '2',
            label: '数据2'
        },
        '数据3',
    ]
    const value1 = ref('1')
    const value2 = ref('2')

    const handleChange = (val, item, index) => {
        console.log(val, item, index);
    }
</script>

<style scoped>
    .content {
        padding: 30rpx;
    }
</style>

若有问题可联系作者：微信号：fjl_code_life