From 934988c03a5382a8827b320f7890920f00fcca17 Mon Sep 17 00:00:00 2001 From: hetech Date: Wed, 29 May 2019 10:10:16 +0800 Subject: [PATCH] PageHeader: add page-header component (#15714) --- components.json | 3 +- examples/docs/en-US/page-header.md | 39 +++++++++++++++++++++ examples/docs/es/page-header.md | 39 +++++++++++++++++++++ examples/docs/fr-FR/page-header.md | 39 +++++++++++++++++++++ examples/docs/zh-CN/page-header.md | 40 ++++++++++++++++++++++ examples/nav.config.json | 16 +++++++++ packages/page-header/index.js | 8 +++++ packages/page-header/src/main.vue | 30 +++++++++++++++++ packages/theme-chalk/src/index.scss | 1 + packages/theme-chalk/src/page-header.scss | 41 +++++++++++++++++++++++ src/index.js | 5 ++- src/locale/lang/af-ZA.js | 3 ++ src/locale/lang/ar.js | 3 ++ src/locale/lang/bg.js | 3 ++ src/locale/lang/ca.js | 3 ++ src/locale/lang/cs-CZ.js | 3 ++ src/locale/lang/da.js | 3 ++ src/locale/lang/de.js | 3 ++ src/locale/lang/ee.js | 3 ++ src/locale/lang/el.js | 3 ++ src/locale/lang/en.js | 3 ++ src/locale/lang/es.js | 3 ++ src/locale/lang/eu.js | 3 ++ src/locale/lang/fa.js | 3 ++ src/locale/lang/fi.js | 3 ++ src/locale/lang/fr.js | 3 ++ src/locale/lang/he.js | 3 ++ src/locale/lang/hr.js | 3 ++ src/locale/lang/hu.js | 3 ++ src/locale/lang/hy-AM.js | 3 ++ src/locale/lang/id.js | 3 ++ src/locale/lang/it.js | 3 ++ src/locale/lang/ja.js | 3 ++ src/locale/lang/kg.js | 3 ++ src/locale/lang/km.js | 3 ++ src/locale/lang/ko.js | 3 ++ src/locale/lang/ku.js | 3 ++ src/locale/lang/kz.js | 3 ++ src/locale/lang/lt.js | 3 ++ src/locale/lang/lv.js | 3 ++ src/locale/lang/mn.js | 3 ++ src/locale/lang/nb-NO.js | 3 ++ src/locale/lang/nl.js | 3 ++ src/locale/lang/pl.js | 3 ++ src/locale/lang/pt-br.js | 3 ++ src/locale/lang/pt.js | 3 ++ src/locale/lang/ro.js | 3 ++ src/locale/lang/ru-RU.js | 3 ++ src/locale/lang/sk.js | 3 ++ src/locale/lang/sl.js | 3 ++ src/locale/lang/sr.js | 3 ++ src/locale/lang/sv-SE.js | 3 ++ src/locale/lang/ta.js | 3 ++ src/locale/lang/th.js | 3 ++ src/locale/lang/tk.js | 3 ++ src/locale/lang/tr-TR.js | 3 ++ src/locale/lang/ua.js | 3 ++ src/locale/lang/ug-CN.js | 3 ++ src/locale/lang/vi.js | 3 ++ src/locale/lang/zh-CN.js | 3 ++ src/locale/lang/zh-TW.js | 3 ++ test/unit/specs/page-header.spec.js | 24 +++++++++++++ types/element-ui.d.ts | 3 ++ types/page-header.d.ts | 10 ++++++ 64 files changed, 446 insertions(+), 2 deletions(-) create mode 100644 examples/docs/en-US/page-header.md create mode 100644 examples/docs/es/page-header.md create mode 100644 examples/docs/fr-FR/page-header.md create mode 100644 examples/docs/zh-CN/page-header.md create mode 100644 packages/page-header/index.js create mode 100644 packages/page-header/src/main.vue create mode 100644 packages/theme-chalk/src/page-header.scss create mode 100644 test/unit/specs/page-header.spec.js create mode 100644 types/page-header.d.ts diff --git a/components.json b/components.json index f67283ce9..07d33a97e 100644 --- a/components.json +++ b/components.json @@ -75,5 +75,6 @@ "image": "./packages/image/index.js", "calendar": "./packages/calendar/index.js", "backtop": "./packages/backtop/index.js", - "infiniteScroll": "./packages/infiniteScroll/index.js" + "infiniteScroll": "./packages/infiniteScroll/index.js", + "page-header": "./packages/page-header/index.js" } diff --git a/examples/docs/en-US/page-header.md b/examples/docs/en-US/page-header.md new file mode 100644 index 000000000..cade09064 --- /dev/null +++ b/examples/docs/en-US/page-header.md @@ -0,0 +1,39 @@ +## PageHeader + +If path of the page is simple, it is recommended to use PageHeader instead of the Breadcrumb. + +### Basic + +:::demo +```html + + + + +```html +::: + +### Attributes +| Attribute | Description | Type | Accepted Values | Default | +|---------- |-------------- |---------- |------------------------------ | ------ | +| title | main title | string | — | Back | +| content | content | string | — | — | + +### Events +| Event Name | Description | Parameters | +|----------- |-------------- |----------- | +| back | triggers when right side is clicked | — | + +### Slots +| slot | Description | +|---------- | ---------------------- | +| title | title content | +| content | content | diff --git a/examples/docs/es/page-header.md b/examples/docs/es/page-header.md new file mode 100644 index 000000000..cade09064 --- /dev/null +++ b/examples/docs/es/page-header.md @@ -0,0 +1,39 @@ +## PageHeader + +If path of the page is simple, it is recommended to use PageHeader instead of the Breadcrumb. + +### Basic + +:::demo +```html + + + + +```html +::: + +### Attributes +| Attribute | Description | Type | Accepted Values | Default | +|---------- |-------------- |---------- |------------------------------ | ------ | +| title | main title | string | — | Back | +| content | content | string | — | — | + +### Events +| Event Name | Description | Parameters | +|----------- |-------------- |----------- | +| back | triggers when right side is clicked | — | + +### Slots +| slot | Description | +|---------- | ---------------------- | +| title | title content | +| content | content | diff --git a/examples/docs/fr-FR/page-header.md b/examples/docs/fr-FR/page-header.md new file mode 100644 index 000000000..cade09064 --- /dev/null +++ b/examples/docs/fr-FR/page-header.md @@ -0,0 +1,39 @@ +## PageHeader + +If path of the page is simple, it is recommended to use PageHeader instead of the Breadcrumb. + +### Basic + +:::demo +```html + + + + +```html +::: + +### Attributes +| Attribute | Description | Type | Accepted Values | Default | +|---------- |-------------- |---------- |------------------------------ | ------ | +| title | main title | string | — | Back | +| content | content | string | — | — | + +### Events +| Event Name | Description | Parameters | +|----------- |-------------- |----------- | +| back | triggers when right side is clicked | — | + +### Slots +| slot | Description | +|---------- | ---------------------- | +| title | title content | +| content | content | diff --git a/examples/docs/zh-CN/page-header.md b/examples/docs/zh-CN/page-header.md new file mode 100644 index 000000000..8384b8024 --- /dev/null +++ b/examples/docs/zh-CN/page-header.md @@ -0,0 +1,40 @@ +## PageHeader 页头 + +如果页面的路径比较简单，推荐使用页头组件而非面包屑组件。 + +### 基础 + +:::demo +```html + + + + +``` +::: + +### Attributes +| 参数 | 说明 | 类型 | 可选值 | 默认值 | +|---------- |-------------- |---------- |------------------------------ | ------ | +| title | 标题 | string | — | 返回 | +| content | 内容 | string | — | — | + + +### Events +| 事件名称 | 说明 | 回调参数 | +|---------- |-------------- |---------- | +| back | 点击左侧区域触发 | — | + +### Slots +| 事件名称 | 说明 | +|---------- |------------- | +| title | 标题内容 | +| content | 内容 | diff --git a/examples/nav.config.json b/examples/nav.config.json index 999a2a137..21cd5c814 100644 --- a/examples/nav.config.json +++ b/examples/nav.config.json @@ -215,6 +215,10 @@ "path": "/breadcrumb", "title": "Breadcrumb 面包屑" }, + { + "path": "/page-header", + "title": "PageHeader 页头" + }, { "path": "/dropdown", "title": "Dropdown 下拉菜单" @@ -497,6 +501,10 @@ "path": "/breadcrumb", "title": "Breadcrumb" }, + { + "path": "/page-header", + "title": "PageHeader" + }, { "path": "/dropdown", "title": "Dropdown" @@ -779,6 +787,10 @@ "path": "/breadcrumb", "title": "Breadcrumb" }, + { + "path": "/page-header", + "title": "PageHeader" + }, { "path": "/dropdown", "title": "Dropdown" @@ -1061,6 +1073,10 @@ "path": "/breadcrumb", "title": "Breadcrumb" }, + { + "path": "/page-header", + "title": "PageHeader" + }, { "path": "/dropdown", "title": "Dropdown" diff --git a/packages/page-header/index.js b/packages/page-header/index.js new file mode 100644 index 000000000..105da7322 --- /dev/null +++ b/packages/page-header/index.js @@ -0,0 +1,8 @@ +import PageHeader from './src/main'; + +/* istanbul ignore next */ +PageHeader.install = function(Vue) { + Vue.component(PageHeader.name, PageHeader); +}; + +export default PageHeader; diff --git a/packages/page-header/src/main.vue b/packages/page-header/src/main.vue new file mode 100644 index 000000000..d7d6b3807 --- /dev/null +++ b/packages/page-header/src/main.vue @@ -0,0 +1,30 @@ + + + diff --git a/packages/theme-chalk/src/index.scss b/packages/theme-chalk/src/index.scss index 73be76314..f54249b79 100644 --- a/packages/theme-chalk/src/index.scss +++ b/packages/theme-chalk/src/index.scss @@ -72,3 +72,4 @@ @import "./image.scss"; @import "./calendar.scss"; @import "./backtop.scss"; +@import "./page-header.scss"; diff --git a/packages/theme-chalk/src/page-header.scss b/packages/theme-chalk/src/page-header.scss new file mode 100644 index 000000000..14c19fa9d --- /dev/null +++ b/packages/theme-chalk/src/page-header.scss @@ -0,0 +1,41 @@ +@import "mixins/mixins"; +@import "common/var"; + +@include b(page-header) { + display: flex; + line-height: 24px; + + @include e(left) { + display: flex; + cursor: pointer; + margin-right: 40px; + position: relative; + + &::after { + content: ""; + position: absolute; + width: 1px; + height: 16px; + right: -20px; + top: 50%; + transform: translateY(-50%); + background-color: $--border-color-base; + } + + .el-icon-back { + font-size: 18px; + margin-right: 6px; + align-self: center; + } + + @include e(title) { + font-size: 14px; + font-weight: 500; + } + } + + @include e(content) { + font-size: 18px; + color: $--color-text-primary; + } +} diff --git a/src/index.js b/src/index.js index 7c6268b5a..0133c4b9b 100644 --- a/src/index.js +++ b/src/index.js @@ -77,6 +77,7 @@ import Image from '../packages/image/index.js'; import Calendar from '../packages/calendar/index.js'; import Backtop from '../packages/backtop/index.js'; import InfiniteScroll from '../packages/infiniteScroll/index.js'; +import PageHeader from '../packages/page-header/index.js'; import locale from 'element-ui/src/locale'; import CollapseTransition from 'element-ui/src/transitions/collapse-transition'; @@ -153,6 +154,7 @@ const components = [ Image, Calendar, Backtop, + PageHeader, CollapseTransition ]; @@ -269,5 +271,6 @@ export default { Image, Calendar, Backtop, - InfiniteScroll + InfiniteScroll, + PageHeader }; diff --git a/src/locale/lang/af-ZA.js b/src/locale/lang/af-ZA.js index cbb513295..f207eba8c 100644 --- a/src/locale/lang/af-ZA.js +++ b/src/locale/lang/af-ZA.js @@ -107,6 +107,9 @@ export default { }, image: { error: 'FAILED' // to be translated + }, + pageHeader: { + title: 'Back' // to be translated } } }; diff --git a/src/locale/lang/ar.js b/src/locale/lang/ar.js index da074098b..8af92a5ec 100644 --- a/src/locale/lang/ar.js +++ b/src/locale/lang/ar.js @@ -106,6 +106,9 @@ export default { }, image: { error: 'FAILED' // to be translated + }, + pageHeader: { + title: 'Back' // to be translated } } }; diff --git a/src/locale/lang/bg.js b/src/locale/lang/bg.js index 1dd8468bc..d8b561452 100644 --- a/src/locale/lang/bg.js +++ b/src/locale/lang/bg.js @@ -107,6 +107,9 @@ export default { }, image: { error: 'FAILED' // to be translated + }, + pageHeader: { + title: 'Back' // to be translated } } }; diff --git a/src/locale/lang/ca.js b/src/locale/lang/ca.js index 6a4aa2b17..fd06ce8df 100644 --- a/src/locale/lang/ca.js +++ b/src/locale/lang/ca.js @@ -106,6 +106,9 @@ export default { }, image: { error: 'FAILED' // to be translated + }, + pageHeader: { + title: 'Back' // to be translated } } }; diff --git a/src/locale/lang/cs-CZ.js b/src/locale/lang/cs-CZ.js index 24c74e9a6..12beb2cb2 100644 --- a/src/locale/lang/cs-CZ.js +++ b/src/locale/lang/cs-CZ.js @@ -109,6 +109,9 @@ export default { }, image: { error: 'FAILED' // to be translated + }, + pageHeader: { + title: 'Back' // to be translated } } }; diff --git a/src/locale/lang/da.js b/src/locale/lang/da.js index b8c867090..2d4991473 100644 --- a/src/locale/lang/da.js +++ b/src/locale/lang/da.js @@ -106,6 +106,9 @@ export default { }, image: { error: 'FAILED' // to be translated + }, + pageHeader: { + title: 'Back' // to be translated } } }; diff --git a/src/locale/lang/de.js b/src/locale/lang/de.js index 17c7913fe..196d6911c 100644 --- a/src/locale/lang/de.js +++ b/src/locale/lang/de.js @@ -108,6 +108,9 @@ export default { }, image: { error: 'FAILED' // to be translated + }, + pageHeader: { + title: 'Back' // to be translated } } }; diff --git a/src/locale/lang/ee.js b/src/locale/lang/ee.js index 5c097e2ad..640612907 100644 --- a/src/locale/lang/ee.js +++ b/src/locale/lang/ee.js @@ -107,6 +107,9 @@ export default { }, image: { error: 'FAILED' // to be translated + }, + pageHeader: { + title: 'Back' // to be translated } } }; diff --git a/src/locale/lang/el.js b/src/locale/lang/el.js index 52688e072..f111bfc6e 100644 --- a/src/locale/lang/el.js +++ b/src/locale/lang/el.js @@ -107,6 +107,9 @@ export default { }, image: { error: 'FAILED' // to be translated + }, + pageHeader: { + title: 'Back' // to be translated } } }; diff --git a/src/locale/lang/en.js b/src/locale/lang/en.js index 94d9c662f..c2ea43832 100644 --- a/src/locale/lang/en.js +++ b/src/locale/lang/en.js @@ -107,6 +107,9 @@ export default { }, image: { error: 'FAILED' + }, + pageHeader: { + title: 'Back' // to be translated } } }; diff --git a/src/locale/lang/es.js b/src/locale/lang/es.js index e20824499..8fb737ca9 100644 --- a/src/locale/lang/es.js +++ b/src/locale/lang/es.js @@ -106,6 +106,9 @@ export default { }, image: { error: 'FAILED' // to be translated + }, + pageHeader: { + title: 'Back' // to be translated } } }; diff --git a/src/locale/lang/eu.js b/src/locale/lang/eu.js index dfa5d9301..9f5f182d3 100644 --- a/src/locale/lang/eu.js +++ b/src/locale/lang/eu.js @@ -107,6 +107,9 @@ export default { }, image: { error: 'FAILED' // to be translated + }, + pageHeader: { + title: 'Back' // to be translated } } }; diff --git a/src/locale/lang/fa.js b/src/locale/lang/fa.js index b1255179d..b70a45c92 100644 --- a/src/locale/lang/fa.js +++ b/src/locale/lang/fa.js @@ -107,6 +107,9 @@ export default { }, image: { error: 'FAILED' // to be translated + }, + pageHeader: { + title: 'Back' // to be translated } } }; diff --git a/src/locale/lang/fi.js b/src/locale/lang/fi.js index 0ae38e482..5b3c5ef3c 100644 --- a/src/locale/lang/fi.js +++ b/src/locale/lang/fi.js @@ -107,6 +107,9 @@ export default { }, image: { error: 'FAILED' // to be translated + }, + pageHeader: { + title: 'Back' // to be translated } } }; diff --git a/src/locale/lang/fr.js b/src/locale/lang/fr.js index 98b9a3429..10a456461 100644 --- a/src/locale/lang/fr.js +++ b/src/locale/lang/fr.js @@ -106,6 +106,9 @@ export default { }, image: { error: 'FAILED' // to be translated + }, + pageHeader: { + title: 'Back' // to be translated } } }; diff --git a/src/locale/lang/he.js b/src/locale/lang/he.js index 2cb92ca0a..f27b99bfe 100644 --- a/src/locale/lang/he.js +++ b/src/locale/lang/he.js @@ -107,6 +107,9 @@ export default { }, image: { error: 'FAILED' // to be translated + }, + pageHeader: { + title: 'Back' // to be translated } } }; diff --git a/src/locale/lang/hr.js b/src/locale/lang/hr.js index ec341834b..a508e7d3f 100644 --- a/src/locale/lang/hr.js +++ b/src/locale/lang/hr.js @@ -107,6 +107,9 @@ export default { }, image: { error: 'FAILED' // to be translated + }, + pageHeader: { + title: 'Back' // to be translated } } }; diff --git a/src/locale/lang/hu.js b/src/locale/lang/hu.js index 89b87f46d..295c3105c 100644 --- a/src/locale/lang/hu.js +++ b/src/locale/lang/hu.js @@ -106,6 +106,9 @@ export default { }, image: { error: 'FAILED' // to be translated + }, + pageHeader: { + title: 'Back' // to be translated } } }; diff --git a/src/locale/lang/hy-AM.js b/src/locale/lang/hy-AM.js index 7b60d040a..6b3c63918 100644 --- a/src/locale/lang/hy-AM.js +++ b/src/locale/lang/hy-AM.js @@ -107,6 +107,9 @@ export default { }, image: { error: 'FAILED' // to be translated + }, + pageHeader: { + title: 'Back' // to be translated } } }; diff --git a/src/locale/lang/id.js b/src/locale/lang/id.js index 2163b1c98..5875a86c8 100644 --- a/src/locale/lang/id.js +++ b/src/locale/lang/id.js @@ -107,6 +107,9 @@ export default { }, image: { error: 'FAILED' // to be translated + }, + pageHeader: { + title: 'Back' // to be translated } } }; diff --git a/src/locale/lang/it.js b/src/locale/lang/it.js index b4006421d..850829fc6 100644 --- a/src/locale/lang/it.js +++ b/src/locale/lang/it.js @@ -106,6 +106,9 @@ export default { }, image: { error: 'FAILED' // to be translated + }, + pageHeader: { + title: 'Back' // to be translated } } }; diff --git a/src/locale/lang/ja.js b/src/locale/lang/ja.js index fa9e0d103..16a635adc 100644 --- a/src/locale/lang/ja.js +++ b/src/locale/lang/ja.js @@ -107,6 +107,9 @@ export default { }, image: { error: 'FAILED' // to be translated + }, + pageHeader: { + title: 'Back' // to be translated } } }; diff --git a/src/locale/lang/kg.js b/src/locale/lang/kg.js index 470a8f4a6..5498ac7ff 100644 --- a/src/locale/lang/kg.js +++ b/src/locale/lang/kg.js @@ -107,6 +107,9 @@ export default { }, image: { error: 'FAILED' // to be translated + }, + pageHeader: { + title: 'Back' // to be translated } } }; diff --git a/src/locale/lang/km.js b/src/locale/lang/km.js index eb8251bd4..a45cbfc78 100644 --- a/src/locale/lang/km.js +++ b/src/locale/lang/km.js @@ -107,6 +107,9 @@ export default { }, image: { error: 'FAILED' // to be translated + }, + pageHeader: { + title: 'Back' // to be translated } } }; diff --git a/src/locale/lang/ko.js b/src/locale/lang/ko.js index aafd3d63a..4cadf21f8 100644 --- a/src/locale/lang/ko.js +++ b/src/locale/lang/ko.js @@ -107,6 +107,9 @@ export default { }, image: { error: 'FAILED' // to be translated + }, + pageHeader: { + title: 'Back' // to be translated } } }; diff --git a/src/locale/lang/ku.js b/src/locale/lang/ku.js index 97a150c1a..57d4480f0 100644 --- a/src/locale/lang/ku.js +++ b/src/locale/lang/ku.js @@ -107,6 +107,9 @@ export default { }, image: { error: 'FAILED' // to be translated + }, + pageHeader: { + title: 'Back' // to be translated } } }; diff --git a/src/locale/lang/kz.js b/src/locale/lang/kz.js index 81e2ee3d2..a4579d4ad 100644 --- a/src/locale/lang/kz.js +++ b/src/locale/lang/kz.js @@ -107,6 +107,9 @@ export default { }, image: { error: 'FAILED' // to be translated + }, + pageHeader: { + title: 'Back' // to be translated } } }; diff --git a/src/locale/lang/lt.js b/src/locale/lang/lt.js index 156e248f1..3e3ba3092 100644 --- a/src/locale/lang/lt.js +++ b/src/locale/lang/lt.js @@ -107,6 +107,9 @@ export default { }, image: { error: 'FAILED' // to be translated + }, + pageHeader: { + title: 'Back' // to be translated } } }; diff --git a/src/locale/lang/lv.js b/src/locale/lang/lv.js index f8afe29db..18f99cda7 100644 --- a/src/locale/lang/lv.js +++ b/src/locale/lang/lv.js @@ -107,6 +107,9 @@ export default { }, image: { error: 'FAILED' // to be translated + }, + pageHeader: { + title: 'Back' // to be translated } } }; diff --git a/src/locale/lang/mn.js b/src/locale/lang/mn.js index e85019af3..47280d88f 100644 --- a/src/locale/lang/mn.js +++ b/src/locale/lang/mn.js @@ -107,6 +107,9 @@ export default { }, image: { error: 'FAILED' // to be translated + }, + pageHeader: { + title: 'Back' // to be translated } } }; diff --git a/src/locale/lang/nb-NO.js b/src/locale/lang/nb-NO.js index e8692b410..c32b54d3f 100644 --- a/src/locale/lang/nb-NO.js +++ b/src/locale/lang/nb-NO.js @@ -106,6 +106,9 @@ export default { }, image: { error: 'FAILED' // to be translated + }, + pageHeader: { + title: 'Back' // to be translated } } }; diff --git a/src/locale/lang/nl.js b/src/locale/lang/nl.js index 1715e9223..fb4df9cc8 100644 --- a/src/locale/lang/nl.js +++ b/src/locale/lang/nl.js @@ -107,6 +107,9 @@ export default { }, image: { error: 'FAILED' // to be translated + }, + pageHeader: { + title: 'Back' // to be translated } } }; diff --git a/src/locale/lang/pl.js b/src/locale/lang/pl.js index 37b02b381..e837edac2 100644 --- a/src/locale/lang/pl.js +++ b/src/locale/lang/pl.js @@ -107,6 +107,9 @@ export default { }, image: { error: 'FAILED' // to be translated + }, + pageHeader: { + title: 'Back' // to be translated } } }; diff --git a/src/locale/lang/pt-br.js b/src/locale/lang/pt-br.js index 6f6f37748..2902fc358 100644 --- a/src/locale/lang/pt-br.js +++ b/src/locale/lang/pt-br.js @@ -107,6 +107,9 @@ export default { }, image: { error: 'FAILED' // to be translated + }, + pageHeader: { + title: 'Back' // to be translated } } }; diff --git a/src/locale/lang/pt.js b/src/locale/lang/pt.js index 89a4e4f37..16bc2053e 100644 --- a/src/locale/lang/pt.js +++ b/src/locale/lang/pt.js @@ -107,6 +107,9 @@ export default { }, image: { error: 'FAILED' // to be translated + }, + pageHeader: { + title: 'Back' // to be translated } } }; diff --git a/src/locale/lang/ro.js b/src/locale/lang/ro.js index 8fb218c35..76610749f 100644 --- a/src/locale/lang/ro.js +++ b/src/locale/lang/ro.js @@ -107,6 +107,9 @@ export default { }, image: { error: 'FAILED' // to be translated + }, + pageHeader: { + title: 'Back' // to be translated } } }; diff --git a/src/locale/lang/ru-RU.js b/src/locale/lang/ru-RU.js index c6a936c3f..ef6824f8e 100644 --- a/src/locale/lang/ru-RU.js +++ b/src/locale/lang/ru-RU.js @@ -107,6 +107,9 @@ export default { }, image: { error: 'FAILED' // to be translated + }, + pageHeader: { + title: 'Back' // to be translated } } }; diff --git a/src/locale/lang/sk.js b/src/locale/lang/sk.js index 8aa383260..0897e76ed 100644 --- a/src/locale/lang/sk.js +++ b/src/locale/lang/sk.js @@ -109,6 +109,9 @@ export default { }, image: { error: 'FAILED' // to be translated + }, + pageHeader: { + title: 'Back' // to be translated } } }; diff --git a/src/locale/lang/sl.js b/src/locale/lang/sl.js index b6cd253d3..4361d62e4 100644 --- a/src/locale/lang/sl.js +++ b/src/locale/lang/sl.js @@ -107,6 +107,9 @@ export default { }, image: { error: 'FAILED' // to be translated + }, + pageHeader: { + title: 'Back' // to be translated } } }; diff --git a/src/locale/lang/sr.js b/src/locale/lang/sr.js index 7d3e7b048..b40afc612 100644 --- a/src/locale/lang/sr.js +++ b/src/locale/lang/sr.js @@ -107,6 +107,9 @@ export default { }, image: { error: 'FAILED' // to be translated + }, + pageHeader: { + title: 'Back' // to be translated } } }; diff --git a/src/locale/lang/sv-SE.js b/src/locale/lang/sv-SE.js index aed00aea3..72ad41b2d 100644 --- a/src/locale/lang/sv-SE.js +++ b/src/locale/lang/sv-SE.js @@ -107,6 +107,9 @@ export default { }, image: { error: 'FAILED' // to be translated + }, + pageHeader: { + title: 'Back' // to be translated } } }; diff --git a/src/locale/lang/ta.js b/src/locale/lang/ta.js index 694501adf..2e802d028 100644 --- a/src/locale/lang/ta.js +++ b/src/locale/lang/ta.js @@ -106,6 +106,9 @@ export default { }, image: { error: 'FAILED' // to be translated + }, + pageHeader: { + title: 'Back' // to be translated } } }; diff --git a/src/locale/lang/th.js b/src/locale/lang/th.js index 0475f51e2..c83cfcfbd 100644 --- a/src/locale/lang/th.js +++ b/src/locale/lang/th.js @@ -107,6 +107,9 @@ export default { }, image: { error: 'FAILED' // to be translated + }, + pageHeader: { + title: 'Back' // to be translated } } }; diff --git a/src/locale/lang/tk.js b/src/locale/lang/tk.js index 6b8bb6282..b1b602665 100644 --- a/src/locale/lang/tk.js +++ b/src/locale/lang/tk.js @@ -107,6 +107,9 @@ export default { }, image: { error: 'FAILED' // to be translated + }, + pageHeader: { + title: 'Back' // to be translated } } }; diff --git a/src/locale/lang/tr-TR.js b/src/locale/lang/tr-TR.js index 6e3cb629e..ebbfca8a9 100644 --- a/src/locale/lang/tr-TR.js +++ b/src/locale/lang/tr-TR.js @@ -107,6 +107,9 @@ export default { }, image: { error: 'FAILED' // to be translated + }, + pageHeader: { + title: 'Back' // to be translated } } }; diff --git a/src/locale/lang/ua.js b/src/locale/lang/ua.js index 56022259c..39d10c2dc 100644 --- a/src/locale/lang/ua.js +++ b/src/locale/lang/ua.js @@ -107,6 +107,9 @@ export default { }, image: { error: 'FAILED' // to be translated + }, + pageHeader: { + title: 'Back' // to be translated } } }; diff --git a/src/locale/lang/ug-CN.js b/src/locale/lang/ug-CN.js index 0c94b08fd..4381b9c8f 100644 --- a/src/locale/lang/ug-CN.js +++ b/src/locale/lang/ug-CN.js @@ -107,6 +107,9 @@ export default { }, image: { error: 'FAILED' // to be translated + }, + pageHeader: { + title: 'Back' // to be translated } } }; diff --git a/src/locale/lang/vi.js b/src/locale/lang/vi.js index 24fd444f4..14d85e21b 100644 --- a/src/locale/lang/vi.js +++ b/src/locale/lang/vi.js @@ -107,6 +107,9 @@ export default { }, image: { error: 'FAILED' // to be translated + }, + pageHeader: { + title: 'Back' // to be translated } } }; diff --git a/src/locale/lang/zh-CN.js b/src/locale/lang/zh-CN.js index fa4b74799..0466da446 100644 --- a/src/locale/lang/zh-CN.js +++ b/src/locale/lang/zh-CN.js @@ -107,6 +107,9 @@ export default { }, image: { error: '加载失败' + }, + pageHeader: { + title: '返回' } } }; diff --git a/src/locale/lang/zh-TW.js b/src/locale/lang/zh-TW.js index 9b87d2649..1e978b1a4 100644 --- a/src/locale/lang/zh-TW.js +++ b/src/locale/lang/zh-TW.js @@ -107,6 +107,9 @@ export default { }, image: { error: '加載失敗' + }, + pageHeader: { + title: '返回' } } }; diff --git a/test/unit/specs/page-header.spec.js b/test/unit/specs/page-header.spec.js new file mode 100644 index 000000000..b0c31cd7d --- /dev/null +++ b/test/unit/specs/page-header.spec.js @@ -0,0 +1,24 @@ +import { createVue, destroyVM, waitImmediate } from '../util'; +import PageHeader from 'packages/page-header'; + +describe('PageHeader', () => { + let vm; + afterEach(() => { + destroyVM(vm); + }); + + it('render well and trigger back event', async() => { + vm = createVue(PageHeader, { + content: 'content' + }); + expect(vm.$el).to.exist; + const spy = sinon.spy(); + vm.$on('back', spy); + vm.$el.querySelector('.el-page-header__left').click(); + + await waitImmediate(); + + expect(spy.calledOnce).to.be.true; + }); +}); + diff --git a/types/element-ui.d.ts b/types/element-ui.d.ts index 89779a2e6..6eced80ca 100644 --- a/types/element-ui.d.ts +++ b/types/element-ui.d.ts @@ -76,6 +76,7 @@ import { ElCalendar } from './calendar' import { ElImage } from './image' import { ElBacktop } from './backtop' import { ElInfiniteScroll } from './infiniteScroll' +import { ElPageHeader } from './page-header' export interface InstallationOptions { locale: any, @@ -329,3 +330,5 @@ export class Backtop extends ElBacktop {} /** InfiniteScroll Component */ export class InfiniteScroll extends ElInfiniteScroll {} +/** PageHeader Component */ +export class PageHeader extends ElPageHeader {} diff --git a/types/page-header.d.ts b/types/page-header.d.ts new file mode 100644 index 000000000..2831983a8 --- /dev/null +++ b/types/page-header.d.ts @@ -0,0 +1,10 @@ +import { ElementUIComponent } from './component' + +/** PageHeader Component */ +export declare class ElPageHeader extends ElementUIComponent { + /** title */ + title: String + + /** content */ + content: String +}