优化菜单

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: {
// 模式
mode: "history",
// 转场动画
transition: "slide",
// 首页组件
home: () => import("/$/demo/views/home/index.vue")
},

View File

@ -44,6 +44,10 @@ router.append = function (data) {
d.name = d.path.substring(1);
}
if (!d.meta) {
d.meta = {};
}
if (!d.component) {
const url = d.viewPath;
@ -62,6 +66,8 @@ router.append = function (data) {
}
}
d.meta.dynamic = true;
if (d.isPage) {
router.addRoute(d);
} 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) {
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 { Menu } from "../../types";
import { useCool } from "/@/cool";
@ -10,9 +10,6 @@ export default {
const { router, route } = useCool();
const { menu, app } = useStore();
// 是否可见
const visible = ref(true);
// 页面跳转
function toView(url: string) {
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 {
route,
visible,
toView,
refresh,
menu
};
},
@ -105,19 +88,17 @@ export default {
const children = deep(ctx.menu.list, 1);
return (
ctx.visible && (
<div class="app-slider__menu">
<el-menu
default-active={ctx.route.path}
background-color="transparent"
collapse-transition={false}
collapse-transition={true}
collapse={app.browser.isMini ? false : app.isFold}
onSelect={ctx.toView}
>
{children}
</el-menu>
</div>
)
);
}
};

View File

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

View File

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

View File

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