<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>
特别简单的使用方法