<template>
|
<div class="nut-category">
|
<div class="nut-category__cateList">
|
<div v-if="type == 'classify' || type == 'text'">
|
<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.catName }}
|
</div>
|
</div>
|
</div>
|
|
<slot></slot>
|
</div>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import { ref } from 'vue';
|
|
defineOptions({
|
name: 'ProCategory',
|
});
|
|
type CategoryType = {
|
catName?: string;
|
[key: string]: any;
|
};
|
|
type Props = {
|
type?: 'classify' | 'text' | 'custom';
|
category?: CategoryType[];
|
};
|
|
const props = withDefaults(defineProps<Props>(), {
|
type: 'classify',
|
category: () => [],
|
});
|
|
const emit = defineEmits<{
|
(e: 'change', index: number): void;
|
}>();
|
|
const checkIndex = ref(0);
|
const categoryLeft = ref(false); //是否显示slot
|
|
const getChildList = (index: number) => {
|
checkIndex.value = index;
|
emit('change', index);
|
};
|
|
defineExpose({ getChildList });
|
</script>
|