Skip to content

P
pro-layout
Unverified Commit 8db595b2 authored by Sendya's avatar Sendya
Browse files
Options

fix: mobile sider menu

parent d900f29d
Hide whitespace changes
Inline Side-by-side
Showing with 121 additions and 108 deletions
examples/src/layouts/BasicLayout.jsx
View file @ 8db595b2
......@@ -68,11 +68,13 @@ export default {
// 媒体查询
query: {},
// 布局类型
layout: 'sidemenu', // 'sidemenu', 'topmenu'
layout: 'topmenu', // 'sidemenu', 'topmenu'
// 定宽: true / 流式: false
contentWidth: true,
// 主题 'dark' | 'light'
theme: 'dark'
theme: 'light',
// 是否手机模式
isMobile: false
}
},
render (h) {
......@@ -86,6 +88,14 @@ export default {
const handleMediaQuery = (val) => {
this.query = val
if (this.isMobile && !val['screen-xs']) {
this.isMobile = false
return
}
if (!this.isMobile && val['screen-xs']) {
this.isMobile = true
this.collapsed = false
}
}
const handleCollapse = (val) => {
this.collapsed = val
......@@ -103,6 +113,7 @@ export default {
layout,
contentWidth,
theme,
isMobile: this.isMobile,
rightContentRender,
footerRender,
i18nRender,
......
examples/src/views/TestPage.vue
View file @ 8db595b2
......@@ -45,7 +45,8 @@ export default {
<style lang="less" scoped>
.page-test-wrapper {
width: 400px;
width: 100%;
max-width: 400px;
margin: 0 auto;
}
</style>
examples/src/views/TestPage2.vue
View file @ 8db595b2
......@@ -31,7 +31,8 @@ export default {
<style lang="less" scoped>
.page-test-wrapper {
width: 400px;
width: 100%;
max-width: 400px;
margin: 0 auto;
}
</style>
src/BasicLayout.jsx
View file @ 8db595b2
......@@ -97,17 +97,15 @@ const BasicLayout = {
<div>
<ContainerQuery query={MediaQueryEnum} onChange={handleMediaQuery}>
<Layout class={{ 'basicLayout': true, ...mediaQuery }}>
{layout !== 'topmenu' && (
<SiderMenuWrapper
{ ...{ props: props } }
menus={menus}
mode={'inline'}
logo={logo}
collapsed={collapsed}
onCollapse={handleCollapse}
handleCollapse={handleCollapse}
/>
)}
<SiderMenuWrapper
{ ...{ props: props } }
menus={menus}
mode={'inline'}
logo={logo}
collapsed={collapsed}
onCollapse={handleCollapse}
handleCollapse={handleCollapse}
/>
<Layout class={[layout]} style={{ paddingLeft: '0', minHeight: '100vh' }}>
{headerRender(h, {
...props,
......
src/Header.jsx
View file @ 8db595b2
......@@ -47,11 +47,10 @@ export const HeaderViewProps = {
const renderContent = (h, props) => {
const isTop = props.layout === 'topmenu'
const isMobile = false
const maxWidth = 1200 - 280 - 120
const contentWidth = props.contentWidth
const baseCls = 'ant-pro-top-nav-header'
const { logo, title, theme, headerRender, rightContentRender } = props
const { logo, title, theme, isMobile, headerRender, rightContentRender } = props
const rightContentProps = { theme }
let defaultDom = <GlobalHeader {...{ props: props }} />
if (isTop && !isMobile) {
......
src/Header.less
View file @ 8db595b2
@import "~ant-design-vue/es/style/themes/default";
@global-header-prefix-cls: ~'@{ant-prefix}-pro-global-header';
@top-nav-header-prefix-cls: ~'@{ant-prefix}-pro-top-nav-header';
@pro-header-bg: @component-background;
@pro-header-hover-bg: @component-background;
@pro-header-box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
.@{top-nav-header-prefix-cls} {
position: relative;
width: 100%;
......@@ -77,85 +72,6 @@
}
}
.@{global-header-prefix-cls} {
position: relative;
height: @layout-header-height;
padding: 0;
background: @pro-header-bg;
box-shadow: @pro-header-box-shadow;
&-index-right {
float: right;
height: 100%;
margin-left: auto;
overflow: hidden;
.@{global-header-prefix-cls}-index-action {
display: inline-block;
height: 100%;
padding: 0 12px;
cursor: pointer;
transition: all .3s;
&:hover {
background: rgba(0,0,0,.025);
}
}
}
&-logo {
display: inline-block;
height: @layout-header-height;
padding: 0 0 0 24px;
font-size: 20px;
line-height: @layout-header-height;
vertical-align: top;
cursor: pointer;
img {
display: inline-block;
width: 32px;
vertical-align: middle;
}
}
&-menu {
.anticon {
margin-right: 8px;
}
.ant-dropdown-menu-item {
min-width: 160px;
}
}
&-trigger {
height: @layout-header-height;
padding: ~'calc((@{layout-header-height} - 26px) / 2)' 24px;
font-size: 20px;
cursor: pointer;
transition: all 0.3s, padding 0s;
&:hover {
background: @pro-header-hover-bg;
}
}
.dark {
height: @layout-header-height;
.action {
color: rgba(255, 255, 255, 0.85);
> i {
color: rgba(255, 255, 255, 0.85);
}
&:hover,
&.opened {
background: @primary-color;
}
.ant-badge {
color: rgba(255, 255, 255, 0.85);
}
}
}
}
.drop-down {
&.menu {
.anticon {
......
src/components/GlobalHeader/index.jsx
View file @ 8db595b2
/* eslint-disable */
import './index.less'
import debounce from 'lodash/debounce'
......@@ -74,7 +73,7 @@ const GlobalHeader = {
return (
<div class={headerCls}>
{isMobile && (
<a class={`${headerCls}-logo`} key="logo">
<a class={`${headerCls}-logo`} key="logo" href={'/'}>
{defaultRenderLogo(h, logo)}
</a>
)}
......@@ -89,7 +88,7 @@ const GlobalHeader = {
})
},
beforeDestroy () {
this.triggerResizeEvent.cancel()
this.triggerResizeEvent.cancel && this.triggerResizeEvent.cancel()
}
}
......
src/components/GlobalHeader/index.less
View file @ 8db595b2
@import "~ant-design-vue/es/style/themes/default";
@global-header-prefix-cls: ~'@{ant-prefix}-pro-global-header';
@pro-header-bg: @component-background;
@pro-header-hover-bg: @component-background;
@pro-header-box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
@pro-header-hover-trigger-action-bg: rgba(0,0,0,.025);
.@{global-header-prefix-cls} {
position: relative;
height: @layout-header-height;
padding: 0;
background: @pro-header-bg;
box-shadow: @pro-header-box-shadow;
&-index-right {
float: right;
height: 100%;
margin-left: auto;
overflow: hidden;
.@{global-header-prefix-cls}-index-action {
display: inline-block;
height: 100%;
padding: 0 12px;
cursor: pointer;
transition: all .3s;
&:hover {
background: @pro-header-hover-trigger-action-bg;
}
}
}
&-logo {
display: inline-block;
height: @layout-header-height;
padding: 0 0 0 24px;
font-size: 20px;
line-height: @layout-header-height;
vertical-align: top;
cursor: pointer;
img, svg {
display: inline-block;
width: 32px;
height: 32px;
vertical-align: middle;
}
}
&-menu {
.anticon {
margin-right: 8px;
}
.ant-dropdown-menu-item {
min-width: 160px;
}
}
&-trigger {
height: @layout-header-height;
padding: ~'calc((@{layout-header-height} - 26px) / 2)' 24px;
font-size: 20px;
cursor: pointer;
transition: all 0.3s, padding 0s;
&:hover {
background: @pro-header-hover-trigger-action-bg;
}
}
.dark {
height: @layout-header-height;
.action {
color: rgba(255, 255, 255, 0.85);
> i {
color: rgba(255, 255, 255, 0.85);
}
&:hover,
&.opened {
background: @primary-color;
}
.ant-badge {
color: rgba(255, 255, 255, 0.85);
}
}
}
.ant-pro-global-header {
.ant-pro-global-header-index-action {
i {
color: rgba(0,0,0,.65);
vertical-align: middle;
}
}
}
src/components/SiderMenu/SiderMenuWrapper.jsx
View file @ 8db595b2
......@@ -10,10 +10,12 @@ const SiderMenuWrapper = {
props: SiderMenuProps,
render () {
const {
layout,
isMobile,
collapsed,
handleCollapse: onCollapse
} = this
const isTopMenu = layout === 'topmenu'
return isMobile ? (
<Drawer
class="ant-pro-sider-menu"
......@@ -26,9 +28,9 @@ const SiderMenuWrapper = {
height: '100vh'
}}
>
<SiderMenu {...{ props: this.$props }} collapsed={isMobile ? false : collapsed} />
<SiderMenu {...{ props: {...this.$props, collapsed: isMobile ? false : collapsed} }} />
</Drawer>
) : (
) : !isTopMenu && (
<SiderMenu class="ant-pro-sider-menu" {...{ props: this.$props }} />
)
}
......
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