Skip to content

P
pro-layout
Unverified Commit 078000d6 authored by Sendya's avatar Sendya
Browse files
Options

fix: PageHeaderWrapper

parent e9176c31
Hide whitespace changes
Inline Side-by-side
Showing with 230 additions and 81 deletions
examples/package.json
View file @ 078000d6
......@@ -17,7 +17,7 @@
"license": "MIT",
"dependencies": {
"@ant-design/icons": "^4.0.0-alpha.11",
"ant-design-vue": "^1.5.0-rc.4",
"ant-design-vue": "^1.5.3",
"core-js": "^3.1.2",
"vue-i18n": "^8.15.0",
"vue-ls": "^3.2.1",
......
examples/src/config/router.config.js
View file @ 078000d6
// eslint-disable-next-line
import BasicLayout from '../layouts/BasicLayout'
const renderRouterView = {
render: (h) => h('router-view')
}
const asyncRouterMap = [
{
path: '/',
......@@ -14,13 +18,14 @@ const asyncRouterMap = [
name: 'dashboard',
meta: { keepAlive: true, title: 'menu.dashboard.default', icon: 'dashboard' },
redirect: '/dashboard/analysis',
component: { render: (h) => h('router-view') },
component: renderRouterView,
children: [
{
path: '/dashboard/analysis',
name: 'analysis',
meta: {
keepAlive: true,
icon: 'smile',
title: 'menu.dashboard.analysis'
},
component: () => import(/* webpackChunkName: "about" */ '../views/BlockPage')
......@@ -31,6 +36,7 @@ const asyncRouterMap = [
meta: {
global: true,
keepAlive: true,
icon: 'smile',
title: 'menu.dashboard.workplace'
},
component: () => import(/* webpackChunkName: "about" */ '../views/TestPage')
......@@ -38,59 +44,60 @@ const asyncRouterMap = [
]
},
{
path: '/page2',
name: 'page2',
meta: {
keepAlive: true,
title: 'menu.nav2',
icon: 'video-camera'
},
component: () => import(/* webpackChunkName: "about" */ '../views/TestPage2')
},
{
path: '/page3',
name: 'page3',
meta: {
keepAlive: true,
title: 'menu.nav2',
icon: 'video-camera'
},
component: () => import(/* webpackChunkName: "about" */ '../views/TestPage2')
},
{
path: '/page4',
name: 'page4',
path: '/form',
name: 'form',
meta: {
keepAlive: true,
title: 'menu.nav2',
icon: 'video-camera'
},
component: () => import(/* webpackChunkName: "about" */ '../views/TestPage2')
},
{
path: '/page5',
name: 'page5',
meta: {
keepAlive: true,
title: 'menu.nav2',
title: 'menu.form.default',
icon: 'video-camera'
},
component: () => import(/* webpackChunkName: "about" */ '../views/TestPage2')
component: renderRouterView,
children: [
{
path: '/form/basic-form',
name: 'basic-form',
meta: {
keepAlive: true,
icon: 'smile',
title: 'menu.form.basicform'
},
component: () => import(/* webpackChunkName: "about" */ '../views/BlockPage')
},
{
path: '/form/step-form',
name: 'step-form',
meta: {
keepAlive: true,
icon: 'smile',
title: 'menu.form.stepform'
},
component: () => import(/* webpackChunkName: "about" */ '../views/BlockPage')
},
{
path: '/form/advanced-form',
name: 'advanced-form',
meta: {
keepAlive: true,
icon: 'smile',
title: 'menu.form.advancedform'
},
component: () => import(/* webpackChunkName: "about" */ '../views/BlockPage')
}
]
},
{
path: '/page6',
name: 'page6',
path: '/page1',
name: 'page1',
meta: {
keepAlive: true,
title: 'menu.nav2',
title: 'menu.nav1',
icon: 'video-camera'
},
component: () => import(/* webpackChunkName: "about" */ '../views/TestPage2')
},
{
path: '/page7',
name: 'page7',
path: '/page2',
name: 'page2',
meta: {
keepAlive: true,
title: 'menu.nav2',
......@@ -98,13 +105,12 @@ const asyncRouterMap = [
},
component: () => import(/* webpackChunkName: "about" */ '../views/TestPage2')
},
{
path: '/page8',
name: 'page8',
path: '/page3',
name: 'page3',
meta: {
keepAlive: true,
title: 'menu.nav2',
title: 'menu.nav3',
icon: 'video-camera'
},
component: () => import(/* webpackChunkName: "about" */ '../views/TestPage2')
......
examples/src/core/antd/icons.js
View file @ 078000d6
......@@ -30,6 +30,12 @@ export {
export {
default as RightOutline
} from '@ant-design/icons/lib/outline/RightOutline'
export {
default as ArrowLeftOutline
} from '@ant-design/icons/lib/outline/ArrowLeftOutline'
export {
default as ArrowRightOutline
} from '@ant-design/icons/lib/outline/ArrowRightOutline'
export {
default as MenuFoldOutline
} from '@ant-design/icons/lib/outline/MenuFoldOutline'
......@@ -54,4 +60,7 @@ export {
export {
default as LogoutOutline
} from '@ant-design/icons/lib/outline/LogoutOutline'
export {
default as SmileOutline
} from '@ant-design/icons/lib/outline/SmileOutline'
/* Layout end */
examples/src/layouts/BasicLayout.jsx
View file @ 078000d6
......@@ -3,7 +3,7 @@ import './BasicLayout.less'
import { Avatar, Dropdown, Menu, Icon } from 'ant-design-vue'
import { asyncRouterMap } from '../config/router.config.js'
import { i18nRender } from '../locales'
import ProLayout from '@ant-design-vue/pro-layout'
import ProLayout, { GlobalFooter } from '@ant-design-vue/pro-layout'
import SelectLang from '../components/SelectLang'
import LogoSvg from '../assets/logo.svg?inline'
// import defaultSettings from '@config/defaultSettings'
......@@ -61,9 +61,15 @@ const rightContentRender = (h, props) => {
const footerRender = (h, props) => {
return (
<div class={'footer custom-render'}>
<span>footer</span>
</div>
<GlobalFooter class={'footer custom-render'}>
<template slot="links">
<a href="https://www.github.com/vueComponent/" target="_self">Github</a>
<a href="https://www.github.com/sendya/" target="_self">@Sendya</a>
</template>
<template slot="copyright">
<a href="https://github.com/vueComponent">vueComponent</a>
</template>
</GlobalFooter>
)
}
......
examples/src/locales/lang/en-US.js
View file @ 078000d6
......@@ -12,6 +12,25 @@ export default {
analysis: 'Analysis',
workplace: 'Workplace'
},
nav2: 'Nav 2*'
form: {
default: 'Form',
basicform: 'Basic Form',
stepform: 'Step Form',
advancedform: 'Advanced Form'
},
nav1: 'Nav 1',
nav2: 'Nav 2',
nav3: 'Nav 3'
},
pages: {
form: {
basicform: {
headers: {
btn1: 'Button1'
},
content: 'Form pages are used to collect or verify information to users, and basic forms are common in scenarios where there are fewer data items.'
}
}
}
}
examples/src/locales/lang/zh-CN.js
View file @ 078000d6
......@@ -8,10 +8,29 @@ export default {
menu: {
home: '首页',
dashboard: {
default: '仪表盘',
default: 'Dashboard',
analysis: '分析页',
workplace: '工作台'
},
nav2: '导航2*'
form: {
default: '表单页',
basicform: '基础表单',
stepform: '分步表单',
advancedform: '高级表单'
},
nav1: '导航1',
nav2: '导航2',
nav3: '导航3'
},
pages: {
form: {
basicform: {
headers: {
btn1: '按钮1'
},
content: '表单页用于向用户收集或验证信息，基础表单常见于数据项较少的表单场景。'
}
}
}
}
examples/src/main.js
View file @ 078000d6
......@@ -9,11 +9,14 @@ import i18n from './locales'
import './router/router-guards'
import './core/library'
import { PageHeaderWrapper } from '@ant-design-vue/pro-layout'
import initializer from './core/bootstrap'
import './global.less'
Vue.config.productionTip = false
Vue.component('page-header-wrapper', PageHeaderWrapper)
window._vue = new Vue({
router,
store,
......
examples/src/views/BlockPage.vue
View file @ 078000d6
<template>
<document-title title="BlockPage">
<page-header-wrapper
:tab-list="tabList"
:tab-active-key="tabActiveKey"
:tab-change="(key) => {
this.tabActiveKey = key
console.log('PageHeader::tabChange', key)
}"
:breadcrumb="false"
>
<template slot="content">
<span>{{ $t('pages.form.basicform.content') }}</span>
</template>
<template slot="extraContent">
<div><a-button>{{ $t('pages.form.basicform.headers.btn1') }}</a-button></div>
</template>
<div>
<strong>Block Page</strong>
</div>
</document-title>
</page-header-wrapper>
</template>
<script>
export default {
name: 'BlockPage'
name: 'BlockPage',
data () {
return {
console: window.console,
tabList: [
{ tab: 'Tab1', key: 'tab1' },
{ tab: 'Tab2', key: 'tab2' },
{ tab: 'Tab3', key: 'tab3' }
],
tabActiveKey: 'tab1'
}
},
methods: {
handleTabChange (key) {
this.tabActiveKey = key
console.log('PageHeader::tabChange', key)
}
}
}
</script>
......
package.json
View file @ 078000d6
......@@ -27,7 +27,7 @@
],
"peerDependencies": {
"vue": ">=2.5.0",
"ant-design-vue": "^1.4.6",
"ant-design-vue": "^1.5.3",
"umi-request": "^1.2.11",
"vue-container-query": "^0.1.0",
"vue-template-compiler": ">=2.5.0"
......@@ -56,7 +56,7 @@
"vue-template-compiler": ">=2.5.0"
},
"dependencies": {
"ant-design-vue": "^1.5.0-rc.4",
"ant-design-vue": "^1.5.3",
"classnames": "^2.2.6",
"insert-css": "^2.0.0",
"lodash": "^4.17.15",
......
src/BasicLayout.jsx
View file @ 078000d6
......@@ -2,12 +2,12 @@ import './BasicLayout.less'
import { Layout } from 'ant-design-vue'
import { ContainerQuery } from 'vue-container-query'
import GridContent from './components/GridContent'
import { SiderMenuWrapper, GlobalFooter } from './components'
import { getComponentFormProp, isFun } from './utils/util'
import { getComponentFromProp, isFun } from './utils/util'
import { SiderMenuProps } from './components/SiderMenu/SiderMenu'
import HeaderView, { HeaderViewProps } from './Header'
import WrapContent from './WrapContent'
import ConfigProvider from '@ant-design-vue/pro-layout/components/ConfigProvider'
export const BasicLayoutProps = {
...SiderMenuProps,
......@@ -75,25 +75,26 @@ const BasicLayout = {
functional: true,
props: BasicLayoutProps,
render (h, content) {
const { props, data, children, slots } = content
const { props, children } = content
const {
menus,
layout,
logo,
contentWidth,
theme,
// contentWidth,
// theme,
collapsed,
// eslint-disable-next-line
autoHideHeader,
// autoHideHeader,
mediaQuery,
handleMediaQuery,
handleCollapse
handleCollapse,
i18nRender
} = props
const footerRender = getComponentFormProp(content, 'footerRender')
const rightContentRender = getComponentFormProp(content, 'rightContentRender')
const collapsedButtonRender = getComponentFormProp(content, 'collapsedButtonRender')
const menuHeaderRender = getComponentFormProp(content, 'menuHeaderRender')
const footerRender = getComponentFromProp(content, 'footerRender')
const rightContentRender = getComponentFromProp(content, 'rightContentRender')
const collapsedButtonRender = getComponentFromProp(content, 'collapsedButtonRender')
const menuHeaderRender = getComponentFromProp(content, 'menuHeaderRender')
const cdProps = {
...props,
......@@ -104,7 +105,7 @@ const BasicLayout = {
}
return (
<div>
<ConfigProvider i18nRender={i18nRender}>
<ContainerQuery query={MediaQueryEnum} onChange={handleMediaQuery}>
<Layout class={{ 'basicLayout': true, ...mediaQuery }}>
<SiderMenuWrapper
......@@ -142,7 +143,7 @@ const BasicLayout = {
</Layout>
</Layout>
</ContainerQuery>
</div>
</ConfigProvider>
)
}
}
......
src/components/ConfigProvider/index.js 0 → 100644
View file @ 078000d6
import PropTypes from 'ant-design-vue/es/_util/vue-types'
const ConfigProvider = {
name: 'ConfigProvider',
props: {
i18nRender: PropTypes.any,
},
provide () {
const _self = this
return {
locale: _self.$props.i18nRender
}
},
render () {
const { $scopedSlots } = this
const children = this.children || $scopedSlots.default
return children()
}
}
export default ConfigProvider
src/components/PageHeaderWrapper/index.jsx
View file @ 078000d6
......@@ -9,9 +9,10 @@ const { PageHeaderProps } = PageHeader
const prefixedClassName = 'ant-pro-page-header-wrap'
const PageHeaderTabConfig = {
tabList: PropTypes.object,
tabList: PropTypes.array,
tabActiveKey: PropTypes.string,
tabProps: PropTypes.object
tabProps: PropTypes.object,
tabChange: PropTypes.func
}
const PageHeaderWrapperProps = {
......@@ -21,6 +22,7 @@ const PageHeaderWrapperProps = {
content: PropTypes.any,
extraContent: PropTypes.any,
pageHeaderRender: PropTypes.func,
breadcrumb: PropTypes.oneOf([PropTypes.object, false]),
// 包装 pro-layout 才能使用
i18nRender: PropTypes.any
......@@ -38,7 +40,7 @@ const renderFooter = (h, tabConfigProps) => {
const {
tabList,
tabActiveKey,
onTabChange,
tabChange: onTabChange,
tabBarExtraContent,
tabProps,
} = tabConfigProps
......@@ -50,7 +52,6 @@ const renderFooter = (h, tabConfigProps) => {
if (onTabChange) {
onTabChange(key)
}
this.$emit('tab-change', key)
}}
tabBarExtraContent={tabBarExtraContent}
{...tabProps}
......@@ -90,9 +91,9 @@ const defaultPageHeaderRender = (h, props, value, i18nRender) => {
content,
pageHeaderRender,
extraContent,
breadcrumb,
...restProps
} = props
if (pageHeaderRender) {
return pageHeaderRender({ ...props })
}
......@@ -102,9 +103,10 @@ const defaultPageHeaderRender = (h, props, value, i18nRender) => {
}
return (
<PageHeader
{...value}
title={i18nRender(pageHeaderTitle)}
breadcrumb={breadcrumb}
{...props}
onBack={() => null}
footer={renderFooter(h, restProps)}
>
{renderPageHeader(h, content, extraContent)}
......@@ -116,14 +118,38 @@ const defaultPageHeaderRender = (h, props, value, i18nRender) => {
const PageHeaderWrapper = {
name: 'PageHeaderWrapper',
props: PageHeaderWrapperProps,
inject: ['locale'],
render (h) {
const children = this.$slots.default
const content = this.$slots.content
const extraContent = this.$slots.extraContent
const value = useContext(this.$props.route || this.$route)
const i18n = this.$props.i18nRender || defaultI18nRender
const i18n = this.$props.i18nRender || this.locale || defaultI18nRender
const propsBreadcrumb = this.$props.breadcrumb
let breadcrumb = {}
if (propsBreadcrumb === undefined) {
const routes = this.$route.matched.concat().map(route => {
return {
path: route.path,
breadcrumbName: i18n(route.meta.title)
}
})
breadcrumb = { props: { routes }}
}
const props = {
...this.$props,
content,
extraContent,
breadcrumb
}
return (
<div class="ant-pro-page-header-wrap">
<div class={`${prefixedClassName}-page-header-warp`}>
<GridContent>{defaultPageHeaderRender(h, this.$props, value, i18n)}</GridContent>
<GridContent>{defaultPageHeaderRender(h, props, value, i18n)}</GridContent>
</div>
{ children ? (
<GridContent>
......
src/index.js
View file @ 078000d6
import BasicLayout, { BasicLayoutProps } from './BasicLayout'
import BlockLayout from './BlockLayout'
import PageHeaderWrapper from './components/PageHeaderWrapper'
import GlobalFooter from './components/GlobalFooter'
import DocumentTitle from './components/DocumentTitle'
import { updateTheme } from './utils/dynamicTheme'
export {
GlobalFooter,
PageHeaderWrapper,
BlockLayout,
DocumentTitle,
......
src/utils/util.js
View file @ 078000d6
import triggerEvent from 'ant-design-vue/es/_util/triggerEvent'
import { inBrowser } from 'ant-design-vue/es/_util/env'
const getComponentFormProp = (instance, prop) => {
const getComponentFromProp = (instance, prop) => {
const slots = instance.slots && instance.slots()
return slots[prop] || instance.props[prop]
}
/*const getComponentFromProp = (instance, prop) => {
const slots = instance.$slots
return slots[prop] || instance.$props[prop]
}*/
const isFun = (func) => {
return typeof func === 'function'
}
......@@ -16,6 +22,6 @@ const isFun = (func) => {
export {
triggerEvent,
inBrowser,
getComponentFormProp,
getComponentFromProp,
isFun
}
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