更新记录

1.0.3（2022-10-18） 下载此版本

修复已知问题

1.0.2（2022-09-18） 下载此版本

• 添加示例工程

1.0.1（2022-09-18） 下载此版本

• 调整为uni_modules

平台兼容性

Tab

tabs组件，组件名：l-tabs

使用方式

在 template 中使用组件

基本用法

    <l-tabs :list="tabsList1"></l-tabs>

    <!-- 传入对象  控制初始选中-->
    <l-tabs :list="tabsList2" keyName="name" v-model="active"></l-tabs>

    <!--  带有下划线 -->
    <l-tabs :list="tabsList1" :lineShow="true" lineColor="#e9392f" :lineScale="1.2"></l-tabs>

    <!-- 靠左排列  自定义选中文字颜色及大小  自定义下划线样式-->
        <l-tabs
            :list="TabsList"
            activeTextColor="#333"
            layout="left"
            keyName="name"
            :lineShow="true"
            :lineCrude="6"
            :activeSize="16"
            linePlace="26px"
            lineColor="linear-gradient(to right, #e9392f 30%, #f2d6d6)"
        ></l-tabs>

        <!-- tab标签过多 可滚动排列 -->
        <l-tabs :list="TabsList1" layout="scroll" keyName="name"></l-tabs>

        <!-- 分割线 -->
        <l-tabs :list="tabsList2" :splitLine="true"  keyName="name"></l-tabs>

    export default {
        data() {
            return {
                        active:2,
                        tabsList1:['产品', '前端开发', '美工', '后端开发'],
                        tabsList2: [{ name: '产品' }, { name: '前端开发' }, { name: '美工' }, { name: '后端开发' }],
                    }

            }
    }

属性说明

下划线

分割线