Taro + vue3 + ts 框架中书写tabs 二次封装组件使用

最新推荐文章于 2024-07-10 14:29:48 发布

一口一个人.

最新推荐文章于 2024-07-10 14:29:48 发布

阅读量257

点赞数

文章标签： taro javascript 前端

本文链接：https://blog.csdn.net/lele66688888/article/details/134446940

版权

<template>
    <div class="filter-container">
        <nut-tabs v-model="selected" title-scroll title-gutter="10">
            <nut-tab-pane v-for="item in tabList" :title="item.name"></nut-tab-pane>
        </nut-tabs>

    </div>
</template>
<script setup>
import { ref, watch, toRefs } from 'vue'
const props = defineProps({
    tabList: Array
})
const emit = defineEmits(["onChange"])
const { tabList } = toRefs(props);
const selected = ref(0)
watch(selected, (index) => {
    emit("onChange", tabList.value[index])

})
</script>
<style lang="less">
.filter-container {
    .nut-tabs__content {
        display: none !important;
    }

    .nut-tabs__titles {
        // background: #ffffff !important;

        .nut-tabs__titles-item {
            .nut-tabs__titles-item__smile {
                display: none;
            }

            .nut-tabs__titles-item__text {
                color: #858a99;
                font-size: 22px;
            }
        }

        .nut-tabs__titles-item.active {
            .nut-tabs__titles-item__smile {
                display: block;
                margin-top: 10px !important;
            }

            .nut-tabs__titles-item__text {
                color: #15181d;
            }
        }
    }

}
</style>

特别简单的使用方法