48 lines
1.3 KiB
Vue
48 lines
1.3 KiB
Vue
|
<template>
|
||
|
|
<el-menu class="MyMenu" :default-active="`1-${script.menuList.value[0]?.children[0]?.uid}`">
|
||
|
|
<el-sub-menu index="1">
|
||
|
|
<template #title>
|
||
|
|
<span>{{ script.menuList.value[0]?.title }}</span>
|
||
|
|
</template>
|
||
|
|
<el-menu-item
|
||
|
|
:index="`1-${menuItem.uid}`"
|
||
|
|
:key="menuItem.uid"
|
||
|
|
v-for="menuItem in script.menuList.value[0]?.children"
|
||
|
|
@click="script.handleMenuClick(menuItem)"
|
||
|
|
>
|
||
|
|
<img :src="menuItem.icon" class="menu-icon" v-if="menuItem.icon" />
|
||
|
|
<span>{{ menuItem.title }}</span>
|
||
|
|
</el-menu-item>
|
||
|
|
</el-sub-menu>
|
||
|
|
</el-menu>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
import { Menu as IconMenu, HomeFilled } from "@element-plus/icons-vue";
|
||
|
|
import scriptFn from "./index.js";
|
||
|
|
const script = scriptFn();
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped lang="less">
|
||
|
|
.MyMenu {
|
||
|
|
padding: 16px;
|
||
|
|
--el-menu-bg-color: transparent;
|
||
|
|
--el-menu-active-color: #fff;
|
||
|
|
:deep(.el-menu-item) {
|
||
|
|
border-radius: 5px;
|
||
|
|
transition: all 0.3s;
|
||
|
|
&:hover {
|
||
|
|
transform: translateX(5px);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
:deep(.el-menu-item.is-active) {
|
||
|
|
background-color: #34acf7 !important;
|
||
|
|
}
|
||
|
|
.menu-icon {
|
||
|
|
width: 18px;
|
||
|
|
height: 18px;
|
||
|
|
margin-right: 8px;
|
||
|
|
vertical-align: middle;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|