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

<script lang='ts' setup>
import { computed, defineAsyncComponent, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'

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

const activeIndex = defineModel('activeIndex', {
  type: String,
  default: '',
})
const status = ref(true)
const defaultOpeneds = computed(() => {
  return []
})
function handleSelect(value: any) {
  activeIndex.value = value
  emit('click', value)
}

function onClose() {
  activeIndex.value = ''
  emit('click', '')
}
function onClickAll() {
  status.value = false
  onClose()
  const timer = setTimeout(() => {
    status.value = true
    clearTimeout(timer)
  }, 0)
}
</script>

<template>
  <div class="">
    <div v-if="type === 'brand'" class="px-20px py-12px text-16px cursor-pointer pos-relative after:pos-absolute after:content-empty after:bottom-0% after:left-20px after:right-20px after:h-1px after:bg-#DCDFE6" :class="!activeIndex && 'text-#CC9879'" @click="onClickAll">
      All brands
    </div>
    <el-menu
      v-if="status"
      :default-openeds="defaultOpeneds"
      :unique-opened="false"
      :default-active="activeIndex"
      active-text-color="#CC9879"
      class="el-menu-vertical-demo"
      @select="handleSelect"
      @close="onClose"
    >
      <el-sub-menu
        v-for="item, index in list" :key="index"
        :index="item.key"
      >
        <template #title>
          <span>{{ item.title }}</span>
        </template>
        <el-menu-item v-for="items, indexs in item.children" :index="items.key">
          {{ items.title }}
        </el-menu-item>
        <!-- <el-sub-menu index="1-4">
                  <template #title>
                    item four
                  </template>
                  <el-menu-item index="1-4-1">
                    item one
                  </el-menu-item>
                </el-sub-menu> -->
      </el-sub-menu>
    </el-menu>
  </div>
</template>

<style lang='less' scoped>
::v-deep(.el-menu-vertical-demo){
  .el-sub-menu{
    .el-sub-menu__title{
      position: relative;
      &:after{
        content: '';
        position: absolute;
        left: 20px;
        right: 20px;
        bottom:0;
        height: 1px;
        background: #DCDFE6;
      }
    }
    &:last-child{
      .el-sub-menu__title{
          &:after{
            content: unset;
          }
        }
      }
  }
}
</style>