必備UI組件
伸縮菜單將用到以下幾個組件：
Container 布局容器
Menu 菜單
組件設計
修改路由：
src\router\index.ts
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
import Home from '../views/Home/index.vue'
import Container from '../components/baseline/container/src/index.vue'
const routes: RouteRecordRaw[] = [
{
path: '/',
component: Container,
children: [
{
path: '/',
component: Home,
},
],
},
]
const router = createRouter({
routes,
history: createWebHistory(),
})
export default router
新建src\components\baseline\container\src\index.vue
<template>
<el-container>
<el-aside width="200px">
<el-menu default-active="2" class="el-menu-vertical-demo">
<el-menu-item index="1">
<el-icon><el-icon-menu /></el-icon>
<span>導航一</span>
</el-menu-item>
<el-menu-item index="2">
<el-icon><el-icon-menu /></el-icon>
<span>導航二</span>
</el-menu-item>
<el-menu-item index="3">
<el-icon><el-icon-menu /></el-icon>
<span>導航三</span>
</el-menu-item>
</el-menu>
</el-aside>
<el-container>
<el-header>Header</el-header>
<el-main>
<router-view></router-view>
</el-main>
</el-container>
</el-container>
</template>
<script lang="ts" setup></script>
<style lang="scss" scoped></style>
修改src\App.vue
<template>
<router-view></router-view>
</template>
<style lang="scss">
* {
margin: 0;
padding: 0;
}
svg {
width: 1em;
height: 1em;
}
html,
body,
#app,
.el-container,
.el-menu {
height: 100%;
}
</style>
效果如下:
image.png
利用el-menu的collapse屬性眨八，可以達到伸縮的效果鞭光。
<template>
<el-container>
<el-aside width="200px">
<el-menu
default-active="2"
:collapse="isCollapse"
class="el-menu-vertical-demo"
>
<el-menu-item index="1">
<el-icon><el-icon-menu /></el-icon>
<span>導航一</span>
</el-menu-item>
<el-menu-item index="2">
<el-icon><el-icon-menu /></el-icon>
<span>導航二</span>
</el-menu-item>
<el-menu-item index="3">
<el-icon><el-icon-menu /></el-icon>
<span>導航三</span>
</el-menu-item>
</el-menu>
</el-aside>
<el-container>
<!-- 頭部 -->
<el-header>
<span @click="toggle">
<el-icon-expand
style="margin-right: 10px"
v-if="isCollapse"
/>
<el-icon-fold style="margin-right: 10px" v-else />
</span>
</el-header>
<el-main>
<router-view></router-view>
</el-main>
</el-container>
</el-container>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const isCollapse = ref(false) //false:默認展開
let toggle = () => {
isCollapse.value = !isCollapse.value
}
</script>
<style lang="scss" scoped></style>
image.png
發(fā)現(xiàn)按鈕沒有并過來浮驳。參考官網(wǎng)的舉例蛔翅，優(yōu)化：
<template>
<el-container>
<el-aside width="auto">
<el-menu
default-active="2"
:collapse="isCollapse"
class="el-menu-vertical-demo"
>
<el-menu-item index="1">
<el-icon><el-icon-menu /></el-icon>
<span>導航一</span>
</el-menu-item>
<el-menu-item index="2">
<el-icon><el-icon-menu /></el-icon>
<span>導航二</span>
</el-menu-item>
<el-menu-item index="3">
<el-icon><el-icon-menu /></el-icon>
<span>導航三</span>
</el-menu-item>
</el-menu>
</el-aside>
<el-container>
<!-- 頭部 -->
<el-header>
<span @click="toggle">
<el-icon-expand
style="margin-right: 10px"
v-if="isCollapse"
/>
<el-icon-fold style="margin-right: 10px" v-else />
</span>
</el-header>
<el-main>
<router-view></router-view>
</el-main>
</el-container>
</el-container>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const isCollapse = ref(false) //false:默認展開
let toggle = () => {
isCollapse.value = !isCollapse.value
}
</script>
<style lang="scss" scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
width: 200px;
min-height: 400px;
}
</style>
image.png
優(yōu)化全局樣式
新建src\style\base.scss
* {
margin: 0;
padding: 0;
}
svg {
width: 1em;
height: 1em;
}
html,
body,
#app,
.el-container,
.el-menu {
height: 100%;
}
html {
font-size: 100px;
}
body {
font-size: 0.12rem;
}
新建src\style\index.scss
@import './base.scss';
修改src\main.ts
import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import * as Icons from '@element-plus/icons-vue'
import { toLine } from './utils'
import './style/index.scss'
const app = createApp(App)
//全局組件注冊胶惰，犧牲一些性能哎迄，但方便使用
//封裝成el-icon-xxx
for (let i in Icons) {
// console.log(`i:`, i)
// console.log('Icons[i]', (Icons as any)[i])
app.component(`el-icon-${toLine(i)}`, (Icons as any)[i])
}
app.use(router)
app.use(ElementPlus)
app.mount('#app')
修改src\App.vue
<template>
<router-view></router-view>
</template>
<style lang="scss"></style>
這樣谭贪，可以100px=1rem蜡励，修改src\components\baseline\container\src\index.vue令花，可以調(diào)整為：
<template>
<el-container>
<el-aside width="auto">
<el-menu
default-active="1"
:collapse="isCollapse"
class="el-menu-vertical-demo"
>
<el-menu-item index="1">
<el-icon><el-icon-menu /></el-icon>
<span>導航一</span>
</el-menu-item>
<el-menu-item index="2">
<el-icon><el-icon-menu /></el-icon>
<span>導航二</span>
</el-menu-item>
<el-menu-item index="3">
<el-icon><el-icon-menu /></el-icon>
<span>導航三</span>
</el-menu-item>
</el-menu>
</el-aside>
<el-container>
<!-- 頭部 -->
<el-header>
<span @click="toggle">
<el-icon-expand
style="margin-right: 0.1rem"
v-if="isCollapse"
/>
<el-icon-fold style="margin-right: 0.1rem" v-else />
</span>
</el-header>
<el-main>
<router-view></router-view>
</el-main>
</el-container>
</el-container>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const isCollapse = ref(false) //false:默認展開
let toggle = () => {
isCollapse.value = !isCollapse.value
}
</script>
<style lang="scss" scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
width: 2rem;
min-height: 4rem;
}
</style>
組件抽離
修改src\components\baseline\container\src\index.vue
<template>
<el-container>
<el-aside width="auto">
<nav-aside :collapse="isCollapse" />
</el-aside>
<el-container>
<!-- 頭部 -->
<el-header>
<nav-header v-model:collapse="isCollapse" />
</el-header>
<el-main>
<router-view></router-view>
</el-main>
</el-container>
</el-container>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import NavAside from './navAside/index.vue'
import NavHeader from './navHeader/index.vue'
const isCollapse = ref(false) //false:默認展開
</script>
<style lang="scss" scoped></style>
新建src\components\baseline\container\src\navHeader\index.vue
<template>
<span @click="toggle">
<el-icon-expand style="margin-right: 0.1rem" v-if="collapse" />
<el-icon-fold style="margin-right: 0.1rem" v-else />
</span>
</template>
<script lang="ts" setup>
/**
* 頭部圖標
**/
let props = defineProps<{ collapse: boolean }>()
let emits = defineEmits(['update:collapse'])
//需要修改父組件的數(shù)據(jù)
let toggle = () => {
emits('update:collapse', !props.collapse)
}
</script>
<style lang="scss" scoped></style>
新建src\components\baseline\container\src\navAside\index.vue
<template>
<el-menu
default-active="1"
:collapse="collapse"
class="el-menu-vertical-demo"
>
<el-menu-item index="1">
<el-icon><el-icon-menu /></el-icon>
<span>首頁</span>
</el-menu-item>
<el-menu-item index="2">
<el-icon><el-icon-menu /></el-icon>
<span>圖標選擇器</span>
</el-menu-item>
<el-menu-item index="3">
<el-icon><el-icon-menu /></el-icon>
<span>趨勢標記</span>
</el-menu-item>
</el-menu>
</template>
<script lang="ts" setup>
let props=defineProps<{collapse:boolean}>()
</script>
<style lang="scss" scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
width: 2rem;
min-height: 4rem;
}
</style>
image.png
樣式優(yōu)化
修改src\components\baseline\container\src\index.vue
<template>
<el-container>
<el-aside width="auto">
<nav-aside :collapse="isCollapse" />
</el-aside>
<el-container>
<!-- 頭部 -->
<el-header>
<nav-header v-model:collapse="isCollapse" />
</el-header>
<el-main>
<router-view></router-view>
</el-main>
</el-container>
</el-container>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import NavAside from './navAside/index.vue'
import NavHeader from './navHeader/index.vue'
const isCollapse = ref(false) //false:默認展開
</script>
<style lang="scss" scoped>
.el-header {
padding: 0;
border-bottom: 2px solid #eee;
}
</style>
修改src\components\baseline\container\src\navHeader\index.vue
<template>
<div class="bs-wrapper">
<span @click="toggle">
<el-icon-expand style="margin-right: 0.1rem" v-if="collapse" />
<el-icon-fold style="margin-right: 0.1rem" v-else />
</span>
</div>
</template>
<script lang="ts" setup>
/**
* 頭部圖標
**/
let props = defineProps<{ collapse: boolean }>()
let emits = defineEmits(['update:collapse'])
//需要修改父組件的數(shù)據(jù)
let toggle = () => {
emits('update:collapse', !props.collapse)
}
</script>
<style lang="scss" scoped>
.bs-wrapper {
height: 0.6rem;
padding: 0 0.2rem;
display: flex;
align-items: center;
}
</style>
image.png
