更新记录

1.0.0（2023-05-03）

完成

平台兼容性

uni.scss(按项目实际颜色)

$uni-color-primary: #007aff;
$uni-color-success: #4cd964;
$uni-color-warning: #f0ad4e;
$uni-color-error: #dd524d;
$uni-color-info: #909399; //默认色
$uni-color-disabled: #c0c4cc; //禁止色
$uni-color-default: #dcdfe6; 

依赖yll1024335892-ayi-icon组件

• yll1024335892-ayi-icon

参数

方法

示例

基础用法

<template>
    <ayi-tabs v-model="active" :list="list"></ayi-tabs>
</template>

<script lang="ts" setup>
    import { ref } from "vue";

    const active = ref<number>(0);

    const list = ref<any[]>([
        {
            label: "数码"
        },
        {
            label: "家电"
        },
        {
            label: "母婴"
        },
        {
            label: "潮牌"
        }
    ]);
</script>

居中

配置 justify 参数

<template>
    <ayi-tabs v-model="active" :list="list" justify="center"></ayi-tabs>
</template>

<script lang="ts" setup>
    import { ref } from "vue";

    const active = ref<number>(0);

    const list = ref<any[]>([
        {
            label: "数码"
        },
        {
            label: "家电"
        },
        {
            label: "母婴"
        },
        {
            label: "潮牌"
        }
    ]);
</script>

填充

配置 fill 参数

<template>
    <ayi-tabs v-model="active" :list="list" fill></ayi-tabs>
</template>

<script lang="ts" setup>
    import { ref } from "vue";

    const active = ref<number>(0);

    const list = ref<any[]>([
        {
            label: "数码"
        },
        {
            label: "家电"
        },
        {
            label: "母婴"
        },
        {
            label: "潮牌"
        }
    ]);
</script>

自定义颜色

<template>
    <ayi-tabs v-model="active" :list="list" color="red" un-color="blue" background-color="#f7f7f7"></ayi-tabs>
</template>

<script lang="ts" setup>
    import { ref } from "vue";

    const active = ref<number>(0);

    const list = ref<any[]>([
        {
            label: "数码"
        },
        {
            label: "家电"
        },
        {
            label: "母婴"
        },
        {
            label: "潮牌"
        }
    ]);
</script>

下拉框

配置 show-dropdown 参数及添加 dropdown 插槽

<template>
    <ayi-tabs v-model="active" :list="list" show-dropdown>
        <template #dropdown>
            <view class="dropdown">
                <ayi-text
                    :value="item.label"
                    v-for="item in list"
                    :key="item.value"
                    :margin="10"
                ></ayi-text>
            </view>
        </template>
    </ayi-tabs>
</template>

<script lang="ts" setup>
    import { ref } from "vue";

    const active = ref<number>(0);

    const list = ref<any[]>([
        {
            label: "数码"
        },
        {
            label: "家电"
        },
        {
            label: "母婴"
        },
        {
            label: "潮牌"
        }
    ]);
</script>

<style lang="scss" scoped>
    .dropdown {
        background-color: #ddd;
        padding: 20rpx;
    }
</style>

更改绑定值

list 中不存在 value 的情况下，会以数组的下标返回。否则返回 value 值

<template>
    <ayi-tabs v-model="active2" :list="list2"></ayi-tabs>
</template>

<script lang="ts" setup>
    import { ref } from "vue";

    const active2 = ref<string>("b");

    const list2 = ref<any[]>([
        {
            label: "数码",
            value: "a"
        },
        {
            label: "家电",
            value: "b"
        },
        {
            label: "母婴",
            value: "c"
        },
        {
            label: "潮牌",
            value: "d"
        }
    ]);
</script>