Skip to content

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

fix: menu

parent 91f5f097
Show 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> <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"> <link href="index.css" type="text/css" rel="stylesheet">
<style>
#app {
height: 100%;
}
</style>
</head> </head>
<body> <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 id="app">
<div></div>
</div> </div>
</body> </body>
<script src="index.js"></script> <script src="index.js"></script>
......
examples/index.tsx
View file @ 1cb1789c
import 'ant-design-vue/dist/antd.less'; import 'ant-design-vue/dist/antd.less';
import { createApp, defineComponent, onMounted, watch, ref, reactive } from 'vue'; 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 { Button, Avatar, Space, message } from 'ant-design-vue';
import { UserOutlined } from '@ant-design/icons-vue';
import { default as ProLayout } from '../src/'; 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 { 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({ const BasicLayout = defineComponent({
name: 'BasicLayout', name: 'BasicLayout',
...@@ -70,7 +76,7 @@ const BasicLayout = defineComponent({ ...@@ -70,7 +76,7 @@ const BasicLayout = defineComponent({
v-slots={{ v-slots={{
rightContentRender: () => ( rightContentRender: () => (
<div style="margin-right: 16px;"> <div style="margin-right: 16px;">
<Avatar icon={<Icon.UserOutlined />} /> Sendya <Avatar icon={<UserOutlined />} /> Sendya
</div> </div>
), ),
menuHeaderRender: () => ( menuHeaderRender: () => (
...@@ -81,24 +87,7 @@ const BasicLayout = defineComponent({ ...@@ -81,24 +87,7 @@ const BasicLayout = defineComponent({
), ),
}} }}
> >
<Space> <router-view />
<Button
type="primary"
onClick={() => {
message.info('clicked.');
}}
>
Click Me!!
</Button>
<Button
onClick={() => {
state.navTheme = state.navTheme === 'light' ? 'dark' : 'light';
}}
>
Switch Theme
</Button>
</Space>
</ProLayout> </ProLayout>
</RouteContextProvider> </RouteContextProvider>
); );
...@@ -108,20 +97,95 @@ const BasicLayout = defineComponent({ ...@@ -108,20 +97,95 @@ const BasicLayout = defineComponent({
const SimpleDemo = { const SimpleDemo = {
setup() { setup() {
return () => ( return () => (
<div class="components"> <div style={{ height: '100%' }}>
<BasicLayout /> <router-view />
</div> </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 app = createApp(SimpleDemo);
const filterIcons = ['default', 'createFromIconfontCN', 'getTwoToneColor', 'setTwoToneColor']; registerIcons(app);
Object.keys(Icon)
.filter(k => !filterIcons.includes(k))
.forEach(k => {
app.component(Icon[k].displayName, Icon[k]);
});
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[] = [ ...@@ -8,22 +8,22 @@ export const menus: RouteProps[] = [
}, },
{ {
path: '/dashboard', path: '/dashboard',
name: 'Dashboard', name: 'dashboard',
meta: { icon: 'dashboard-outlined', title: 'Dashboard' }, meta: { icon: 'dashboard-outlined', title: 'Dashboard' },
children: [ children: [
{ {
path: '/dashboard/analysis', path: '/dashboard/analysis',
name: 'Analysis', name: 'analysis',
meta: { icon: 'SmileOutlined', title: 'Analysis' }, meta: { icon: 'SmileOutlined', title: 'Analysis' },
}, },
{ {
path: '/dashboard/monitor', path: '/dashboard/monitor',
name: 'Monitor', name: 'monitor',
meta: { icon: 'SmileOutlined', title: 'Monitor' }, meta: { icon: 'SmileOutlined', title: 'Monitor' },
}, },
{ {
path: '/dashboard/workplace', path: '/dashboard/workplace',
name: 'Workplace', name: 'workplace',
meta: { icon: 'SmileOutlined', title: 'Workplace' }, meta: { icon: 'SmileOutlined', title: 'Workplace' },
}, },
], ],
...@@ -50,4 +50,4 @@ export const menus: RouteProps[] = [ ...@@ -50,4 +50,4 @@ export const menus: RouteProps[] = [
}, },
], ],
}, },
] ];
examples/mock-router.tsx
View file @ 1cb1789c
import { defineComponent, toRefs, PropType } from 'vue'; import { defineComponent, toRefs, PropType } from 'vue';
import { withInstall } from 'ant-design-vue/es/_util/type'; import { withInstall } from 'ant-design-vue/es/_util/type';
export const RouterLink = withInstall(defineComponent({ export const useRoute = () => {
console.log('path', location.pathname);
return {
matched: [],
};
};
export const RouterLink = withInstall(
defineComponent({
name: 'RouterLink', name: 'RouterLink',
props: { props: {
href: { href: {
...@@ -15,14 +23,20 @@ export const RouterLink = withInstall(defineComponent({ ...@@ -15,14 +23,20 @@ export const RouterLink = withInstall(defineComponent({
}, },
setup(props, { slots }) { setup(props, { slots }) {
const { to, href } = toRefs(props); const { to, href } = toRefs(props);
const curHref = href.value && href.value || typeof to.value === 'string' ? to.value : (to.value.name || to.value.path); 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>; return () => <a href={`#${curHref}`}>{slots.default?.()}</a>;
}, },
})); }),
);
export const RouterView = withInstall(defineComponent({ export const RouterView = withInstall(
defineComponent({
name: 'RouterView', name: 'RouterView',
setup(_, { slots }) { setup(_, { slots }) {
return () => slots.default?.(); return () => slots.default?.();
} },
})); }),
);
package.json
View file @ 1cb1789c
...@@ -68,7 +68,7 @@ ...@@ -68,7 +68,7 @@
"typescript": "~3.9.3", "typescript": "~3.9.3",
"vue": "^3.0.0-0", "vue": "^3.0.0-0",
"vue-jest": "^5.0.0-alpha.3", "vue-jest": "^5.0.0-alpha.3",
"vue-router": "^4.0.0-beta.13" "vue-router": "^4.0.3"
}, },
"dependencies": { "dependencies": {
"@babel/runtime": "^7.11.2", "@babel/runtime": "^7.11.2",
......
src/SiderMenu/SiderMenu.tsx
View file @ 1cb1789c
...@@ -117,9 +117,10 @@ const SiderMenu: FunctionalComponent<SiderMenuProps> = (props: SiderMenuProps) = ...@@ -117,9 +117,10 @@ const SiderMenu: FunctionalComponent<SiderMenuProps> = (props: SiderMenuProps) =
}; };
}); });
const hasSide = computed(() => props.layout === 'mix' && context.splitMenus); const hasSide = computed(() => props.layout === 'mix' && context.splitMenus);
const flatMenuData = computed( const flatMenuData = computed(() => {
() => hasSide.value && getMenuFirstChildren(context.menuData, context.selectedKeys[0]), console.log('context.selectedKeys', context.selectedKeys);
); return hasSide.value && getMenuFirstChildren(context.menuData, context.selectedKeys[0]);
});
// call menuHeaderRender // call menuHeaderRender
const headerDom = defaultRenderLogoAndTitle(props); const headerDom = defaultRenderLogoAndTitle(props);
const extraDom = menuExtraRender && menuExtraRender(props); const extraDom = menuExtraRender && menuExtraRender(props);
......
yarn.lock
View file @ 1cb1789c
...@@ -15804,10 +15804,10 @@ vue-loader@^15.9.2: ...@@ -15804,10 +15804,10 @@ vue-loader@^15.9.2:
vue-hot-reload-api "^2.3.0" vue-hot-reload-api "^2.3.0"
vue-style-loader "^4.1.0" vue-style-loader "^4.1.0"
vue-router@^4.0.0-beta.13: vue-router@^4.0.3:
version "4.0.1" version "4.0.3"
resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-4.0.1.tgz#309240e50524b1e7d4e82e27f0a0fa25fe3d1d71" resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-4.0.3.tgz#8b26050c88b2dec7e27a88835f71046b365823ec"
integrity sha512-2C2nRxA2nCusgJyUpvcbd9Bnc9kACp/VLUCK4drXtgeRXHjQliZJcgjjP268vkGvvEKun9jjp8Ic1PpzUgbYKg== integrity sha512-AD1OjtVPyQHTSpoRsEGfPpxRQwhAhxcacOYO3zJ3KNkYP/r09mileSp6kdMQKhZWP2cFsPR3E2M3PZguSN5/ww==
vue-style-loader@^4.1.0, vue-style-loader@^4.1.2: vue-style-loader@^4.1.0, vue-style-loader@^4.1.2:
version "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