全栈开发实战小草看书之Web端(十)布局
介绍
参考Element Plus基础组件中的Container 布局容器和导航中的Menu 菜单、Dropdown 下拉菜单、Tabs 标签页示例进行布局,同时使用了screenfull切换全屏
代码文件(pages/home/Index.vue)
<template>
<el-container>
<el-header>
<div class="row-side">
<div class="row-center">
<div class="hover" @click="toggleCollapse">
<el-icon v-if="collapse">
<expand></expand>
</el-icon>
<el-icon v-else>
<fold></fold>
</el-icon>
</div>
<span>Kskj</span>
</div>
<div class="row-center">
<div class="hover" @click="clearPages">
<el-tooltip content="清空">
<el-icon>
<folder-delete></folder-delete>
</el-icon>
</el-tooltip>
</div>
<div class="hover" @click="toggleScreen">
<el-tooltip content="全屏">
<el-icon>
<full-screen></full-screen>
</el-icon>
</el-tooltip>
</div>
<el-dropdown class="hover" @command="commandUser">
<div>
<el-icon>
<user></user>
</el-icon>
<span>{{ user.userName }}</span>
</div>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item command="logout">注销</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</div>
</div>
</el-header>
<el-container>
<el-aside :width="collapse ? '75px' : '302px'">
<el-menu :collapse="collapse" :default-active="fullPath" unique-opened router>
<template v-for="r in resources" :key="r.code">
<el-sub-menu v-if="r.children.length" :index="r.url">
<template #title>
<el-icon>
<component :is="r.icon"></component>
</el-icon>
<span>{{ r.name }}</span>
</template>
<el-menu-item v-for="c in r.children" :key="c.code" :index="c.url">
<el-icon>
<component :is="c.icon"></component>
</el-icon>
<span>{{ c.name }}</span>
</el-menu-item>
</el-sub-menu>
<el-menu-item v-else :index="r.url">
<el-icon>
<component :is="r.icon"></component>
</el-icon>
<span>{{ r.name }}</span>
</el-menu-item>
</template>
</el-menu>
</el-aside>
<el-main>
<el-tabs v-model="fullPath" type="card" @tab-click="clickTab" @tab-remove="removeTab">
<el-tab-pane v-for="page in pages" :key="page.path" :label="page.title" :name="page.path" :closable="page.path != '/'"></el-tab-pane>
</el-tabs>
<router-view v-slot="{ Component }">
<keep-alive>
<component :is="Component"></component>
</keep-alive>
</router-view>
</el-main>
</el-container>
</el-container>
</template>
<script>
import { toRefs } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useStore } from "vuex";
import screenfull from "screenfull";
export default {
setup() {
const router = useRouter();
const route = useRoute();
const store = useStore();
const toggleCollapse = () => store.commit("toggleCollapse");
const clearPages = () => {
store.commit("clearPages");
router.push("/");
};
const toggleScreen = () => screenfull.toggle();
const commandUser = (command) => {
if (command == "logout") {
store.commit("clearUser");
store.commit("clearPages");
store.commit("clearResources");
router.push("/login");
}
};
const clickTab = (tab) => router.push(tab.paneName);
const removeTab = (name) => {
store.commit("removePage", name);
router.push("/");
};
return {
...toRefs(route),
...toRefs(store.state),
toggleCollapse,
clearPages,
toggleScreen,
commandUser,
clickTab,
removeTab,
};
},
};
</script>