Skip to content

P
pro-layout
Commit 1cb1789c authored by Sendya's avatar Sendya
Browse files
Options

fix: menu

parent 91f5f097
Hide whitespace changes
Inline Side-by-side
Showing with 191 additions and 68 deletions
examples/_util/icons.ts 0 → 100644
View file @ 1cb1789c
import type { App } from 'vue';
import * as Icons from '@ant-design/icons-vue';
const filterIcons = ['default', 'createFromIconfontCN', 'getTwoToneColor', 'setTwoToneColor'];
export default (app: App) => {
Object.keys(Icons)
.filter(k => !filterIcons.includes(k))
.forEach(k => {
app.component(Icons[k].displayName, Icons[k]);
});
};
examples/demo/form.tsx 0 → 100644
View file @ 1cb1789c
import { defineComponent } from 'vue';
export default defineComponent({
setup() {
return () => <div>Form1</div>;
},
});
examples/demo/page1.tsx 0 → 100644
View file @ 1cb1789c
import { defineComponent } from 'vue';
export default defineComponent({
setup() {
return () => <div>Page1</div>;
},
});
examples/demo/welcome.tsx 0 → 100644
View file @ 1cb1789c
import { defineComponent } from 'vue';
export default defineComponent({
setup() {
return () => <div>Welcome</div>;
},
});
examples/index.html
View file @ 1cb1789c
<html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link href="index.css" type="text/css" rel="stylesheet">
<style>
#app {
height: 100%;
}
</style>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app">
<div></div>
</div>
</body>
<script src="index.js"></script>
......
examples/index.tsx
View file @ 1cb1789c
import 'ant-design-vue/dist/antd.less';
import { createApp, defineComponent, onMounted, watch, ref, reactive } from 'vue';
import { RouterLink } from './mock-router';
import { createRouter, createWebHashHistory } from 'vue-router';
import { Button, Avatar, Space, message } from 'ant-design-vue';
import { UserOutlined } from '@ant-design/icons-vue';
import { default as ProLayout } from '../src/';
import { menus } from './menus';
import * as Icon from '@ant-design/icons-vue';
import { createRouteContext, RouteContextProps } from '../src/RouteContext';
import { menus } from './menus';
import registerIcons from './_util/icons';
// demo pages
import Page1 from './demo/page1';
import Welcome from './demo/welcome';
import FormPage from './demo/form';
const BasicLayout = defineComponent({
name: 'BasicLayout',
......@@ -70,7 +76,7 @@ const BasicLayout = defineComponent({
v-slots={{
rightContentRender: () => (
<div style="margin-right: 16px;">
<Avatar icon={<Icon.UserOutlined />} /> Sendya
<Avatar icon={<UserOutlined />} /> Sendya
</div>
),
menuHeaderRender: () => (
......@@ -81,24 +87,7 @@ const BasicLayout = defineComponent({
),
}}
>
<Space>
<Button
type="primary"
onClick={() => {
message.info('clicked.');
}}
>
Click Me!!
</Button>
<Button
onClick={() => {
state.navTheme = state.navTheme === 'light' ? 'dark' : 'light';
}}
>
Switch Theme
</Button>
</Space>
<router-view />
</ProLayout>
</RouteContextProvider>
);
......@@ -108,20 +97,95 @@ const BasicLayout = defineComponent({
const SimpleDemo = {
setup() {
return () => (
<div class="components">
<BasicLayout />
<div style={{ height: '100%' }}>
<router-view />
</div>
);
},
};
const RouteView = defineComponent({
setup() {
return () => <router-view />;
},
});
const routes = [
{
path: '/welcome',
name: 'welcome',
meta: { title: 'Welcome' },
component: Welcome,
},
{
path: '/dashboard',
name: 'dashboard',
meta: { title: 'dashboard' },
component: RouteView,
children: [
{
path: '/dashboard/analysis',
name: 'analysis',
meta: { icon: 'SmileOutlined', title: 'Analysis' },
component: Page1,
},
{
path: '/dashboard/monitor',
name: 'monitor',
meta: { icon: 'SmileOutlined', title: 'Monitor' },
component: Page1,
},
{
path: '/dashboard/workplace',
name: 'workplace',
meta: { icon: 'SmileOutlined', title: 'Workplace' },
component: Page1,
},
],
},
{
path: '/form',
name: 'form',
meta: { title: 'Form', icon: 'SmileOutlined' },
component: RouteView,
children: [
{
path: '/form/basic-form',
name: 'basic-form',
meta: { icon: 'SmileOutlined', title: 'Basic Form' },
component: FormPage,
},
{
path: '/form/step-form',
name: 'step-form',
meta: { icon: 'SmileOutlined', title: 'Step Form' },
component: FormPage,
},
{
path: '/form/advanced-form',
name: 'advance-form',
meta: { icon: 'SmileOutlined', title: 'Advanced Form' },
component: FormPage,
},
],
},
];
const router = createRouter({
routes: [
{
path: '/',
name: 'index',
meta: { title: '' },
component: BasicLayout,
children: routes,
},
],
history: createWebHashHistory(),
});
const app = createApp(SimpleDemo);
const filterIcons = ['default', 'createFromIconfontCN', 'getTwoToneColor', 'setTwoToneColor'];
Object.keys(Icon)
.filter(k => !filterIcons.includes(k))
.forEach(k => {
app.component(Icon[k].displayName, Icon[k]);
});
registerIcons(app);
app.use(RouterLink).use(ProLayout).mount('#app');
app.use(router).use(ProLayout).mount('#app');
examples/menus.ts
View file @ 1cb1789c
......@@ -8,22 +8,22 @@ export const menus: RouteProps[] = [
},
{
path: '/dashboard',
name: 'Dashboard',
name: 'dashboard',
meta: { icon: 'dashboard-outlined', title: 'Dashboard' },
children: [
{
path: '/dashboard/analysis',
name: 'Analysis',
name: 'analysis',
meta: { icon: 'SmileOutlined', title: 'Analysis' },
},
{
path: '/dashboard/monitor',
name: 'Monitor',
name: 'monitor',
meta: { icon: 'SmileOutlined', title: 'Monitor' },
},
{
path: '/dashboard/workplace',
name: 'Workplace',
name: 'workplace',
meta: { icon: 'SmileOutlined', title: 'Workplace' },
},
],
......@@ -50,4 +50,4 @@ export const menus: RouteProps[] = [
},
],
},
]
];
examples/mock-router.tsx
View file @ 1cb1789c
import { defineComponent, toRefs, PropType } from 'vue';
import { withInstall } from 'ant-design-vue/es/_util/type';
export const RouterLink = withInstall(defineComponent({
name: 'RouterLink',
props: {
href: {
type: String,
default: null,
export const useRoute = () => {
console.log('path', location.pathname);
return {
matched: [],
};
};
export const RouterLink = withInstall(
defineComponent({
name: 'RouterLink',
props: {
href: {
type: String,
default: null,
},
to: {
type: [Object, String] as PropType<Record<string, any> | string>,
default: () => undefined,
},
},
to: {
type: [Object, String] as PropType<Record<string, any> | string>,
default: () => undefined,
setup(props, { slots }) {
const { to, href } = toRefs(props);
const curHref =
(href.value && href.value) || typeof to.value === 'string'
? to.value
: to.value.name || to.value.path;
return () => <a href={`#${curHref}`}>{slots.default?.()}</a>;
},
},
setup(props, { slots }) {
const { to, href } = toRefs(props);
const curHref = href.value && href.value || typeof to.value === 'string' ? to.value : (to.value.name || to.value.path);
return () => <a href={`#${curHref}`}>{slots.default?.()}</a>;
},
}));
}),
);
export const RouterView = withInstall(defineComponent({
name: 'RouterView',
setup(_, { slots }) {
return () => slots.default?.();
}
}));
export const RouterView = withInstall(
defineComponent({
name: 'RouterView',
setup(_, { slots }) {
return () => slots.default?.();
},
}),
);
package.json
View file @ 1cb1789c
......@@ -68,7 +68,7 @@
"typescript": "~3.9.3",
"vue": "^3.0.0-0",
"vue-jest": "^5.0.0-alpha.3",
"vue-router": "^4.0.0-beta.13"
"vue-router": "^4.0.3"
},
"dependencies": {
"@babel/runtime": "^7.11.2",
......
src/SiderMenu/SiderMenu.tsx
View file @ 1cb1789c
......@@ -117,9 +117,10 @@ const SiderMenu: FunctionalComponent<SiderMenuProps> = (props: SiderMenuProps) =
};
});
const hasSide = computed(() => props.layout === 'mix' && context.splitMenus);
const flatMenuData = computed(
() => hasSide.value && getMenuFirstChildren(context.menuData, context.selectedKeys[0]),
);
const flatMenuData = computed(() => {
console.log('context.selectedKeys', context.selectedKeys);
return hasSide.value && getMenuFirstChildren(context.menuData, context.selectedKeys[0]);
});
// call menuHeaderRender
const headerDom = defaultRenderLogoAndTitle(props);
const extraDom = menuExtraRender && menuExtraRender(props);
......
yarn.lock
View file @ 1cb1789c
......@@ -15804,10 +15804,10 @@ vue-loader@^15.9.2:
vue-hot-reload-api "^2.3.0"
vue-style-loader "^4.1.0"
vue-router@^4.0.0-beta.13:
version "4.0.1"
resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-4.0.1.tgz#309240e50524b1e7d4e82e27f0a0fa25fe3d1d71"
integrity sha512-2C2nRxA2nCusgJyUpvcbd9Bnc9kACp/VLUCK4drXtgeRXHjQliZJcgjjP268vkGvvEKun9jjp8Ic1PpzUgbYKg==
vue-router@^4.0.3:
version "4.0.3"
resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-4.0.3.tgz#8b26050c88b2dec7e27a88835f71046b365823ec"
integrity sha512-AD1OjtVPyQHTSpoRsEGfPpxRQwhAhxcacOYO3zJ3KNkYP/r09mileSp6kdMQKhZWP2cFsPR3E2M3PZguSN5/ww==
vue-style-loader@^4.1.0, vue-style-loader@^4.1.2:
version "4.1.2"
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment