From 6e5e8a972ee5563b0c7d39e6992491c7da462988 Mon Sep 17 00:00:00 2001 From: tangjinzhou <415800467@qq.com> Date: Wed, 28 Nov 2018 10:35:37 +0800 Subject: [PATCH] feat: update anchor auto-complete avatar --- components/anchor/Anchor.jsx | 2 +- components/anchor/AnchorLink.jsx | 9 +++++- components/anchor/__tests__/Anchor.test.js | 27 ++++++++++++++++ .../__tests__/__snapshots__/demo.test.js.snap | 14 ++++++++ components/anchor/demo/index.vue | 3 ++ components/anchor/demo/onClick.md | 32 +++++++++++++++++++ components/anchor/index.en-US.md | 5 +++ components/anchor/index.zh-CN.md | 5 +++ .../__tests__/__snapshots__/demo.test.js.snap | 4 +-- components/auto-complete/demo/index.vue | 3 +- components/auto-complete/index.en-US.md | 3 ++ components/auto-complete/index.jsx | 7 ++-- components/auto-complete/index.zh-CN.md | 3 ++ components/avatar/Avatar.jsx | 10 +++--- components/avatar/__tests__/Avatar.test.js | 12 +++---- .../__tests__/__snapshots__/demo.test.js.snap | 8 ++--- components/avatar/demo/index.vue | 6 +++- components/select/index.jsx | 2 ++ 18 files changed, 128 insertions(+), 27 deletions(-) create mode 100644 components/anchor/demo/onClick.md diff --git a/components/anchor/Anchor.jsx b/components/anchor/Anchor.jsx index bc469b038..2667626e7 100644 --- a/components/anchor/Anchor.jsx +++ b/components/anchor/Anchor.jsx @@ -71,7 +71,6 @@ function scrollTo (href, offsetTop = 0, getContainer, callback = () => { }) { } } raf(frameFunc) - history.pushState(null, '', href) } export const AnchorProps = { @@ -117,6 +116,7 @@ export default { $data: this.$data, scrollTo: this.handleScrollTo, }, + antAnchorContext: this, } }, diff --git a/components/anchor/AnchorLink.jsx b/components/anchor/AnchorLink.jsx index 92ab3cbb9..eebad878e 100644 --- a/components/anchor/AnchorLink.jsx +++ b/components/anchor/AnchorLink.jsx @@ -16,6 +16,7 @@ export default { }), inject: { antAnchor: { default: {}}, + antAnchorContext: { default: {}}, }, mounted () { @@ -32,8 +33,14 @@ export default { }, }, methods: { - handleClick () { + handleClick (e) { this.antAnchor.scrollTo(this.href) + const { scrollTo } = this.antAnchor + const { href, title } = this.$props + if (this.antAnchorContext.$emit) { + this.antAnchorContext.$emit('click', e, { title, href }) + } + scrollTo(href) }, }, render () { diff --git a/components/anchor/__tests__/Anchor.test.js b/components/anchor/__tests__/Anchor.test.js index faf97f3c8..bc3aa0bde 100644 --- a/components/anchor/__tests__/Anchor.test.js +++ b/components/anchor/__tests__/Anchor.test.js @@ -151,4 +151,31 @@ describe('Anchor Render', () => { expect(wrapper.vm.$refs.anchor.links).toEqual(['#API_1']) }) }) + + it('Anchor onClick event', () => { + let event + let link + const handleClick = (...arg) => ([event, link] = arg) + + const href = '#API' + const title = 'API' + + const wrapper = mount( + { + render () { + return ( + + + + ) + }, + } + ) + + wrapper.find(`a[href="${href}"]`).trigger('click') + + wrapper.vm.$refs.anchorRef.handleScroll() + expect(event).not.toBe(undefined) + expect(link).toEqual({ href, title }) + }) }) diff --git a/components/anchor/__tests__/__snapshots__/demo.test.js.snap b/components/anchor/__tests__/__snapshots__/demo.test.js.snap index 953443964..39f784438 100644 --- a/components/anchor/__tests__/__snapshots__/demo.test.js.snap +++ b/components/anchor/__tests__/__snapshots__/demo.test.js.snap @@ -18,6 +18,20 @@ exports[`renders ./components/anchor/demo/basic.md correctly 1`] = ` `; +exports[`renders ./components/anchor/demo/onClick.md correctly 1`] = ` +
+
+
+
Basic demo
+
Fixed demo
+
API +
Anchor Props
+
Link Props
+
+
+
+`; + exports[`renders ./components/anchor/demo/static.md correctly 1`] = `
diff --git a/components/anchor/demo/index.vue b/components/anchor/demo/index.vue index 8dfe8c482..941f1f6c6 100644 --- a/components/anchor/demo/index.vue +++ b/components/anchor/demo/index.vue @@ -1,6 +1,7 @@ +``` diff --git a/components/anchor/index.en-US.md b/components/anchor/index.en-US.md index 9537f3589..017b9d55f 100644 --- a/components/anchor/index.en-US.md +++ b/components/anchor/index.en-US.md @@ -12,6 +12,11 @@ | offsetTop | Pixels to offset from top when calculating position of scroll | number | 0 | | showInkInFixed | Whether show ink-balls in Fixed mode | boolean | false | +### Events +| Events Name | Description | Arguments | +| --- | --- | --- | +| click | set the handler to handle `click` event | Function(e: Event, link: Object) | + ### Link Props | Property | Description | Type | Default | diff --git a/components/anchor/index.zh-CN.md b/components/anchor/index.zh-CN.md index ac3a084f2..094cd5585 100644 --- a/components/anchor/index.zh-CN.md +++ b/components/anchor/index.zh-CN.md @@ -12,6 +12,11 @@ | offsetTop | 距离窗口顶部达到指定偏移量后触发 | number | | | showInkInFixed | 固定模式是否显示小圆点 | boolean | false | +### 事件 +| 事件名称 | 说明 | 回调参数 | +| --- | --- | --- | +| click | `click` 事件的 handler | Function(e: Event, link: Object) | + ### Link Props | 成员 | 说明 | 类型 | 默认值 | diff --git a/components/auto-complete/__tests__/__snapshots__/demo.test.js.snap b/components/auto-complete/__tests__/__snapshots__/demo.test.js.snap index b64970890..0111bcf97 100644 --- a/components/auto-complete/__tests__/__snapshots__/demo.test.js.snap +++ b/components/auto-complete/__tests__/__snapshots__/demo.test.js.snap @@ -23,7 +23,7 @@ exports[`renders ./components/auto-complete/demo/certain-category.md correctly 1
input here
@@ -84,7 +84,7 @@ exports[`renders ./components/auto-complete/demo/uncertain-category.md correctly
input here
diff --git a/components/auto-complete/demo/index.vue b/components/auto-complete/demo/index.vue index 8cf58f7e2..ab77ca2b2 100644 --- a/components/auto-complete/demo/index.vue +++ b/components/auto-complete/demo/index.vue @@ -18,13 +18,14 @@ const md = { Autocomplete function of input field. ## When To Use When there is a need for autocomplete functionality. -## Examples +## Examples `, } export default { category: 'Components', subtitle: '自动完成', type: 'Data Entry', + zhType: '数据录入', cols: 2, title: 'AutoComplete', render () { diff --git a/components/auto-complete/index.en-US.md b/components/auto-complete/index.en-US.md index 87e8f74ef..532a1c43a 100644 --- a/components/auto-complete/index.en-US.md +++ b/components/auto-complete/index.en-US.md @@ -18,6 +18,8 @@ | optionLabelProp | Which prop value of option will render as content of select. | string | `children` | | placeholder | placeholder of input | string | - | | value(v-model) | selected option | string\|string\[]\|{ key: string, label: string\|vNodes }\|Array<{ key: string, label: string\|vNodes }> | - | +| defaultOpen | Initial open state of dropdown | boolean | - | +| open | Controlled open state of dropdown | boolean | - | ### events | Events Name | Description | Arguments | @@ -27,6 +29,7 @@ | focus | Called when entering the component | function() | | search | Called when searching items. | function(value) | - | | select | Called when a option is selected. param is option's value and option instance. | function(value, option) | +| dropdown-visible-change | Call when dropdown open | function(open) | ## Methods diff --git a/components/auto-complete/index.jsx b/components/auto-complete/index.jsx index ad1e24224..1295829f2 100644 --- a/components/auto-complete/index.jsx +++ b/components/auto-complete/index.jsx @@ -75,6 +75,9 @@ const AutoComplete = { this.$refs.select.blur() } }, + onDropdownVisibleChange () { + this.$emit('dropdown-visible-change', ...arguments) + }, }, render () { @@ -122,9 +125,7 @@ const AutoComplete = { }, class: cls, ref: 'select', - on: { - ...$listeners, - }, + on: { ...$listeners, 'dropdownVisibleChange': this.onDropdownVisibleChange }, } return (