mirror of
https://github.com/cool-team-official/cool-admin-vue.git
synced 2024-11-01 14:10:27 +08:00
优化菜单
This commit is contained in:
parent
221ebcd81e
commit
2ac2737953
@ -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")
|
||||||
},
|
},
|
||||||
|
@ -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);
|
||||||
|
@ -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>
|
||||||
)
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
@ -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(() => {
|
||||||
|
@ -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) {
|
||||||
|
@ -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");
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user