优化菜单

This commit is contained in:
icssoa 2022-09-27 12:39:11 +08:00
parent 221ebcd81e
commit 2ac2737953
6 changed files with 39 additions and 33 deletions

View File

@ -22,6 +22,8 @@ export const config = {
router: { router: {
// 模式 // 模式
mode: "history", mode: "history",
// 转场动画
transition: "slide",
// 首页组件 // 首页组件
home: () => import("/$/demo/views/home/index.vue") home: () => import("/$/demo/views/home/index.vue")
}, },

View File

@ -44,6 +44,10 @@ router.append = function (data) {
d.name = d.path.substring(1); d.name = d.path.substring(1);
} }
if (!d.meta) {
d.meta = {};
}
if (!d.component) { if (!d.component) {
const url = d.viewPath; const url = d.viewPath;
@ -62,6 +66,8 @@ router.append = function (data) {
} }
} }
d.meta.dynamic = true;
if (d.isPage) { if (d.isPage) {
router.addRoute(d); router.addRoute(d);
} else { } else {
@ -70,6 +76,17 @@ router.append = function (data) {
}); });
}; };
// 清空路由
router.clear = function () {
const rs = router.getRoutes();
rs.forEach((e) => {
if (e.name) {
router.removeRoute(e.name);
}
});
};
// 找路由 // 找路由
router.find = function (path: string) { router.find = function (path: string) {
return router.getRoutes().find((e) => e.path == path); return router.getRoutes().find((e) => e.path == path);

View File

@ -1,4 +1,4 @@
import { h, ref, watch } from "vue"; import { h } from "vue";
import { useStore } from "../../store"; import { useStore } from "../../store";
import { Menu } from "../../types"; import { Menu } from "../../types";
import { useCool } from "/@/cool"; import { useCool } from "/@/cool";
@ -10,9 +10,6 @@ export default {
const { router, route } = useCool(); const { router, route } = useCool();
const { menu, app } = useStore(); const { menu, app } = useStore();
// 是否可见
const visible = ref(true);
// 页面跳转 // 页面跳转
function toView(url: string) { function toView(url: string) {
if (url != route.path) { if (url != route.path) {
@ -25,23 +22,9 @@ export default {
} }
} }
// 刷新菜单
function refresh() {
visible.value = false;
setTimeout(() => {
visible.value = true;
}, 0);
}
// 监听菜单变化
watch(menu.list, refresh);
return { return {
route, route,
visible,
toView, toView,
refresh,
menu menu
}; };
}, },
@ -105,19 +88,17 @@ export default {
const children = deep(ctx.menu.list, 1); const children = deep(ctx.menu.list, 1);
return ( return (
ctx.visible && (
<div class="app-slider__menu"> <div class="app-slider__menu">
<el-menu <el-menu
default-active={ctx.route.path} default-active={ctx.route.path}
background-color="transparent" background-color="transparent"
collapse-transition={false} collapse-transition={true}
collapse={app.browser.isMini ? false : app.isFold} collapse={app.browser.isMini ? false : app.isFold}
onSelect={ctx.toView} onSelect={ctx.toView}
> >
{children} {children}
</el-menu> </el-menu>
</div> </div>
)
); );
} }
}; };

View File

@ -2,7 +2,7 @@
<div class="app-views"> <div class="app-views">
<router-view v-slot="{ Component }"> <router-view v-slot="{ Component }">
<el-scrollbar> <el-scrollbar>
<transition name="slide"> <transition :name="app.info.router.transition">
<keep-alive :include="caches"> <keep-alive :include="caches">
<component :is="Component" /> <component :is="Component" />
</keep-alive> </keep-alive>
@ -16,7 +16,7 @@
import { computed } from "vue"; import { computed } from "vue";
import { useBase } from "/$/base"; import { useBase } from "/$/base";
const { process } = useBase(); const { process, app } = useBase();
// //
const caches = computed(() => { const caches = computed(() => {

View File

@ -50,6 +50,7 @@
<div class="op"> <div class="op">
<el-button round :loading="saving" @click="toLogin">登录</el-button> <el-button round :loading="saving" @click="toLogin">登录</el-button>
<el-button round @click="toTest">Test</el-button>
</div> </div>
</el-form> </el-form>
</div> </div>
@ -77,6 +78,10 @@ const form = reactive({
verifyCode: "" verifyCode: ""
}); });
function toTest() {
router.push("/my/info");
}
// //
async function toLogin() { async function toLogin() {
if (!form.username) { if (!form.username) {

View File

@ -77,6 +77,7 @@ export const useUserStore = defineStore("user", function () {
// 退出 // 退出
async function logout() { async function logout() {
clear(); clear();
router.clear();
router.push("/login"); router.push("/login");
} }