<template>
|
<div class="nut-category">
|
<div class="nut-category__cateList">
|
<scroll-view :scroll-y="true" class="nut-category__cateList-scroll">
|
<div v-for="(item, index) in category" :key="index" class="nut-category__cateListLeft">
|
<div
|
:class="[
|
checkIndex == index
|
? 'nut-category__cateListItemChecked'
|
: 'nut-category__cateListItem',
|
]"
|
@click="getChildList(index)"
|
>
|
{{ item.name }}
|
</div>
|
</div>
|
</scroll-view>
|
<slot></slot>
|
</div>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import { PropType, ref } from 'vue';
|
|
defineOptions({
|
name: 'Category',
|
});
|
|
type CategoryType = {
|
name?: string;
|
[key: string]: any;
|
};
|
|
const props = defineProps({
|
//左侧导航栏
|
category: {
|
type: Array as PropType<CategoryType>,
|
default: () => [],
|
},
|
|
defaultIndex: {
|
type: Number,
|
default: 0,
|
},
|
});
|
|
const emit = defineEmits<{
|
(e: 'change', index: number): void;
|
}>();
|
|
const checkIndex = ref(props.defaultIndex);
|
|
const getChildList = (index: any) => {
|
checkIndex.value = index;
|
emit('change', index);
|
};
|
</script>
|
