Skip to content

Commit

Permalink
fix: breadcrumbRender and props breadcrumb vueComponent#10
Browse files Browse the repository at this point in the history
  • Loading branch information
sendya committed Jun 2, 2020
1 parent 1187b50 commit a104e5c
Show file tree
Hide file tree
Showing 14 changed files with 308 additions and 70 deletions.
20 changes: 20 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
English | [简体中文](./README.zh-CN.md)

<h1 align="center">Ant Design Pro Layout</h1>

## Usage

```bash
Expand Down Expand Up @@ -106,8 +107,12 @@ export default {
</script>
```



## API



### ProLayout

| Property | Description | Type | Default Value |
Expand All @@ -127,15 +132,30 @@ export default {
| rightContentRender | header right content render method | (props: HeaderViewProps) => VNode | - |
| collapsedButtonRender | custom collapsed button method | (collapsed: boolean) => VNode | - |
| footerRender | custom footer render method | (props: BasicLayoutProps) => VNode | - |
| breadcrumbRender | custom breadcrumb render method | ({ route, params, routes, paths, h }) => VNode[] | - |
| i18nRender | i18n | Function (key: string) => string | - |
| handleMediaQuery | media matchs callback | (querys: []) => void | - |
| mediaQuery | media matchs | Array | - |



### PageHeaderWrapper

| Property | Description | Type | Default Value |
| --- | --- | --- | --- |
| content | Content area | VNode \| v-slot | - |
| extra | Extra content area, on the right side of content | VNode \| v-slot | - |
| extraContent | Extra content area, on the right side of content | VNode \| v-slot | - |
| tabList | Tabs title list | `Array<{key: string, tab: sting}>` | - |
| tab-change | Switch panel callback | (key) => void | - |
| tab-active-key | The currently highlighted tab item | string | - |




### SettingDrawer

#### {settings}
| Property | Description | Type | Default Value |
| ---- | ---- | ---- | ---- |
| theme | Theme | `dark` `light` `realDark` | `light` |
Expand Down
21 changes: 21 additions & 0 deletions README.zh-CN.md
Original file line number Diff line number Diff line change
Expand Up @@ -102,8 +102,12 @@ export default {
</script>
```



## API



### ProLayout

| Property | Description | Type | Default Value |
Expand All @@ -123,13 +127,30 @@ export default {
| rightContentRender | 自定义头右部的 render 方法 | (props: HeaderViewProps) => VNode | - |
| collapsedButtonRender | 自定义 侧栏收缩按钮 的方法 | (collapsed: boolean) => VNode | - |
| footerRender | 自定义 底部区域内容 | (props: BasicLayoutProps) => VNode | - |
| breadcrumbRender | 自定义面包屑渲染方法 | ({ route, params, routes, paths, h }) => VNode[] | - |
| i18nRender | 本地化渲染函数 (this.$t) | Function (key: string) => string | - |
| handleMediaQuery | 媒体查询回调 | (querys: []) => void | - |
| mediaQuery | ProLayout 当前的媒体查询 | Array | - |



### PageHeaderWrapper

| Property | Description | Type | Default Value |
| --- | --- | --- | --- |
| content | 内容区 | VNode \| v-slot | - |
| extra | 扩展区域 | VNode \| v-slot | - |
| extraContent | 扩展内容区 | VNode \| v-slot | - |
| tabList | Tabs 导航 | `Array<{key: string, tab: sting}>` | - |
| tab-change | Tab 改变事件 | (key) => void | - |
| tab-active-key | 当前 Tab 选中项 | string | - |



### SettingDrawer

#### {settings}

| Property | Description | Type | Default Value |
| ---- | ---- | ---- | ---- |
| theme | 主题 | `dark` `light` `realDark` | `light` |
Expand Down
6 changes: 3 additions & 3 deletions examples/src/config/router.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@ const asyncRouterMap = [
icon: 'smile',
title: 'menu.form.basicform'
},
component: () => import(/* webpackChunkName: "about" */ '../views/BlockPage')
component: () => import(/* webpackChunkName: "about" */ '../views/form/basic-form')
},
{
path: '/form/step-form',
Expand All @@ -72,7 +72,7 @@ const asyncRouterMap = [
icon: 'smile',
title: 'menu.form.stepform'
},
component: () => import(/* webpackChunkName: "about" */ '../views/BlockPage')
component: () => import(/* webpackChunkName: "about" */ '../views/form/step-form')
},
{
path: '/form/advanced-form',
Expand All @@ -82,7 +82,7 @@ const asyncRouterMap = [
icon: 'smile',
title: 'menu.form.advancedform'
},
component: () => import(/* webpackChunkName: "about" */ '../views/BlockPage')
component: () => import(/* webpackChunkName: "about" */ '../views/form/advanced-form')
}
]
},
Expand Down
55 changes: 30 additions & 25 deletions examples/src/core/antd/icons.js
Original file line number Diff line number Diff line change
@@ -1,28 +1,3 @@
export {
default as SettingOutline
} from '@ant-design/icons/lib/outline/SettingOutline'
export {
default as GithubOutline
} from '@ant-design/icons/lib/outline/GithubOutline'
export {
default as CopyrightOutline
} from '@ant-design/icons/lib/outline/CopyrightOutline'

/* MultiTab begin */
export {
default as CloseOutline
} from '@ant-design/icons/lib/outline/CloseOutline'
export {
default as ReloadOutline
} from '@ant-design/icons/lib/outline/ReloadOutline'
export {
default as DownOutline
} from '@ant-design/icons/lib/outline/DownOutline'
export {
default as AlignLeftOutline
} from '@ant-design/icons/lib/outline/AlignLeftOutline'
/* MultiTab end */

/* Layout begin */
export {
default as LeftOutline
Expand Down Expand Up @@ -72,4 +47,34 @@ export {
export {
default as NotificationOutline
} from '@ant-design/icons/lib/outline/NotificationOutline'
export {
default as SettingOutline
} from '@ant-design/icons/lib/outline/SettingOutline'
export {
default as GithubOutline
} from '@ant-design/icons/lib/outline/GithubOutline'
export {
default as CopyrightOutline
} from '@ant-design/icons/lib/outline/CopyrightOutline'
/* Layout end */

/* Feedback begin */
export {
default as QuestionCircleOutline
} from '@ant-design/icons/lib/outline/QuestionCircleOutline'
/* Feedback end */

/* MultiTab begin */
export {
default as CloseOutline
} from '@ant-design/icons/lib/outline/CloseOutline'
export {
default as ReloadOutline
} from '@ant-design/icons/lib/outline/ReloadOutline'
export {
default as DownOutline
} from '@ant-design/icons/lib/outline/DownOutline'
export {
default as AlignLeftOutline
} from '@ant-design/icons/lib/outline/AlignLeftOutline'
/* MultiTab end */
12 changes: 11 additions & 1 deletion examples/src/layouts/BasicLayout.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -105,6 +105,7 @@ export default {
theme: 'dark',
// 主色调
primaryColor: '#1890ff',
colorWeak: false,

hideHintAlert: false,
hideCopyButton: false
Expand Down Expand Up @@ -132,7 +133,6 @@ export default {
const menus = asyncRouterMap.find(item => item.path === '/').children

const handleSettingChange = ({ type, value, ...args }) => {
console.log('type', type, 'value', value, 'args:', args)
this.settings[type] = value

if (type === 'contentWidth') {
Expand All @@ -148,6 +148,15 @@ export default {
}
}

// eslint-disable-next-line no-unused-vars
const breadcrumbRender = ({ route, params, routes, paths, h }) => {
return routes.indexOf(route) === routes.length - 1 && (
<span>{route.breadcrumbName}</span>
) || (
<router-link to={{ path: route.path || '/' }}>{route.breadcrumbName}</router-link>
)
}

const cdProps = {
props: {
...this.settings,
Expand All @@ -162,6 +171,7 @@ export default {
footerRender,
i18nRender,
menuHeaderRender,
breadcrumbRender,

// logo: LogoSvg,
title: 'Ant Design Pro'
Expand Down
2 changes: 1 addition & 1 deletion examples/src/locales/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -15,13 +15,13 @@ const messages = {
}

const i18n = new VueI18n({
silentTranslationWarn: true,
locale: defaultLang,
fallbackLocale: defaultLang,
messages
})

const loadedLanguages = [defaultLang]
// eslint-disable-next-line

function setI18nLanguage (lang) {
i18n.locale = lang
Expand Down
3 changes: 2 additions & 1 deletion examples/src/router/index.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import Vue from 'vue'
import VueRouter from 'vue-router'
import { asyncRouterMap } from '../config/router.config'
import { asyncRouterMap } from '@/config/router.config'

// hack router push/replace callback
['push', 'replace'].map(key => {
Expand All @@ -20,6 +20,7 @@ Vue.use(VueRouter)
const routes = asyncRouterMap

const router = new VueRouter({
mode: 'history',
routes
})

Expand Down
54 changes: 54 additions & 0 deletions examples/src/views/form/advanced-form.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
<template>
<page-header-wrapper
:tab-list="tabList"
:tab-active-key="tabActiveKey"
:tab-change="(key) => {
this.tabActiveKey = key
console.log('PageHeader::tabChange', key)
}"
@back="() => {
console.log('PageHeader::@back')
}"
:back="() => {
// 自定义 back,不会覆盖 onBack 事件
console.log('PageHeader::.back')
}"
>
<template v-slot:content>
<span>{{ $t('pages.form.basicform.content') }}</span>
</template>
<template v-slot:extraContent>
<div><a-button>{{ $t('pages.form.basicform.headers.btn1') }}</a-button></div>
</template>
<div>
<strong>Advanced Form</strong>
</div>
</page-header-wrapper>
</template>

<script>
export default {
name: 'AdvancedForm',
data () {
return {
console: window.console,
tabList: [
{ tab: 'pages.form.basicform.tabs.tab1', key: 'tab1' },
{ tab: 'pages.form.basicform.tabs.tab2', key: 'tab2' },
{ tab: 'pages.form.basicform.tabs.tab3', key: 'tab3' }
],
tabActiveKey: 'tab1'
}
},
methods: {
handleTabChange (key) {
this.tabActiveKey = key
console.log('PageHeader::tabChange', key)
}
}
}
</script>

<style scoped>
</style>
54 changes: 54 additions & 0 deletions examples/src/views/form/basic-form.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
<template>
<page-header-wrapper
:tab-list="tabList"
:tab-active-key="tabActiveKey"
:tab-change="(key) => {
this.tabActiveKey = key
console.log('PageHeader::tabChange', key)
}"
@back="() => {
console.log('PageHeader::@back')
}"
:back="() => {
// 自定义 back,不会覆盖 onBack 事件
console.log('PageHeader::.back')
}"
>
<template v-slot:content>
<span>{{ $t('pages.form.basicform.content') }}</span>
</template>
<template v-slot:extraContent>
<div><a-button>{{ $t('pages.form.basicform.headers.btn1') }}</a-button></div>
</template>
<div>
<strong>Basic Form</strong>
</div>
</page-header-wrapper>
</template>

<script>
export default {
name: 'BasicForm',
data () {
return {
console: window.console,
tabList: [
{ tab: 'pages.form.basicform.tabs.tab1', key: 'tab1' },
{ tab: 'pages.form.basicform.tabs.tab2', key: 'tab2' },
{ tab: 'pages.form.basicform.tabs.tab3', key: 'tab3' }
],
tabActiveKey: 'tab1'
}
},
methods: {
handleTabChange (key) {
this.tabActiveKey = key
console.log('PageHeader::tabChange', key)
}
}
}
</script>

<style scoped>
</style>
Loading

0 comments on commit a104e5c

Please sign in to comment.