✨ feat:完成了左侧菜单
This commit is contained in:
sundongyu
parent
c6a7e5260d
commit
b75e67eab1
|
|
@ -3,6 +3,6 @@
|
|||
"semi": false,
|
||||
"tabWidth": 2,
|
||||
"singleQuote": true,
|
||||
"printWidth": 100,
|
||||
"printWidth": 120,
|
||||
"trailingComma": "none"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,59 +1,124 @@
|
|||
<template>
|
||||
<div style="height: 100vh">
|
||||
<t-menu
|
||||
v-model:expanded="expanded"
|
||||
theme="light"
|
||||
default-value="3-2"
|
||||
expand-mutex
|
||||
:collapsed="collapsed"
|
||||
>
|
||||
<div style="height: 100vh; overflow: auto">
|
||||
<t-menu v-model:expanded="expanded" theme="light" default-value="0" expand-mutex :collapsed="collapsed">
|
||||
<template #logo>
|
||||
<img :src="iconUrl" alt="logo" :width="collapsed ? 35 : 136" />
|
||||
</template>
|
||||
<t-submenu value="3">
|
||||
<!-- 首页 -->
|
||||
<t-menu-item value="0">
|
||||
<template #icon>
|
||||
<t-icon name="mail" />
|
||||
<t-icon name="home" />
|
||||
</template>
|
||||
首页
|
||||
</t-menu-item>
|
||||
<!-- 购物 -->
|
||||
<t-submenu value="1">
|
||||
<template #icon>
|
||||
<t-icon name="play-circle" />
|
||||
</template>
|
||||
<template #title>
|
||||
<span>消息区</span>
|
||||
<span>购物</span>
|
||||
</template>
|
||||
<t-submenu value="3-1" title="二级菜单">
|
||||
<t-menu-item value="3-1-1"> 三级菜单内容 </t-menu-item>
|
||||
<t-menu-item value="3-1-2"> 三级菜单内容 </t-menu-item>
|
||||
<t-menu-item value="3-1-3"> 三级菜单内容 </t-menu-item>
|
||||
</t-submenu>
|
||||
<t-submenu value="3-5" title="二级菜单">
|
||||
<t-menu-item value="3-5-1"> 三级菜单内容 </t-menu-item>
|
||||
<t-menu-item value="3-5-2"> 三级菜单内容 </t-menu-item>
|
||||
<t-menu-item value="3-5-3"> 三级菜单内容 </t-menu-item>
|
||||
</t-submenu>
|
||||
<t-menu-item value="1-1"> 二级菜单内容 </t-menu-item>
|
||||
<t-menu-item value="1-2"> 二级菜单内容 </t-menu-item>
|
||||
<t-menu-item value="1-3"> 二级菜单内容 </t-menu-item>
|
||||
</t-submenu>
|
||||
<!-- 销货 -->
|
||||
<t-submenu value="2">
|
||||
<template #icon>
|
||||
<t-icon name="play-circle" />
|
||||
</template>
|
||||
<template #title>
|
||||
<span>销货</span>
|
||||
</template>
|
||||
<t-menu-item value="2-1"> 二级菜单内容 </t-menu-item>
|
||||
<t-menu-item value="2-2"> 二级菜单内容 </t-menu-item>
|
||||
<t-menu-item value="2-3"> 二级菜单内容 </t-menu-item>
|
||||
</t-submenu>
|
||||
<!-- 仓库 -->
|
||||
<t-submenu value="3">
|
||||
<template #icon>
|
||||
<t-icon name="play-circle" />
|
||||
</template>
|
||||
<template #title>
|
||||
<span>仓库</span>
|
||||
</template>
|
||||
<t-menu-item value="3-1"> 二级菜单内容 </t-menu-item>
|
||||
<t-menu-item value="3-2"> 二级菜单内容 </t-menu-item>
|
||||
<t-menu-item value="3-3"> 二级菜单内容 </t-menu-item>
|
||||
<t-menu-item value="3-4"> 二级菜单内容 </t-menu-item>
|
||||
</t-submenu>
|
||||
<t-menu-item value="user-circle">
|
||||
<template #icon>
|
||||
<t-icon name="user-circle" />
|
||||
</template>
|
||||
个人中心
|
||||
</t-menu-item>
|
||||
<!-- 资金 -->
|
||||
<t-submenu value="4">
|
||||
<template #icon>
|
||||
<t-icon name="play-circle" />
|
||||
</template>
|
||||
<template #title>
|
||||
<span>视频区</span>
|
||||
<span>资金</span>
|
||||
</template>
|
||||
<t-menu-item value="4-1"> 二级菜单内容 </t-menu-item>
|
||||
<t-menu-item value="4-2"> 二级菜单内容 </t-menu-item>
|
||||
<t-menu-item value="4-3"> 二级菜单内容 </t-menu-item>
|
||||
</t-submenu>
|
||||
<t-menu-item value="edit1">
|
||||
<!-- 报表 -->
|
||||
<t-submenu value="5">
|
||||
<template #icon>
|
||||
<t-icon name="edit-1" />
|
||||
<t-icon name="play-circle" />
|
||||
</template>
|
||||
资源编辑
|
||||
</t-menu-item>
|
||||
<template #title>
|
||||
<span>报表</span>
|
||||
</template>
|
||||
<t-menu-item value="5-1"> 二级菜单内容 </t-menu-item>
|
||||
<t-menu-item value="5-2"> 二级菜单内容 </t-menu-item>
|
||||
<t-menu-item value="5-3"> 二级菜单内容 </t-menu-item>
|
||||
</t-submenu>
|
||||
<!-- 商品 -->
|
||||
<t-submenu value="6">
|
||||
<template #icon>
|
||||
<t-icon name="play-circle" />
|
||||
</template>
|
||||
<template #title>
|
||||
<span>商品</span>
|
||||
</template>
|
||||
<t-menu-item value="6-1"> 二级菜单内容 </t-menu-item>
|
||||
<t-menu-item value="6-2"> 二级菜单内容 </t-menu-item>
|
||||
<t-menu-item value="6-3"> 二级菜单内容 </t-menu-item>
|
||||
</t-submenu>
|
||||
<!-- 资料 -->
|
||||
<t-submenu value="7">
|
||||
<template #icon>
|
||||
<t-icon name="play-circle" />
|
||||
</template>
|
||||
<template #title>
|
||||
<span>资料</span>
|
||||
</template>
|
||||
<t-menu-item value="7-1"> 二级菜单内容 </t-menu-item>
|
||||
<t-menu-item value="7-2"> 二级菜单内容 </t-menu-item>
|
||||
<t-menu-item value="7-3"> 二级菜单内容 </t-menu-item>
|
||||
</t-submenu>
|
||||
<!-- 系统 -->
|
||||
<t-submenu value="8">
|
||||
<template #icon>
|
||||
<t-icon name="play-circle" />
|
||||
</template>
|
||||
<template #title>
|
||||
<span>系统</span>
|
||||
</template>
|
||||
<t-menu-item value="8-1"> 二级菜单内容 </t-menu-item>
|
||||
<t-menu-item value="8-2"> 二级菜单内容 </t-menu-item>
|
||||
<t-menu-item value="8-3"> 二级菜单内容 </t-menu-item>
|
||||
</t-submenu>
|
||||
<!-- 配置 -->
|
||||
<t-submenu value="9">
|
||||
<template #icon>
|
||||
<t-icon name="play-circle" />
|
||||
</template>
|
||||
<template #title>
|
||||
<span>配置</span>
|
||||
</template>
|
||||
<t-menu-item value="9-1"> 二级菜单内容 </t-menu-item>
|
||||
<t-menu-item value="9-2"> 二级菜单内容 </t-menu-item>
|
||||
<t-menu-item value="9-3"> 二级菜单内容 </t-menu-item>
|
||||
</t-submenu>
|
||||
<template #operations>
|
||||
<t-button variant="text" shape="square" @click="changeCollapsed">
|
||||
<template #icon><t-icon name="view-list" /></template>
|
||||
|
|
@ -67,9 +132,7 @@
|
|||
import { ref } from 'vue'
|
||||
import type { MenuProps, ButtonProps } from 'tdesign-vue-next'
|
||||
const collapsed = ref(false)
|
||||
const iconUrl = ref(
|
||||
'https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/logo%402x.png'
|
||||
)
|
||||
const iconUrl = ref('https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/logo%402x.png')
|
||||
const changeCollapsed: ButtonProps['onClick'] = () => {
|
||||
collapsed.value = !collapsed.value
|
||||
iconUrl.value = collapsed.value
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user