fashion-ssr-vue3/components/banner-category-sider/index.vue

<script lang='ts' setup>
defineProps({
  isOpen: {
    type: Boolean,
    default: false,
  },
})
const emit = defineEmits(['click'])
const list = defineModel('list', {
  type: Array as PropType<any[]>,
  default: () => [],
})
const activeIndex = defineModel('activeIndex', {
  type: String,
  default: '',
})

function handleSelect(value: any) {
  activeIndex.value = value
  emit('click', value)
}
</script>

<template>
  <div>
    <el-menu
      :unique-opened="true"
      :default-active="activeIndex"
      active-text-color="#CC9879"
      class="el-menu-banner-slider"
      @select="handleSelect"
    >
      <el-menu-item
        v-for="item, index in list" :key="index"
        :index="item.key"
      >
        {{ item.title }}
      </el-menu-item>
    </el-menu>
  </div>
</template>

<style lang='less' scoped>
::v-deep(.el-menu-banner-slider){
  // 继承
  background-color: inherit!important;
    .el-menu-item{
      margin-bottom: 30px;
      padding: 0!important;
      height: 16px!important;
      font-size: 16px!important;
      line-height: normal!important;
      color: #333;
      &:last-child{
        margin-bottom: 0;
      }
    }
}
</style>