Skip to content

P
pro-layout
Commit 4ecee35a authored by Sendya's avatar Sendya Committed by 言肆
Browse files
Options

fix: layout props effects

parent 2f9d0e8d
Hide whitespace changes
Inline Side-by-side
Showing with 228 additions and 166 deletions
examples/demo.less 0 → 100644
View file @ 4ecee35a
@import '~ant-design-vue/es/style/themes/default.less';
.right-content {
height: 48px;
min-width: 100px;
padding: 0 12px;
float: right;
display: flex;
margin-left: auto;
overflow: hidden;
text-align: right;
> * {
height: 100%;
}
&.mix-dark,
&.mix-light {
color: @text-color-dark;
}
&.side-dark,
&.side-light,
&.top-light {
color: @text-color;
}
&.top-dark {
color: @text-color-dark;
}
.action {
display: flex;
align-items: center;
padding: 0 12px;
cursor: pointer;
transition: all 0.3s;
&:hover {
background: rgba(0, 0, 0, 0.055);
}
}
}
.action-overlay {
.ant-dropdown-menu-item {
min-width: 160px;
> span {
margin-right: 6px;
}
}
}
examples/demo/welcome.tsx
View file @ 4ecee35a
import { defineComponent } from 'vue'; import { defineComponent } from 'vue';
import { Button, Space, Select, Switch } from 'ant-design-vue';
import { globalState as state } from '../state'; import { globalState as state } from '../state';
export default defineComponent({ export default defineComponent({
...@@ -7,51 +7,7 @@ export default defineComponent({ ...@@ -7,51 +7,7 @@ export default defineComponent({
return () => ( return () => (
<div> <div>
<div>Welcome</div> <div>Welcome</div>
<Space>
<Button
onClick={() => {
state.navTheme = state.navTheme === 'dark' ? 'light' : 'dark';
}}
>
Theme Switch
</Button>
<Select
value={state.layout}
onChange={val => {
state.layout = val;
}}
style={{ width: '150px' }}
>
<Select.Option value="side">Side</Select.Option>
<Select.Option value="top">Top</Select.Option>
<Select.Option value="mix">Mix</Select.Option>
</Select>
<Switch
checkedChildren="Fixed Header"
unCheckedChildren="UnFixed Header"
checked={state.fixedHeader}
onChange={() => {
state.fixedHeader = !state.fixedHeader;
}}
/>
<Switch
checkedChildren="Fixed SideBar"
unCheckedChildren="UnFixed SideBar"
checked={state.fixSiderbar}
onChange={() => {
state.fixSiderbar = !state.fixSiderbar;
}}
/>
<Switch
checkedChildren="Split Menus"
unCheckedChildren="Un Split Menus"
checked={state.splitMenus}
onChange={() => {
state.splitMenus = !state.splitMenus;
}}
/>
</Space>
<pre>{JSON.stringify(state, null, 2)}</pre>
<p> <p>
<p>block</p> <p>block</p>
... ...
......
examples/index.tsx
View file @ 4ecee35a
import 'ant-design-vue/dist/antd.less'; import 'ant-design-vue/dist/antd.less';
import { createApp, defineComponent, watch, ref, watchEffect, onMounted, reactive } from 'vue'; import { createApp, defineComponent, watch, ref, watchEffect, onMounted } from 'vue';
import { createRouter, createWebHashHistory, useRoute, useRouter, RouteRecord } from 'vue-router'; import { createRouter, createWebHashHistory, useRoute, useRouter, RouteRecord } from 'vue-router';
import { Avatar } from 'ant-design-vue'; import { Avatar, Button, Space, Select, Switch } from 'ant-design-vue';
import { UserOutlined } from '@ant-design/icons-vue'; import { UserOutlined } from '@ant-design/icons-vue';
import { default as ProLayout } from '../src/'; import { default as ProLayout, FooterToolbar } from '../src/';
import { globalState as state } from './state'; import { globalState as state } from './state';
import './demo.less';
import registerIcons from './_util/icons'; import registerIcons from './_util/icons';
...@@ -14,6 +15,9 @@ import Welcome from './demo/welcome'; ...@@ -14,6 +15,9 @@ import Welcome from './demo/welcome';
import FormPage from './demo/form'; import FormPage from './demo/form';
import ChildPage from './demo/child/child-page'; import ChildPage from './demo/child/child-page';
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const noop = () => {};
const getMenuData = (routes: RouteRecord[]) => { const getMenuData = (routes: RouteRecord[]) => {
const childrenRoute = routes.find(route => route.path === '/'); const childrenRoute = routes.find(route => route.path === '/');
return childrenRoute?.children || []; return childrenRoute?.children || [];
...@@ -29,7 +33,6 @@ const BasicLayout = defineComponent({ ...@@ -29,7 +33,6 @@ const BasicLayout = defineComponent({
const menuData = getMenuData(getRoutes()); const menuData = getMenuData(getRoutes());
const updateSelectedMenu = () => { const updateSelectedMenu = () => {
console.log('updateSelectedMenu', state.selectedKeys);
const matched = route.matched.concat().map(item => item.path); const matched = route.matched.concat().map(item => item.path);
matched.shift(); matched.shift();
state.selectedKeys = matched; state.selectedKeys = matched;
...@@ -41,7 +44,6 @@ const BasicLayout = defineComponent({ ...@@ -41,7 +44,6 @@ const BasicLayout = defineComponent({
watch( watch(
() => state.collapsed, () => state.collapsed,
(collapsed: boolean) => { (collapsed: boolean) => {
console.log('post watch', collapsed, state.collapsed);
if (collapsed) { if (collapsed) {
cacheOpenKeys.value = state.openKeys; cacheOpenKeys.value = state.openKeys;
state.openKeys = []; state.openKeys = [];
...@@ -49,9 +51,6 @@ const BasicLayout = defineComponent({ ...@@ -49,9 +51,6 @@ const BasicLayout = defineComponent({
state.openKeys = cacheOpenKeys.value; state.openKeys = cacheOpenKeys.value;
} }
}, },
{
flush: 'pre',
},
); );
// watch route // watch route
...@@ -77,26 +76,87 @@ const BasicLayout = defineComponent({ ...@@ -77,26 +76,87 @@ const BasicLayout = defineComponent({
collapsed={state.collapsed} collapsed={state.collapsed}
openKeys={state.openKeys} openKeys={state.openKeys}
selectedKeys={state.selectedKeys} selectedKeys={state.selectedKeys}
{...{ onCollapse={$event => {
'onUpdate:collapsed': $event => (state.collapsed = $event), state.collapsed = $event;
'onUpdate:openKeys': $event => (state.openKeys = $event),
'onUpdate:selectedKeys': updateSelectedMenu,
}} }}
v-slots={{ onOpenKeys={$event => {
rightContentRender: () => ( state.openKeys = $event;
<div style={{ marginRight: '16px' }}>
<Avatar icon={<UserOutlined />} /> Sendya
</div>
),
menuHeaderRender: () => (
<a>
<img src="https://gw.alipayobjects.com/zos/antfincdn/PmY%24TNNDBI/logo.svg" />
{state.collapsed && state.layout !== 'mix' ? null : <h1>Pro Preview</h1>}
</a>
),
}} }}
onSelect={updateSelectedMenu}
rightContentRender={props => (
<div
class={['right-content', `${props.layout}-${props.navTheme}`]}
style={{ marginRight: '16px' }}
>
<span>
<Avatar icon={<UserOutlined />} /> Sendya
</span>
</div>
)}
menuHeaderRender={() => (
<a>
<img src="https://gw.alipayobjects.com/zos/antfincdn/PmY%24TNNDBI/logo.svg" />
{state.collapsed && state.layout !== 'mix' ? null : <h1>Pro Preview</h1>}
</a>
)}
// {...{
// 'onUpdate:collapsed': noop,
// 'onUpdate:openKeys': noop,
// 'onUpdate:selectedKeys': noop,
// }}
> >
<router-view /> <router-view />
<FooterToolbar>
<Space>
<Button
onClick={() => {
state.navTheme = state.navTheme === 'dark' ? 'light' : 'dark';
}}
>
Theme Switch
</Button>
<Select
getPopupContainer={triggerNode => triggerNode.parentNode}
value={state.layout}
onChange={val => {
state.layout = val;
}}
style={{ width: '150px' }}
>
<Select.Option value="side">Side</Select.Option>
<Select.Option value="top">Top</Select.Option>
<Select.Option value="mix">Mix</Select.Option>
</Select>
<Switch
checkedChildren="Fixed Header"
unCheckedChildren="UnFixed Header"
checked={state.fixedHeader}
onChange={() => {
state.fixedHeader = !state.fixedHeader;
}}
/>
<Switch
checkedChildren="Fixed SideBar"
unCheckedChildren="UnFixed SideBar"
checked={state.fixSiderbar}
onChange={() => {
state.fixSiderbar = !state.fixSiderbar;
}}
/>
<Switch
checkedChildren="Split Menus"
unCheckedChildren="Un Split Menus"
checked={state.splitMenus}
onChange={() => {
state.splitMenus = !state.splitMenus;
}}
/>
</Space>
</FooterToolbar>
<div
class="ant-pro-layout-watermark"
style='z-index: 9; position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; background-size: 332px; pointer-events: none; background-repeat: repeat; background-image: url("data:image/png;base64,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gQIIECBAgACBEgSEohK6oAYCBAgQIEAgu4BQlL0FCiBAgAABAgRKEBCKSuiCGggQIECAAIHsAkJR9hYogAABAgQIEChBQCgqoQtqIECAAAECBLILCEXZW6AAAgQIECBAoAQBoaiELqiBAAECBAgQyC4gFGVvgQIIECBAgACBEgSEohK6oBqbn18AAA+3SURBVAYCBAgQIEAgu4BQlL0FCiBAgAABAgRKEBCKSuiCGggQIECAAIHsAkJR9hYogAABAgQIEChBQCgqoQtqIECAAAECBLILCEXZW6AAAgQIECBAoAQBoaiELqiBAAECBAgQyC4gFGVvgQIIECBAgACBEgSEohK6oAYCBAgQIEAgu4BQlL0FCiBAgAABAgRKEBCKSuiCGggQIECAAIHsAkJR9hYogAABAgQIEChBQCgqoQtqIECAAAECBLILCEXZW6AAAgQIECBAoAQBoaiELqiBAAECBAgQyC4gFGVvgQIIECBAgACBEgSEohK6oAYCBAgQIEAgu4BQlL0FCiBAgAABAgRKEBCKSuiCGggQIECAAIHsAkJR9hYogAABAgQIEChBQCgqoQtqIECAAAECBLILCEXZW6AAAgQIECBAoAQBoaiELqiBAAECBAgQyC4gFGVvgQIIECBAgACBEgSEohK6oAYCBAgQIEAgu4BQlL0FCiBAgAABAgRKEBCKSuiCGggQIECAAIHsAkJR9hYogAABAgQIEChBQCgqoQtqIECAAAECBLILCEXZW6AAAgQIECBAoAQBoaiELqiBAAECBAgQyC4gFGVvgQIIECBAgACBEgSEohK6oAYCBAgQIEAgu4BQlL0FCiBAgAABAgRKEBCKSuiCGggQIECAAIHsAkJR9hYogAABAgQIEChBQCgqoQtqIECAAAECBLILCEXZW6AAAgQIECBAoAQBoaiELqiBAAECBAgQyC4gFGVvgQIIECBAgACBEgSEohK6oAYCBAgQIEAgu4BQlL0FCiBAgAABAgRKEBCKSuiCGggQIECAAIHsAkJR9hYogAABAgQIEChBQCgqoQtqIECAAAECBLILCEXZW6AAAgQIECBAoAQBoaiELqiBAAECBAgQyC4gFGVvgQIIECBAgACBEgSEohK6oAYCBAgQIEAgu4BQlL0FCiBAgAABAgRKEBCKSuiCGggQIECAAIHsAkJR9hYogAABAgQIEChBQCgqoQtqIECAAAECBLILCEXZW6AAAgQIECBAoAQBoaiELqiBAAECBAgQyC4gFGVvgQIIECBAgACBEgSEohK6oAYCBAgQIEAgu4BQlL0FCiBAgAABAgRKEBCKSuiCGggQIECAAIHsAkJR9hYogAABAgQIEChBQCgqoQtqIECAAAECBLILCEXZW6AAAgQIECBAoAQBoaiELqiBAAECBAgQyC4gFGVvgQIIECBAgACBEgSEohK6oAYCBAgQIEAgu4BQlL0FCiBAgAABAgRKEBCKSuiCGggQIECAAIHsAkJR9hYogAABAgQIEChBQCgqoQtqIECAAAECBLILCEXZW6AAAgQIECBAoAQBoaiELqiBAAECBAgQyC4gFGVvgQIIECBAgACBEgSEohK6oAYCBAgQIEAgu4BQlL0FCiBAgAABAgRKEBCKSuiCGggQIECAAIHsAkJR9hYogAABAgQIEChBQCgqoQtqIECAAAECBLILCEXZW6AAAgQIECBAoAQBoaiELqiBAAECBAgQyC4gFGVvgQIIECBAgACBEgSEohK6oAYCBAgQIEAgu4BQlL0FCiBAgAABAgRKEBCKSuiCGggQIECAAIHsAkJR9hYogAABAgQIEChBQCgqoQtqIECAAAECBLILCEXZW6AAAgQIECBAoAQBoaiELqiBAAECBAgQyC4gFGVvgQIIECBAgACBEgSEohK6oAYCBAgQIEAgu4BQlL0FCiBAgAABAgRKEBCKSuiCGggQIECAAIHsAkJR9hYogAABAgQIEChBQCgqoQtqIECAAAECBLILCEXZW6AAAgQIECBAoAQBoaiELqiBAAECBAgQyC4gFGVvgQIIECBAgACBEgSEohK6oAYCBAgQIEAgu4BQlL0FCiBAgAABAgRKEBCKSuiCGggQIECAAIHsAkJR9hYogAABAgQIEChBQCgqoQtqIECAAAECBLILCEXZW6AAAgQIECBAoAQBoaiELqiBAAECBAgQyC4gFGVvgQIIECBAgACBEgSEohK6oAYCBAgQIEAgu4BQlL0FCiBAgAABAgRKEBCKSuiCGggQIECAAIHsAkJR9hYogAABAgQIEChBQCgqoQtqIECAAAECBLILCEXZW6AAAgQIECBAoAQBoaiELqiBAAECBAgQyC4gFGVvgQIIECBAgACBEgSEohK6oAYCBAgQIEAgu4BQlL0FCiBAgAABAgRKEBCKSuiCGggQIECAAIHsAkJR9hYogAABAgQIEChBQCgqoQtqIECAAAECBLILCEXZW6AAAgQIECBAoAQBoaiELqiBAAECBAgQyC4gFGVvgQIIECBAgACBEgSEohK6oAYCBAgQIEAgu4BQlL0FCiBAgAABAgRKEBCKSuiCGggQIECAAIHsAkJR9hYogAABAgQIEChBQCgqoQtqIECAAAECBLILCEXZW6AAAgQIECBAoAQBoaiELqiBAAECBAgQyC4gFGVvgQIIECBAgACBEgSEohK6oAYCBAgQIEAgu4BQlL0FCiBAgAABAgRKEBCKSuiCGggQIECAAIHsAkJR9hYogAABAgQIEChBQCgqoQtqIECAAAECBLILCEXZW6AAAgQIECBAoAQBoaiELqiBAAECBAgQyC4gFGVvgQIIECBAgACBEgSEohK6oAYCBAgQIEAgu4BQlL0FCiBAgAABAgRKEBCKSuiCGggQIECAAIHsAkJR9hYogAABAgQIEChBQCgqoQtqIECAAAECBLILCEXZW6AAAgQIECBAoAQBoaiELqiBAAECBAgQyC4gFGVvgQIIECBAgACBEgSEohK6oAYCBAgQIEAgu4BQlL0FCiBAgAABAgRKEBCKSuiCGggQIECAAIHsAkJR9hYogAABAgQIEChBQCgqoQtqIECAAAECBLILCEXZW6AAAgQIECBAoAQBoaiELqiBAAECBAgQyC4gFGVvgQIIECBAgACBEgSEohK6oAYCBAgQIEAgu4BQlL0FCiBAgAABAgRKEBCKSuiCGggQIECAAIHsAkJR9hYogAABAgQIEChBQCgqoQtqIECAAAECBLILCEXZW6AAAgQIECBAoAQBoaiELqiBAAECBAgQyC4gFGVvgQIIECBAgACBEgSEohK6oAYCBAgQIEAgu4BQlL0FCiBAgAABAgRKEBCKSuiCGggQIECAAIHsAkJR9hYogAABAgQIEChBQCgqoQtqIECAAAECBLILCEXZW6AAAgQIECBAoAQBoaiELqiBAAECBAgQyC4gFGVvgQIIECBAgACBEgSEohK6oAYCBAgQIEAgu4BQlL0FCiBAgAABAgRKEBCKSuiCGggQIECAAIHsAkJR9hYogAABAgQIEChBQCgqoQtqIECAAAECBLILCEXZW6AAAgQIECBAoAQBoaiELqiBAAECBAgQyC4gFGVvgQIIECBAgACBEgSEohK6oAYCBAgQIEAgu4BQlL0FCiBAgAABAgRKEBCKSuiCGggQIECAAIHsAkJR9hYogAABAgQIEChBQCgqoQtqIECAAAECBLILCEXZW6AAAgQIECBAoAQBoaiELqiBAAECBAgQyC4gFGVvgQIIECBAgACBEgSEohK6oAYCBAgQIEAgu4BQlL0FCiBAgAABAgRKEBCKSuiCGggQIECAAIHsAkJR9hYogAABAgQIEChBQCgqoQtqIECAAAECBLILCEXZW6AAAgQIECBAoAQBoaiELqiBAAECBAgQyC4gFGVvgQIIECBAgACBEgSEohK6oAYCBAgQIEAgu4BQlL0FCiBAgAABAgRKEBCKSuiCGggQIECAAIHsAkJR9hYogAABAgQIEChBQCgqoQtqIECAAAECBLILCEXZW6AAAgQIECBAoAQBoaiELqiBAAECBAgQyC4gFGVvgQIIECBAgACBEgSEohK6oAYCBAgQIEAgu4BQlL0FCiBAgAABAgRKEBCKSuiCGggQIECAAIHsAkJR9hYogAABAgQIEChBQCgqoQtqIECAAAECBLILCEXZW6AAAgQIECBAoAQBoaiELqiBAAECBAgQyC4gFGVvgQIIECBAgACBEgSEohK6oAYCBAgQIEAgu4BQlL0FCiBAgAABAgRKEBCKSuiCGggQIECAAIHsAkJR9hYogAABAgQIEChBQCgqoQtqIECAAAECBLILCEXZW6AAAgQIECBAoAQBoaiELqiBAAECBAgQyC4gFGVvgQIIECBAgACBEgSEohK6oAYCBAgQIEAgu4BQlL0FCiBAgAABAgRKEBCKSuiCGggQIECAAIHsAkJR9hYogAABAgQIEChBQCgqoQtqIECAAAECBLILCEXZW6AAAgQIECBAoAQBoaiELqiBAAECBAgQyC4gFGVvgQIIECBAgACBEgSEohK6oAYCBAgQIEAgu4BQlL0FCiBAgAABAgRKEBCKSuiCGggQIECAAIHsAkJR9hYogAABAgQIEChBQCgqoQtqIECAAAECBLILCEXZW6AAAgQIECBAoAQBoaiELqiBAAECBAgQyC4gFGVvgQIIECBAgACBEgSEohK6oAYCBAgQIEAgu4BQlL0FCiBAgAABAgRKEBCKSuiCGggQIECAAIHsAkJR9hYogAABAgQIEChBQCgqoQtqIECAAAECBLILCEXZW6AAAgQIECBAoAQBoaiELqiBAAECBAgQyC4gFGVvgQIIECBAgACBEgSEohK6oAYCBAgQIEAgu4BQlL0FCiBAgAABAgRKEBCKSuiCGggQIECAAIHsAkJR9hYogAABAgQIEChBQCgqoQtqIECAAAECBLILCEXZW6AAAgQIECBAoAQBoaiELqiBAAECBAgQyC4gFGVvgQIIECBAgACBEgSEohK6oAYCBAgQIEAgu4BQlL0FCiBAgAABAgRKEBCKSuiCGggQIECAAIHsAkJR9hYogAABAgQIEChBQCgqoQtqIECAAAECBLILCEXZW6AAAgQIECBAoAQBoaiELqiBAAECBAgQyC4gFGVvgQIIECBAgACBEgSEohK6oAYCBAgQIEAgu4BQlL0FCiBAgAABAgRKEBCKSuiCGggQIECAAIHsAkJR9hYogAABAgQIEChBQCgqoQtqIECAAAECBLILCEXZW6AAAgQIECBAoAQBoaiELqiBAAECBAgQyC4gFGVvgQIIECBAgACBEgSEohK6oAYCBAgQIEAgu4BQlL0FCiBAgAABAgRKEBCKSuiCGggQIECAAIHsAkJR9hYogAABAgQIEChBQCgqoQtqIECAAAECBLILCEXZW6AAAgQIECBAoAQBoaiELqiBAAECBAgQyC4gFGVvgQIIECBAgACBEgSEohK6oAYCBAgQIEAgu4BQlL0FCiBAgAABAgRKEBCKSuiCGggQIECAAIHsAv8fTNaOmuBkwNEAAAAASUVORK5CYII=");'
></div>
</ProLayout> </ProLayout>
); );
}, },
......
package.json
View file @ 4ecee35a
...@@ -73,6 +73,7 @@ ...@@ -73,6 +73,7 @@
"@babel/runtime": "^7.11.2", "@babel/runtime": "^7.11.2",
"ant-design-vue": "^2.0.0", "ant-design-vue": "^2.0.0",
"lodash-es": "^4.17.20", "lodash-es": "^4.17.20",
"omit.js": "^2.0.2",
"vue-types": "^3.0.1" "vue-types": "^3.0.1"
}, },
"files": [ "files": [
......
src/BasicLayout.tsx
View file @ 4ecee35a
import { import { computed, CSSProperties, reactive, unref, provide, defineComponent, toRefs } from 'vue';
computed,
FunctionalComponent,
CSSProperties,
reactive,
unref,
provide,
defineComponent,
} from 'vue';
import 'ant-design-vue/es/layout/style'; import 'ant-design-vue/es/layout/style';
import Layout from 'ant-design-vue/es/layout'; import Layout from 'ant-design-vue/es/layout';
import { withInstall } from 'ant-design-vue/es/_util/type'; import { withInstall } from 'ant-design-vue/es/_util/type';
import RouteContext, { RouteContextProps } from './RouteContext'; import { RouteContextProps } from './RouteContext';
import { default as SiderMenuWrapper, SiderMenuWrapperProps } from './SiderMenu'; import { default as SiderMenuWrapper, SiderMenuWrapperProps } from './SiderMenu';
import { WrapContent } from './WrapContent'; import { WrapContent } from './WrapContent';
import { default as Header, HeaderViewProps } from './Header'; import { default as Header, HeaderViewProps } from './Header';
import { VNodeType, CustomRender, WithFalse } from './typings'; import { VNodeType, CustomRender, WithFalse } from './typings';
import { getCustomRender, PropRenderType, PropTypes } from './utils'; import { getCustomRender, PropRenderType, PropTypes } from './utils';
import omit from 'omit.js';
import useMediaQuery from './hooks/useMediaQuery'; import useMediaQuery from './hooks/useMediaQuery';
import './BasicLayout.less'; import './BasicLayout.less';
export const defaultPrefixCls = 'ant-pro'; export const defaultPrefixCls = 'ant-pro';
const defaultI18nRender = (key: string) => key;
export type BasicLayoutProps = SiderMenuWrapperProps & export type BasicLayoutProps = SiderMenuWrapperProps &
HeaderViewProps & { HeaderViewProps & {
pure?: boolean; pure?: boolean;
...@@ -60,34 +51,23 @@ export type BasicLayoutProps = SiderMenuWrapperProps & ...@@ -60,34 +51,23 @@ export type BasicLayoutProps = SiderMenuWrapperProps &
const ProLayout = defineComponent({ const ProLayout = defineComponent({
setup(props: BasicLayoutProps, { emit, slots }) { setup(props: BasicLayoutProps, { emit, slots }) {
const { const isTop = computed(() => props.layout === 'top');
onCollapse: propsOnCollapse,
onOpenKeys: propsOnOpenKeys,
onSelect: propsOnSelect,
contentStyle,
disableContentMargin,
isChildrenLayout: propsIsChildrenLayout,
// loading,
layout,
matchMenuKeys,
navTheme,
menuData,
// defaultCollapsed,
} = props;
const isTop = computed(() => layout === 'top');
// const isSide = computed(() => layout === 'side'); // const isSide = computed(() => layout === 'side');
// const isMix = computed(() => layout === 'mix'); // const isMix = computed(() => layout === 'mix');
const pure = computed(() => props.pure); const pure = computed(() => props.pure);
const siderWidth = computed(() => (props.collapsed ? props.collapsedWidth : props.siderWidth));
// if on event and @event // if on event and @event
const onCollapse = const onCollapse = (collapsed: boolean) => {
(propsOnCollapse && propsOnCollapse) || (props.onCollapse && props.onCollapse(collapsed)) || emit('update:collapsed', collapsed);
((collapsed: boolean) => emit('update:collapsed', collapsed)); };
const onOpenKeys = const onOpenKeys = (openKeys: string[] | false) => {
(propsOnOpenKeys && propsOnOpenKeys) || (props.onOpenKeys && props.onOpenKeys(openKeys)) || emit('update:open-keys', openKeys);
((openKeys: string[] | false) => emit('update:open-keys', openKeys)); };
const onSelect = const onSelect = (selectedKeys: string[] | false) => {
(propsOnSelect && propsOnSelect) || (props.onSelect && props.onSelect(selectedKeys)) ||
((selectedKeys: string[] | false) => emit('update:selected-keys', selectedKeys)); emit('update:selected-keys', selectedKeys);
};
const colSize = useMediaQuery(); const colSize = useMediaQuery();
const isMobile = computed( const isMobile = computed(
() => (colSize.value === 'sm' || colSize.value === 'xs') && !props.disableMobile, () => (colSize.value === 'sm' || colSize.value === 'xs') && !props.disableMobile,
...@@ -106,12 +86,12 @@ const ProLayout = defineComponent({ ...@@ -106,12 +86,12 @@ const ProLayout = defineComponent({
}); });
// siderMenuDom 为空的时候，不需要 padding // siderMenuDom 为空的时候，不需要 padding
const genLayoutStyle: CSSProperties = { const genLayoutStyle = reactive<CSSProperties>({
position: 'relative', position: 'relative',
}; });
// if is some layout children, don't need min height // if is some layout children, don't need min height
if (propsIsChildrenLayout || (contentStyle && contentStyle.minHeight)) { if (props.isChildrenLayout || (props.contentStyle && props.contentStyle.minHeight)) {
genLayoutStyle.minHeight = 0; genLayoutStyle.minHeight = 0;
} }
...@@ -120,17 +100,17 @@ const ProLayout = defineComponent({ ...@@ -120,17 +100,17 @@ const ProLayout = defineComponent({
// onChange: propsOnCollapse, // onChange: propsOnCollapse,
// }); // });
const headerRender = ( const headerRender = (
props: BasicLayoutProps & { p: BasicLayoutProps & {
hasSiderMenu: boolean; hasSiderMenu: boolean;
customHeaderRender: WithFalse<CustomRender>; customHeaderRender: WithFalse<CustomRender>;
rightContentRender: WithFalse<CustomRender>; rightContentRender: WithFalse<CustomRender>;
}, },
matchMenuKeys: string[], matchMenuKeys?: string[],
): VNodeType => { ): VNodeType | null => {
if (props.headerRender === false || props.pure) { if (p.headerRender === false || p.pure) {
return null; return null;
} }
return <Header matchMenuKeys={matchMenuKeys} {...props} headerHeight={48} />; return <Header matchMenuKeys={matchMenuKeys || []} {...p} headerHeight={48} />;
}; };
const rightContentRender = getCustomRender(props, slots, 'rightContentRender'); const rightContentRender = getCustomRender(props, slots, 'rightContentRender');
const customHeaderRender = getCustomRender(props, slots, 'headerRender'); const customHeaderRender = getCustomRender(props, slots, 'headerRender');
...@@ -138,37 +118,49 @@ const ProLayout = defineComponent({ ...@@ -138,37 +118,49 @@ const ProLayout = defineComponent({
const footerRender = getCustomRender(props, slots, 'footerRender'); const footerRender = getCustomRender(props, slots, 'footerRender');
// const menuRender = getCustomRender(props, slots, 'menuRender'); // const menuRender = getCustomRender(props, slots, 'menuRender');
const headerDom = headerRender( const headerDom = computed(() =>
{ headerRender(
...props, {
hasSiderMenu: !isTop.value, ...props,
menuData, hasSiderMenu: !isTop.value,
isMobile: unref(isMobile), menuData: props.menuData,
onCollapse, isMobile: unref(isMobile),
onOpenKeys, onCollapse,
onSelect, onOpenKeys,
customHeaderRender, onSelect,
rightContentRender, customHeaderRender,
headerTitleRender: menuHeaderRender, rightContentRender,
theme: (navTheme || 'dark').toLocaleLowerCase().includes('dark') ? 'dark' : 'light', headerTitleRender: menuHeaderRender,
}, theme: (props.navTheme || 'dark').toLocaleLowerCase().includes('dark') ? 'dark' : 'light',
matchMenuKeys, },
props.matchMenuKeys,
),
); );
const routeContext: RouteContextProps = { const propRefs = toRefs(props);
// @ts-ignore
const routeContext: RouteContextProps = reactive({
getPrefixCls: (suffixCls?: string, customizePrefixCls?: string) => { getPrefixCls: (suffixCls?: string, customizePrefixCls?: string) => {
if (customizePrefixCls) return customizePrefixCls; if (customizePrefixCls) return customizePrefixCls;
return suffixCls ? `${defaultPrefixCls}-${suffixCls}` : defaultPrefixCls; return suffixCls ? `${defaultPrefixCls}-${suffixCls}` : defaultPrefixCls;
}, },
i18n: (t: string): string => t, i18n: (t: string): string => t,
contentWidth: 'Fluid', contentWidth: 'Fluid',
menuData, layout: propRefs.layout,
selectedKeys: props.selectedKeys || [], navTheme: propRefs.navTheme,
openKeys: props.openKeys || [], splitMenus: propRefs.splitMenus,
}; fixedHeader: propRefs.fixSiderbar,
fixSiderbar: propRefs.fixSiderbar,
sideWidth: siderWidth,
hasSideMenu: true,
hasFooterToolbar: false,
menuData: propRefs.menuData,
selectedKeys: propRefs.selectedKeys || [],
openKeys: propRefs.openKeys || [],
});
console.log('BasicLayout.routeContext', routeContext); const restProps = computed(() => omit(props, ['onCollapse', 'onOpenKeys', 'onSelect']));
console.log('pure', pure.value);
provide('route-context', routeContext); provide('route-context', routeContext);
return () => ( return () => (
...@@ -180,7 +172,7 @@ const ProLayout = defineComponent({ ...@@ -180,7 +172,7 @@ const ProLayout = defineComponent({
<Layout class={baseClassName.value}> <Layout class={baseClassName.value}>
{!isTop.value && ( {!isTop.value && (
<SiderMenuWrapper <SiderMenuWrapper
{...props} {...restProps.value}
isMobile={isMobile.value} isMobile={isMobile.value}
menuHeaderRender={menuHeaderRender} menuHeaderRender={menuHeaderRender}
onCollapse={onCollapse} onCollapse={onCollapse}
...@@ -189,10 +181,10 @@ const ProLayout = defineComponent({ ...@@ -189,10 +181,10 @@ const ProLayout = defineComponent({
/> />
)} )}
<Layout style={genLayoutStyle}> <Layout style={genLayoutStyle}>
{headerDom} {headerDom.value}
<WrapContent <WrapContent
isChildrenLayout={propsIsChildrenLayout} isChildrenLayout={props.isChildrenLayout}
style={disableContentMargin ? null : contentStyle} style={props.disableContentMargin ? undefined : props.contentStyle}
> >
{slots.default?.()} {slots.default?.()}
</WrapContent> </WrapContent>
...@@ -218,7 +210,7 @@ ProLayout.props = { ...@@ -218,7 +210,7 @@ ProLayout.props = {
/* layout 的加载态 */ /* layout 的加载态 */
loading: PropTypes.bool, loading: PropTypes.bool,
/* 用于生成菜单和面包屑 请从 RouterContext 注入 */ /* 用于生成菜单和面包屑 请从 RouterContext 注入 */
// menuData: PropTypes.array, menuData: PropTypes.array,
// location: PropTypes.string, // location: PropTypes.string,
// Custom render // Custom render
...@@ -279,8 +271,6 @@ ProLayout.props = { ...@@ -279,8 +271,6 @@ ProLayout.props = {
menu: PropTypes.object, menu: PropTypes.object,
/* 传递到 antd menu 组件的 props */ /* 传递到 antd menu 组件的 props */
menuProps: PropTypes.object, menuProps: PropTypes.object,
/* 菜单数组 */
menuData: PropTypes.object,
/* 是否分割菜单 (仅 mix 模式有效) */ /* 是否分割菜单 (仅 mix 模式有效) */
splitMenus: PropTypes.bool, splitMenus: PropTypes.bool,
selectedKeys: PropTypes.array, selectedKeys: PropTypes.array,
...@@ -294,6 +284,7 @@ ProLayout.props = { ...@@ -294,6 +284,7 @@ ProLayout.props = {
// onPageChange // 请使用 vue-router 监听 // onPageChange // 请使用 vue-router 监听
/* 禁止自动切换到移动页面 */ /* 禁止自动切换到移动页面 */
disableMobile: PropTypes.bool, disableMobile: PropTypes.bool,
isChildrenLayout: PropTypes.bool,
} as any; } as any;
export default withInstall(ProLayout); export default withInstall(ProLayout);
src/FooterToolbar/index.less
View file @ 4ecee35a
...@@ -14,7 +14,8 @@ ...@@ -14,7 +14,8 @@
line-height: 48px; line-height: 48px;
background: @component-background; background: @component-background;
border-top: 1px solid @border-color-split; border-top: 1px solid @border-color-split;
box-shadow: @box-shadow-base; box-shadow: 0 -6px 16px -8px rgb(0 0 0 / 8%), 0 -9px 28px 0 rgb(0 0 0 / 5%),
0 -12px 48px 16px rgb(0 0 0 / 3%);
&-left { &-left {
flex: 1; flex: 1;
} }
...@@ -27,4 +28,4 @@ ...@@ -27,4 +28,4 @@
} }
} }
} }
} }
\ No newline at end of file
src/FooterToolbar/index.tsx
View file @ 4ecee35a
...@@ -29,16 +29,16 @@ const FooterToolbar = defineComponent({ ...@@ -29,16 +29,16 @@ const FooterToolbar = defineComponent({
props: FooterToolbarProps, props: FooterToolbarProps,
setup(props, ctx) { setup(props, ctx) {
const { slots } = ctx; const { slots } = ctx;
const { getPrefixCls } = useProProvider(); const routeContext = useRouteContext();
const { getPrefixCls } = routeContext;
const baseClassName = props.prefixCls || getPrefixCls('footer-bar'); const baseClassName = props.prefixCls || getPrefixCls('footer-bar');
const routeContext = useRouteContext();
const width = computed(() => { const width = computed(() => {
const { hasSideMenu, isMobile, sideWidth } = routeContext; const { hasSideMenu, isMobile, sideWidth, layout } = routeContext;
if (!hasSideMenu) { if (!hasSideMenu) {
return undefined; return undefined;
} }
if (!sideWidth) { if (!sideWidth || layout === 'top') {
return '100%'; return '100%';
} }
return isMobile ? '100%' : `calc(100% - ${sideWidth}px)`; return isMobile ? '100%' : `calc(100% - ${sideWidth}px)`;
......
src/RouteContext.tsx
View file @ 4ecee35a
...@@ -38,7 +38,7 @@ export interface RouteContextProps extends Partial<PureSettings>, MenuState { ...@@ -38,7 +38,7 @@ export interface RouteContextProps extends Partial<PureSettings>, MenuState {
i18n: (t: string) => string; i18n: (t: string) => string;
breadcrumb?: BreadcrumbListReturn; breadcrumb?: BreadcrumbListReturn;
menuData?: MenuDataItem[]; menuData: MenuDataItem[];
isMobile?: boolean; isMobile?: boolean;
prefixCls?: string; prefixCls?: string;
collapsed?: boolean; collapsed?: boolean;
......
src/SiderMenu/SiderMenu.tsx
View file @ 4ecee35a
import { FunctionalComponent, computed, watch } from 'vue'; import { FunctionalComponent, computed } from 'vue';
import 'ant-design-vue/es/layout/style'; import 'ant-design-vue/es/layout/style';
import Layout from 'ant-design-vue/es/layout'; import Layout from 'ant-design-vue/es/layout';
import 'ant-design-vue/es/menu/style'; import 'ant-design-vue/es/menu/style';
...@@ -51,7 +51,7 @@ export const defaultRenderLogo = (logo: VNodeType): VNodeType => { ...@@ -51,7 +51,7 @@ export const defaultRenderLogo = (logo: VNodeType): VNodeType => {
export const defaultRenderLogoAndTitle = ( export const defaultRenderLogoAndTitle = (
props: SiderMenuProps, props: SiderMenuProps,
renderKey: string | undefined = 'menuHeaderRender', renderKey: string | undefined = 'menuHeaderRender',
): VNodeType => { ): VNodeType | null => {
const { const {
logo = 'https://gw.alipayobjects.com/zos/antfincdn/PmY%24TNNDBI/logo.svg', logo = 'https://gw.alipayobjects.com/zos/antfincdn/PmY%24TNNDBI/logo.svg',
title, title,
...@@ -100,7 +100,6 @@ const SiderMenu: FunctionalComponent<SiderMenuProps> = (props: SiderMenuProps) = ...@@ -100,7 +100,6 @@ const SiderMenu: FunctionalComponent<SiderMenuProps> = (props: SiderMenuProps) =
const context = useRouteContext(); const context = useRouteContext();
const { getPrefixCls } = context; const { getPrefixCls } = context;
const baseClassName = getPrefixCls('sider'); const baseClassName = getPrefixCls('sider');
console.log('useRouteContext', context);
// const isMix = computed(() => props.layout === 'mix'); // const isMix = computed(() => props.layout === 'mix');
// const fixed = computed(() => context.fixSiderbar); // const fixed = computed(() => context.fixSiderbar);
const runtimeTheme = computed(() => (props.layout === 'mix' && 'light') || props.navTheme); const runtimeTheme = computed(() => (props.layout === 'mix' && 'light') || props.navTheme);
...@@ -115,9 +114,9 @@ const SiderMenu: FunctionalComponent<SiderMenuProps> = (props: SiderMenuProps) = ...@@ -115,9 +114,9 @@ const SiderMenu: FunctionalComponent<SiderMenuProps> = (props: SiderMenuProps) =
[`${baseClassName}-fixed`]: context.fixSiderbar, [`${baseClassName}-fixed`]: context.fixSiderbar,
}; };
}); });
const hasSide = computed(() => props.layout === 'mix' && props.splitMenus); const hasSide = computed(() => (props.layout === 'mix' && props.splitMenus) || false);
const flatMenuData = computed(() => { const flatMenuData = computed(() => {
return hasSide.value && getMenuFirstChildren(context.menuData, context.selectedKeys[0]); return (hasSide.value && getMenuFirstChildren(context.menuData, context.selectedKeys[0])) || [];
}); });
// call menuHeaderRender // call menuHeaderRender
const headerDom = defaultRenderLogoAndTitle(props); const headerDom = defaultRenderLogoAndTitle(props);
...@@ -125,12 +124,6 @@ const SiderMenu: FunctionalComponent<SiderMenuProps> = (props: SiderMenuProps) = ...@@ -125,12 +124,6 @@ const SiderMenu: FunctionalComponent<SiderMenuProps> = (props: SiderMenuProps) =
if (hasSide.value && flatMenuData.value.length === 0) { if (hasSide.value && flatMenuData.value.length === 0) {
return null; return null;
} }
watch(
() => context.selectedKeys,
n => {
console.log('watch:context', n);
},
);
const defaultMenuDom = ( const defaultMenuDom = (
<BaseMenu <BaseMenu
prefixCls={getPrefixCls()} prefixCls={getPrefixCls()}
......
src/SiderMenu/index.less
View file @ 4ecee35a
@import '~ant-design-vue/es/style/themes/default.less';
@import '../BasicLayout.less'; @import '../BasicLayout.less';
@pro-layout-sider-menu-prefix-cls: ~'@{ant-prefix}-pro-sider'; @pro-layout-sider-menu-prefix-cls: ~'@{ant-prefix}-pro-sider';
...@@ -9,8 +8,10 @@ ...@@ -9,8 +8,10 @@
position: relative; position: relative;
background-color: @layout-sider-background; background-color: @layout-sider-background;
border-right: 0; border-right: 0;
transition: background-color 0.3s, min-width 0.3s, box-shadow: 2px 0 8px 0 rgba(29, 35, 41, 0.05);
max-width 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); transition: background-color 0.3s
/* , min-width 0.3s,
max-width 0.3s cubic-bezier(0.645, 0.045, 0.355, 1) */;
z-index: 100; z-index: 100;
&.@{ant-prefix}-menu-vertical .@{ant-prefix}-menu-item:not(:last-child), &.@{ant-prefix}-menu-vertical .@{ant-prefix}-menu-item:not(:last-child),
......
src/SiderMenu/index.tsx
View file @ 4ecee35a
...@@ -17,7 +17,7 @@ const SiderMenuWrapper: FunctionalComponent<SiderMenuWrapperProps> = props => { ...@@ -17,7 +17,7 @@ const SiderMenuWrapper: FunctionalComponent<SiderMenuWrapperProps> = props => {
padding: 0, padding: 0,
height: '100vh', height: '100vh',
}} }}
onClose={() => props.onCollapse(true)} onClose={() => props.onCollapse && props.onCollapse(true)}
width={props.siderWidth} width={props.siderWidth}
bodyStyle={{ height: '100vh', padding: 0, display: 'flex', flexDirection: 'row' }} bodyStyle={{ height: '100vh', padding: 0, display: 'flex', flexDirection: 'row' }}
> >
......
tsconfig.json
View file @ 4ecee35a
...@@ -4,8 +4,9 @@ ...@@ -4,8 +4,9 @@
"declaration": true, "declaration": true,
"module": "esnext", "module": "esnext",
"target": "ES2018", "target": "ES2018",
"moduleResolution": "node", "strict": true,
"jsx": "preserve", "jsx": "preserve",
"moduleResolution": "node",
"esModuleInterop": true, "esModuleInterop": true,
"skipLibCheck": true, "skipLibCheck": true,
"lib": [ "lib": [
......
yarn.lock
View file @ 4ecee35a
...@@ -11893,6 +11893,11 @@ omit.js@^2.0.0: ...@@ -11893,6 +11893,11 @@ omit.js@^2.0.0:
resolved "https://registry.yarnpkg.com/omit.js/-/omit.js-2.0.2.tgz#dd9b8436fab947a5f3ff214cb2538631e313ec2f" resolved "https://registry.yarnpkg.com/omit.js/-/omit.js-2.0.2.tgz#dd9b8436fab947a5f3ff214cb2538631e313ec2f"
integrity sha512-hJmu9D+bNB40YpL9jYebQl4lsTW6yEHRTroJzNLqQJYHm7c+NQnJGfZmIWh8S3q3KoaxV1aLhV6B3+0N0/kyJg== integrity sha512-hJmu9D+bNB40YpL9jYebQl4lsTW6yEHRTroJzNLqQJYHm7c+NQnJGfZmIWh8S3q3KoaxV1aLhV6B3+0N0/kyJg==
omit.js@^2.0.2:
version "2.0.2"
resolved "https://registry.npm.taobao.org/omit.js/download/omit.js-2.0.2.tgz#dd9b8436fab947a5f3ff214cb2538631e313ec2f"
integrity sha1-3ZuENvq5R6Xz/yFMslOGMeMT7C8=
on-finished@^2.3.0, on-finished@~2.3.0: on-finished@^2.3.0, on-finished@~2.3.0:
version "2.3.0" version "2.3.0"
resolved "https://registry.yarnpkg.com/on-finished/-/on-finished-2.3.0.tgz#20f1336481b083cd75337992a16971aa2d906947" resolved "https://registry.yarnpkg.com/on-finished/-/on-finished-2.3.0.tgz#20f1336481b083cd75337992a16971aa2d906947"
......
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