147 lines
3.1 KiB
Plaintext
147 lines
3.1 KiB
Plaintext
<!-- CSR 碳中和 -->
|
|
<script setup lang="tsx">
|
|
import { NMenu, NIcon, NEllipsis } from 'naive-ui'
|
|
import { ChevronDown } from '@vicons/ionicons5'
|
|
import Icon1 from './images/icon-1.png'
|
|
import Icon2 from './images/icon-2.png'
|
|
import type { MenuOption } from 'naive-ui'
|
|
|
|
const props = defineProps({
|
|
treeData:{
|
|
type: Array as PropType<any[]>,
|
|
default: () => [],
|
|
}
|
|
})
|
|
const emit = defineEmits(['clickChliden']);
|
|
|
|
const expandedKeys = ref<any[]>(['1', '1-1'])
|
|
|
|
function handleExpandIcon(option: MenuOption) {
|
|
// console.log(option,option.id,option.key)
|
|
emit('clickChliden',option.id)
|
|
if (option.level == 1) {
|
|
if (unref(expandedKeys).includes(option.key)) {
|
|
return <img src={Icon2} class="w20px h20px" />
|
|
} else {
|
|
return <img src={Icon1} class="w20px h20px" />
|
|
}
|
|
}
|
|
return null
|
|
}
|
|
function handleNodeProps(option: MenuOption) {
|
|
// console.log(option,option.id,option.key)
|
|
return { level: option.level as number }
|
|
}
|
|
const clickthis = (id)=>{
|
|
emit('clickChliden',id)
|
|
console.log(id)
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="box h-full relative flex flex-col ">
|
|
<NMenu class="cus-menu"
|
|
accordion
|
|
:root-indent="5"
|
|
:indent="10"
|
|
:options="treeData"
|
|
children-field="treeList"
|
|
key-field="id"
|
|
:node-props="handleNodeProps"
|
|
@update:value="clickthis"
|
|
:expand-icon="handleExpandIcon" />
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped lang="less">
|
|
// .box {
|
|
// background-image: url('./images/bg-side.svg');
|
|
// background-position: -350px 540px;
|
|
// background-repeat: no-repeat;
|
|
// }
|
|
:deep(.cus-menu.n-menu) {
|
|
@item: n-menu-item;
|
|
@content: n-menu-item-content;
|
|
@submenu: n-submenu;
|
|
|
|
.@{submenu} {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.n-menu-item {
|
|
font-size: 18px;
|
|
margin-top: 0;
|
|
|
|
.@{content} {
|
|
height: 100%;
|
|
width: 100%;
|
|
|
|
&::before {
|
|
display: none;
|
|
}
|
|
|
|
.@{content}-header,
|
|
.@{content}__arrow {
|
|
color: #003db7;
|
|
}
|
|
|
|
.@{content}__arrow {
|
|
font-size: 28px;
|
|
}
|
|
}
|
|
|
|
&[level='1'] {
|
|
background: #417bef;
|
|
height: 40px;
|
|
|
|
// margin-top: 10px;
|
|
.@{content}-header {
|
|
color: #fff;
|
|
}
|
|
|
|
&:has(.@{content}--child-active),
|
|
&:has(.@{content}--selected) {
|
|
background: #003db7;
|
|
padding-left: 10px !important;
|
|
}
|
|
}
|
|
|
|
&[level='2'] {
|
|
height: 40px;
|
|
background: #ebf1ff;
|
|
|
|
.@{content}-header {
|
|
color: #999999;
|
|
}
|
|
|
|
&:has(.@{content}--child-active),
|
|
&:has(.@{content}--selected) {
|
|
background: #bfd4ff;
|
|
|
|
.@{content}-header {
|
|
color: #032fa0;
|
|
}
|
|
}
|
|
}
|
|
|
|
&[level='3'] {
|
|
background: #ebf1ff;
|
|
height: 80px;
|
|
|
|
.@{content}-header,
|
|
.@{content}__arrow {
|
|
color: #999999;
|
|
}
|
|
|
|
&:has(.@{content}--selected) {
|
|
background-color: #e1eafc;
|
|
|
|
.@{content}-header,
|
|
.@{content}__arrow {
|
|
color: #142142;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}</style>
|