更新记录

1.0.1（2024-12-02） 下载此版本

无

1.0.0（2024-12-02） 下载此版本

无

平台兼容性

uni-app

组件参数文档

该文档说明了组件的所有可用参数以及其类型、默认值和用途。

参数列表

使用示例

<template>
    <view class="container">
        <view class="card">
            <view class="card-head">基础用法</view>
            <view class="card-content">
                <rui-tabs v-model="current" :list="list"></rui-tabs>
            </view>
        </view>

        <view class="card">
            <view class="card-head">居中</view>
            <view class="card-content">
                <rui-tabs v-model="current" :list="list.slice(0,4)" justify="center"></rui-tabs>
            </view>
        </view>

        <view class="card">
            <view class="card-head">填充</view>
            <view class="card-content">
                <rui-tabs v-model="current" :list="list.slice(0,4)" fill></rui-tabs>
            </view>
        </view>
        <view class="card">
            <view class="card-head">滑块</view>
            <view class="card-content">
                <rui-tabs v-model="current" :list="list" :showLine="false" showslider></rui-tabs>
            </view>
        </view>

        <view class="card">
            <view class="card-head">自定义</view>
            <view class="card-content">
                <rui-tabs v-model="current" :list="list" color="red" lineColor="red" :lineWidth="10" :lineHeight="2"></rui-tabs>
            </view>
        </view>
    </view>
</template>

<script lang="ts" setup>
    import { ref, reactive } from 'vue'

    const current = ref(3)
    const list = ref([
        { label: "全部", value: '1' },
        { label: "电子产品", value: '2' },
        { label: "家用电器", value: '3' },
        { label: "办公用品", value: '4' },
        { label: "汽车用品", value: '5' },
        { label: "书籍", value: '6' },
        { label: "家具", value: '7' },
        { label: "运动户外", value: '8' },
        { label: "美容护理", value: '9' },
        { label: "玩具", value: '10' },
    ])
</script>