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