Feat/page header #1250
Feat/page header #1250
Conversation
|
Deploy preview for ant-desing-vue processing. Building with commit 55705da https://app.netlify.com/sites/ant-desing-vue/deploys/5da588cbfca013000821296e |
Codecov Report
@@ Coverage Diff @@
## feat-1.5.0 #1250 +/- ##
==============================================
+ Coverage 87.82% 88.19% +0.36%
==============================================
Files 162 163 +1
Lines 5538 5583 +45
Branches 1553 1564 +11
==============================================
+ Hits 4864 4924 +60
+ Misses 599 582 -17
- Partials 75 77 +2
Continue to review full report at Codecov.
|
|
title,subtitle这些最好用getComponentFromProp，可以获取prop和slot的值 |
|
是基于 antd 哪个分支去做的 统一基于antd 3.23.6的tag分支同步吧 |
基于antd的master分支做的，国庆那几天写的，大概是3号4号的样子开始写的，开发的时候本地antd master分支拉到最新了。antd 3.23.6的tag分支比我本地要新几个commit，但这并不影响。我看了下antd的page-header组件最新一个commit是15 days ago，而组件依赖的transButton是2 months ago，style目录是21 days ago，locale-provider是last month，所有用到的文件都是最新的。 |
|
有3个demo没写，分别是actions.md、content.md、responsive.md，因为demo中用到的Descriptions和Typography组件还没有，我看到 @zkwolf 已经提了Descriptions组件的pr了，等他的pr merge后我会补上actions.md和responsive.md，等Typography完成后我再补上content.md |
| | subTitle | 自定义的二级标题文字 | string\|slot | - | | ||
| | avatar | 标题栏旁的头像 | [avatar props](/components/avatar/) | - | | ||
| | backIcon | 自定义 back icon ，如果为 false 不渲染 back icon | string\|slot | `<Icon type="arrow-left" />` | | ||
| | tags | title 旁的 tag 列表 | [Tag](https://ant.design/components/tag-cn/)[] \| [Tag](https://ant.design/components/tag-cn/) | - | |
| | backIcon | 自定义 back icon ，如果为 false 不渲染 back icon | string\|slot | `<Icon type="arrow-left" />` | | ||
| | tags | title 旁的 tag 列表 | [Tag](https://ant.design/components/tag-cn/)[] \| [Tag](https://ant.design/components/tag-cn/) | - | | ||
| | extra | 操作区，位于 title 行的行尾 | string\|slot | - | | ||
| | breadcrumb | 面包屑的配置 | [breadcrumb](https://ant.design/components/breadcrumb-cn/) | - | |
types/page-header.d.ts
Outdated
| * Custom class | ||
| * @type string | ||
| */ | ||
| className: string; |
components/page-header/demo/basic.md
Outdated
| Standard header, suitable for use in scenarios that require a brief description. | ||
| </us> | ||
|
|
||
| ```html |
There was a problem hiding this comment.
1.5.0 rebase 到了master ，demo中的 html 改成 tpl，以后使用tpl来标识是否当作demo渲染
components/_util/transButton.jsx
Outdated
| }; | ||
|
|
||
| const TransButton = { | ||
| props: ['noStyle', 'className'], |
components/_util/transButton.jsx
Outdated
|
|
||
| data() { | ||
| return { | ||
| div: null, |
There was a problem hiding this comment.
不需要放在 data 中，可以直接 this.div = null .... 这样变量不会做响应式处理
components/_util/transButton.jsx
Outdated
| onKeyUp(event) { | ||
| const { keyCode } = event; | ||
| const { click } = this.$listeners; | ||
| if (keyCode === KeyCode.ENTER && click) { |
There was a problem hiding this comment.
if (keyCode === KeyCode.ENTER) {
this.$emit('click')
}
vue中不需要判断click是否存在，使用emit的形式触发事件，不然浏览器调试工具捕获不到
| }, | ||
| ], | ||
| props: restProps, | ||
| on: { |
There was a problem hiding this comment.
on: {
...this.$listeners,
keydown: this.onKeyDown,
keyup: this.onKeyUp,
},
components/_util/transButton.jsx
Outdated
| value: this.setRef, | ||
| }, | ||
| ], | ||
| props: restProps, |
There was a problem hiding this comment.
props: restProps, 这里实际上不再需要
components/_util/transButton.jsx
Outdated
|
|
||
| return ( | ||
| <div | ||
| class={className} |
components/page-header/index.jsx
Outdated
| onBack(e); | ||
| } | ||
| }} | ||
| className={`${prefixCls}-back-button`} |
components/page-header/index.jsx
Outdated
| <div class={`${prefixCls}-back`}> | ||
| <TransButton | ||
| onClick={e => { | ||
| if (onBack) { |
components/page-header/index.jsx
Outdated
| }; | ||
|
|
||
| const renderBreadcrumb = (h, breadcrumb) => { | ||
| return <Breadcrumb {...{ props: breadcrumb }} />; |
There was a problem hiding this comment.
传入的配置应该是 {attrs, props, on, class} 这种形式，才能满足需求
components/page-header/index.jsx
Outdated
| return ( | ||
| <div class={headingPrefixCls}> | ||
| {backIconDom} | ||
| {avatar && <Avatar {...{ props: avatar }} />} |
There was a problem hiding this comment.
同样 avatar 传入的配置应该是 {attrs, props, on, class} 这种形式，才能满足需求
There was a problem hiding this comment.
我看了下Breadcrumb和Avatar的源码，只要是文档中有的参数都是可以通过{ props: avatar }这种方式传入的。但如果想给组件绑定一个click事件，这种方式就不支持了，必须通过{attrs, props, on, class}这种方式，但这也就意味这用户在page-header组件中传参也得这样<PageHeader avatar={attrs, props, on, class} />。这样传参我觉得有点繁琐，而且文档也不好写。如果想实现全功能的Breadcrumb和Avatar，用slot更加直接。所以这里我可以做个判断，如果有slot，我就直接用slot，如果是配置对象，就渲染这个<Avatar {...{ props: avatar }} />。 @tangjinzhou 您看这样行么
drafish
force-pushed
the
feat/page-header
branch
from
46b2389 to
b54a396
Compare
|
先rebase到feat-1.5.0，前面提到的那些问题我稍后会补一个commit的 |
|
我等 @zkwolf 的pr merge后我再rebase一下好了，顺便把actions.md和responsive.md这两个demo补上 |
drafish
force-pushed
the
feat/page-header
branch
from
30f646e to
fcb9ac8
Compare
drafish
force-pushed
the
feat/page-header
branch
from
fcb9ac8 to
2d63eb5
Compare
* feat: add Result component * fix: update md template tag html>tpl - fix `result` typo - update jest `result` snapshots * refactor: svg file to functional component icon - update jest snapshot * feat: add result * Feat descriptions (#1251) * feat: add descriptions * fix: add descriptions types and fix docs * fix: lint change code * fix: demo warning * fix: update demo, snapshot and remove classnames * test: add descriptions test * fix: descriptions demo (#1498) * feat: add page header (#1250) * feat: add page-header component * update site: page-header * ts definition update: page-header * get page-header props with getComponentFromProp func * optimize page-header * doc: add page-header actions.md responsive.md * breadcrumb itemRender add pure function support * style: format code * feat: update style to 3.23.6 from 2.13.6 * feat: update style to 3.26.8 from 3.23.6 * chore: update util * chore: update util * feat: update affix * feat: update alert * feat: update anchor * feat: update auto-complete * feat: update avatar * feat: update back-top * feat: update badge * feat: update button * feat: update breadcrumb * feat: update ts * docs: update doc * feat: update calendat * feat: update card * feat: update carousel * feat: update carousel * feat: update checkbox * feat: update comment * feat: update config-provider * docs: update doc * feat: update collapse * feat: update locale * feat: update date-picker * feat: update divider * feat: update drawer * feat: update dropdown * feat: update rc-trigger * feat: update dropdown * feat: update empty * test: add empty test * feat: update form * feat: update form * feat: update spin * feat: update grid * docs: update grid doc * feat: update icon * feat: update slider * feat: update textarea * feat: update input-number * feat: update layout * feat: update list * feat: update menu * feat: meaage add key for update content * feat: modal add closeIcon support * feat: update notification * feat: add pagination disabled support * feat: popconfirm add disabled support * test: update popover * feat: progress support custom line-gradiend * feat: update radio * test: update radio test * docs: update rate demo * feat: skeleton add avatar support number type * test: add switch test * test: update statistic test * fix: input clear icon event * feat: steps add type、 v-model、subTitle * feat: delete typography component * feat: delete Typography style * perf: update select * feat: add download transformFile previewFile actio * docs: update upload * feat: update tree-select * docs: update tree-select * feat: tree add blockNode selectable * docs: add tree demo * test: update snap * docs: updatedoc * feat: update tag * docs: update ad doc * feat: update tooltip * feat: update timeline * feat: time-picker add clearIcon * docs: update tabs * feat: transfer support custom children * test: update transfer test * feat: update table * test: update table test * test: update test * feat: calendar update locale * test: update test snap * feat: add mentions (#1790) * feat: mentions style * feat: theme default * feat: add mentions component * feat: mentions API * feat: add unit test for mentions * feat: update mentions demo * perf: model and inheritAttrs for mentions * perf: use getComponentFromProp instead of this.$props * perf: mentions rm defaultProps * feat: rm rows in mentionsProps * fix: mentions keyDown didn't work * docs: update mentions api * perf: mentions code * feat: update mentions * bump 1.5.0-alpha.1 * feat: pageheader add ghost prop * docs: update descriptions demo * chore: page-header add ghost type * fix: color error * feat: update to 3.26.12 * fix: some prop default value * fix(typo): form, carousel, upload. duplicate identifier (#1848) * Add Mentions Type (#1845) * feat: add mentions type * feat: add mentions in ant-design-vue.d.ts * docs: update doc * docs: add changelog * fix: mentions getPopupCotainer value (#1850) * docs: update doc * docs: uptate demo * docs: update demo * docs: delete demo * docs: delete doc * test: update snapshots * style: format code * chore: update travis * docs: update demo Co-authored-by: Sendya <[email protected]> Co-authored-by: zkwolf <[email protected]> Co-authored-by: drafish <[email protected]> Co-authored-by: Amour1688 <[email protected]>
|
This pull request has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs. |
First of all, thank you for your contribution! 😄
New feature please send pull request to feature branch, and rest to master branch.
Pull request will be merged after one of collaborators approve.
Please makes sure that these form are filled before submitting your pull request, thank you!
[中文版模板 / Chinese template]
This is a ...
What's the background?
API Realization (Optional if not new feature)
What's the effect? (Optional if not new feature)
Changelog description (Optional if not new feature)
Self Check before Merge
Additional Plan? (Optional if not new feature)