Taro + vue3 + ts 框架中书写tabs 二次封装组件使用_nut-tabs-vertical-titles-width 使用

<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>
 

特别简单的使用方法