<template>
|
<a-layout id="app-layout-sider">
|
<a-layout-sider theme="light" width="196">
|
<a-menu class="menuClass"
|
:items="menu"
|
theme="light"
|
mode="inline"
|
:selectedKeys="[current]"
|
@click="menuHandle"
|
></a-menu>
|
</a-layout-sider>
|
<a-layout-content>
|
<router-view />
|
</a-layout-content>
|
</a-layout>
|
</template>
|
<script setup>
|
import {ref, h, watch} from "vue";
|
import {CloudServerOutlined,CreditCardOutlined,SettingOutlined} from '@ant-design/icons-vue';
|
import router from "@/router";
|
const menu = ref([
|
{label: '通讯设置', key: 'Communication',icon: h(CloudServerOutlined)},
|
{label: '卡片设置', key: 'Card', icon: h(CreditCardOutlined)},
|
{label: '高级设置', key: 'Advanced', icon: h(SettingOutlined)},
|
])
|
const current = ref('Communication');
|
|
const menuHandle = (e) => {
|
console.log(e);
|
current.value = e ? e.key: current.value;
|
router.push({name: current.value});
|
}
|
|
current.value = router.currentRoute.value.name?router.currentRoute.value.name :'Communication'
|
|
|
|
|
</script>
|
<style scoped lang="less">
|
#app-layout-sider{
|
height: 100%;
|
.menuClass{
|
width: 196px;
|
margin-top:20px;
|
v-deep(.ant-menu-item-icon){
|
font-size: 22px;
|
}
|
v-deep(.ant-menu-title-content){
|
text-align: left;
|
}
|
}
|
}
|
|
</style>
|
