github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat: update anchor auto-complete avatar

pull/309/head
tangjinzhou 2018-11-28 10:35:37 +08:00
parent 9fed6f99c2
commit 6e5e8a972e
18 changed files with 128 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/anchor/Anchor.jsx
View File

@ -71,7 +71,6 @@ function scrollTo (href, offsetTop = 0, getContainer, callback = () => { }) {
} }
} }
raf(frameFunc) raf(frameFunc)
history.pushState(null, '', href)
} }
export const AnchorProps = { export const AnchorProps = {
@ -117,6 +116,7 @@ export default {
$data: this.$data, $data: this.$data,
scrollTo: this.handleScrollTo, scrollTo: this.handleScrollTo,
}, },
antAnchorContext: this,
} }
}, },

9
components/anchor/AnchorLink.jsx
View File

@ -16,6 +16,7 @@ export default {
}), }),
inject: { inject: {
antAnchor: { default: {}}, antAnchor: { default: {}},
antAnchorContext: { default: {}},
}, },
mounted () { mounted () {
@ -32,8 +33,14 @@ export default {
}, },
}, },
methods: { methods: {
handleClick () { handleClick (e) {
this.antAnchor.scrollTo(this.href) 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 () { render () {

27
components/anchor/__tests__/Anchor.test.js
View File

@ -151,4 +151,31 @@ describe('Anchor Render', () => {
expect(wrapper.vm.$refs.anchor.links).toEqual(['#API_1']) 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 (
<Anchor ref='anchorRef' onClick={handleClick}>
<Link href={href} title={title} />
</Anchor>
)
},
}
)
wrapper.find(`a[href="${href}"]`).trigger('click')
wrapper.vm.$refs.anchorRef.handleScroll()
expect(event).not.toBe(undefined)
expect(link).toEqual({ href, title })
})
}) })

14
components/anchor/__tests__/__snapshots__/demo.test.js.snap
View File

@ -18,6 +18,20 @@ exports[`renders ./components/anchor/demo/basic.md correctly 1`] = `
</div> </div>
`; `;
exports[`renders ./components/anchor/demo/onClick.md correctly 1`] = `
<div class="ant-anchor-wrapper" style="max-height: 100vh;">
<div class="ant-anchor fixed">
<div class="ant-anchor-ink"><span class="ant-anchor-ink-ball"></span></div>
<div class="ant-anchor-link"><a href="#components-anchor-demo-basic" title="Basic demo" class="ant-anchor-link-title">Basic demo</a></div>
<div class="ant-anchor-link"><a href="#components-anchor-demo-static-anchor" title="Fixed demo" class="ant-anchor-link-title">Fixed demo</a></div>
<div class="ant-anchor-link"><a href="#API" title="API" class="ant-anchor-link-title">API</a>
<div class="ant-anchor-link"><a href="#Anchor-Props" title="Anchor Props" class="ant-anchor-link-title">Anchor Props</a></div>
<div class="ant-anchor-link"><a href="#Link-Props" title="Link Props" class="ant-anchor-link-title">Link Props</a></div>
</div>
</div>
</div>
`;
exports[`renders ./components/anchor/demo/static.md correctly 1`] = ` exports[`renders ./components/anchor/demo/static.md correctly 1`] = `
<div class="ant-anchor-wrapper" style="max-height: 100vh;"> <div class="ant-anchor-wrapper" style="max-height: 100vh;">
<div class="ant-anchor fixed"> <div class="ant-anchor fixed">

3
components/anchor/demo/index.vue
View File

@ -1,6 +1,7 @@
<script> <script>
import Basic from './basic' import Basic from './basic'
import Static from './static' import Static from './static'
import OnClick from './onClick'
import CN from '../index.zh-CN.md' import CN from '../index.zh-CN.md'
import US from '../index.en-US.md' import US from '../index.en-US.md'
@ -27,6 +28,7 @@ export default {
subtitle: '锚点', subtitle: '锚点',
cols: 2, cols: 2,
type: 'Other', type: 'Other',
zhType: '其它',
title: 'Anchor', title: 'Anchor',
render () { render () {
return ( return (
@ -34,6 +36,7 @@ export default {
<md cn={md.cn} us={md.us}/> <md cn={md.cn} us={md.us}/>
<Basic/> <Basic/>
<Static/> <Static/>
<OnClick />
<api> <api>
<CN slot='cn' /> <CN slot='cn' />
<US/> <US/>

32
components/anchor/demo/onClick.md Normal file
View File

@ -0,0 +1,32 @@
<cn>
#### 自定义 click 事件
点击锚点不记录历史。
</cn>
<us>
#### Customize the click event
Clicking on an anchor does not record history.
</us>
```html
<template>
<a-anchor :affix="false" @click="handleClick">
<a-anchor-link href="#components-anchor-demo-basic" title="Basic demo" />
<a-anchor-link href="#components-anchor-demo-static-anchor" title="Fixed demo" />
<a-anchor-link href="#API" title="API">
<a-anchor-link href="#Anchor-Props" title="Anchor Props" />
<a-anchor-link href="#Link-Props" title="Link Props" />
</a-anchor-link>
</a-anchor>
</template>
<script>
export default {
methods: {
handleClick (e, link) {
e.preventDefault();
console.log(link);
}
}
}
</script>
```

5
components/anchor/index.en-US.md
View File

@ -12,6 +12,11 @@
| offsetTop | Pixels to offset from top when calculating position of scroll | number | 0 | | offsetTop | Pixels to offset from top when calculating position of scroll | number | 0 |
| showInkInFixed | Whether show ink-balls in Fixed mode | boolean | false | | 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 ### Link Props
| Property | Description | Type | Default | | Property | Description | Type | Default |

5
components/anchor/index.zh-CN.md
View File

@ -12,6 +12,11 @@
| offsetTop | 距离窗口顶部达到指定偏移量后触发 | number | | | offsetTop | 距离窗口顶部达到指定偏移量后触发 | number | |
| showInkInFixed | 固定模式是否显示小圆点 | boolean | false | | showInkInFixed | 固定模式是否显示小圆点 | boolean | false |
### 事件
| 事件名称 | 说明 | 回调参数 |
| --- | --- | --- |
| click | `click` 事件的 handler | Function(e: Event, link: Object) |
### Link Props ### Link Props
| 成员 | 说明 | 类型 | 默认值 | | 成员 | 说明 | 类型 | 默认值 |

4
components/auto-complete/__tests__/__snapshots__/demo.test.js.snap
View File

@ -23,7 +23,7 @@ exports[`renders ./components/auto-complete/demo/certain-category.md correctly 1
<div unselectable="on" class="ant-select-selection__placeholder" style="display: block;">input here</div> <div unselectable="on" class="ant-select-selection__placeholder" style="display: block;">input here</div>
<ul> <ul>
<li class="ant-select-search ant-select-search--inline"> <li class="ant-select-search ant-select-search--inline">
<div class="ant-select-search__field__wrap"><span class="ant-input-affix-wrapper ant-select-search__field" value=""><input value="" type="text" class="ant-input"><span class="ant-input-suffix"><i class="certain-category-icon anticon anticon-search"></i></span></span><span class="ant-select-search__field__mirror">&nbsp;</span></div> <div class="ant-select-search__field__wrap"><span class="ant-input-affix-wrapper ant-select-search__field" value=""><input value="" type="text" class="ant-input"><span class="ant-input-suffix"><i class="anticon anticon-search"><svg viewBox="64 64 896 896" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0 0 11.6 0l43.6-43.5a8.2 8.2 0 0 0 0-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg></i></span></span><span class="ant-select-search__field__mirror">&nbsp;</span></div>
</li> </li>
</ul> </ul>
</div><span unselectable="unselectable" class="ant-select-arrow"><i class="ant-select-arrow-icon"></i></span> </div><span unselectable="unselectable" class="ant-select-arrow"><i class="ant-select-arrow-icon"></i></span>
@ -84,7 +84,7 @@ exports[`renders ./components/auto-complete/demo/uncertain-category.md correctly
<div unselectable="on" class="ant-select-selection__placeholder" style="display: block;">input here</div> <div unselectable="on" class="ant-select-selection__placeholder" style="display: block;">input here</div>
<ul> <ul>
<li class="ant-select-search ant-select-search--inline"> <li class="ant-select-search ant-select-search--inline">
<div class="ant-select-search__field__wrap"><span class="ant-input-affix-wrapper ant-select-search__field" value=""><input value="" type="text" class="ant-input"><span class="ant-input-suffix"><button type="button" class="search-btn ant-btn ant-btn-primary ant-btn-lg"><i class="anticon anticon-search"></i></button></span></span><span class="ant-select-search__field__mirror">&nbsp;</span></div> <div class="ant-select-search__field__wrap"><span class="ant-input-affix-wrapper ant-select-search__field" value=""><input value="" type="text" class="ant-input"><span class="ant-input-suffix"><button type="button" class="search-btn ant-btn ant-btn-primary ant-btn-lg"><i class="anticon anticon-search"><svg viewBox="64 64 896 896" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0 0 11.6 0l43.6-43.5a8.2 8.2 0 0 0 0-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg></i></button></span></span><span class="ant-select-search__field__mirror">&nbsp;</span></div>
</li> </li>
</ul> </ul>
</div><span unselectable="unselectable" class="ant-select-arrow"><i class="ant-select-arrow-icon"></i></span> </div><span unselectable="unselectable" class="ant-select-arrow"><i class="ant-select-arrow-icon"></i></span>

1
components/auto-complete/demo/index.vue
View File

@ -25,6 +25,7 @@ export default {
category: 'Components', category: 'Components',
subtitle: '自动完成', subtitle: '自动完成',
type: 'Data Entry', type: 'Data Entry',
zhType: '数据录入',
cols: 2, cols: 2,
title: 'AutoComplete', title: 'AutoComplete',
render () { render () {

3
components/auto-complete/index.en-US.md
View File

@ -18,6 +18,8 @@
| optionLabelProp | Which prop value of option will render as content of select. | string | `children` | | optionLabelProp | Which prop value of option will render as content of select. | string | `children` |
| placeholder | placeholder of input | string | - | | placeholder | placeholder of input | string | - |
| value(v-model) | selected option | string\|string\[]\|{ key: string, label: string\|vNodes }\|Array&lt;{ key: string, label: string\|vNodes }> | - | | value(v-model) | selected option | string\|string\[]\|{ key: string, label: string\|vNodes }\|Array&lt;{ key: string, label: string\|vNodes }> | - |
| defaultOpen | Initial open state of dropdown | boolean | - |
| open | Controlled open state of dropdown | boolean | - |
### events ### events
| Events Name | Description | Arguments | | Events Name | Description | Arguments |
@ -27,6 +29,7 @@
| focus | Called when entering the component | function() | | focus | Called when entering the component | function() |
| search | Called when searching items. | function(value) | - | | 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) | | 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 ## Methods

7
components/auto-complete/index.jsx
View File

@ -75,6 +75,9 @@ const AutoComplete = {
this.$refs.select.blur() this.$refs.select.blur()
} }
}, },
onDropdownVisibleChange () {
this.$emit('dropdown-visible-change', ...arguments)
},
}, },
render () { render () {
@ -122,9 +125,7 @@ const AutoComplete = {
}, },
class: cls, class: cls,
ref: 'select', ref: 'select',
on: { on: { ...$listeners, 'dropdownVisibleChange': this.onDropdownVisibleChange },
...$listeners,
},
} }
return ( return (
<Select <Select

3
components/auto-complete/index.zh-CN.md
View File

@ -18,6 +18,8 @@
| optionLabelProp | 回填到选择框的 Option 的属性值，默认是 Option 的子元素。比如在子元素需要高亮效果时，此值可以设为 `value`。 | string | `children` | | optionLabelProp | 回填到选择框的 Option 的属性值，默认是 Option 的子元素。比如在子元素需要高亮效果时，此值可以设为 `value`。 | string | `children` |
| placeholder | 输入框提示 | string \| slot | - | | placeholder | 输入框提示 | string \| slot | - |
| value(v-model) | 指定当前选中的条目 | string\|string\[]\|{ key: string, label: string\|vNodes }\|Array&lt;{ key: string, label: string\|vNodes }> | 无 | | value(v-model) | 指定当前选中的条目 | string\|string\[]\|{ key: string, label: string\|vNodes }\|Array&lt;{ key: string, label: string\|vNodes }> | 无 |
| defaultOpen | 是否默认展开下拉菜单 | boolean | - |
| open | 是否展开下拉菜单 | boolean | - |
### 事件 ### 事件
| 事件名称 | 说明 | 回调参数 | | 事件名称 | 说明 | 回调参数 |
@ -27,6 +29,7 @@
| focus | 获得焦点时的回调 | function() | | focus | 获得焦点时的回调 | function() |
| search | 搜索补全项的时候调用 | function(value) | | search | 搜索补全项的时候调用 | function(value) |
| select | 被选中时调用，参数为选中项的 value 值 | function(value, option) | | select | 被选中时调用，参数为选中项的 value 值 | function(value, option) |
| dropdown-visible-change | 展开下拉菜单的回调 | function(open) |
## 方法 ## 方法

10
components/avatar/Avatar.jsx
View File

@ -110,13 +110,11 @@ export default {
} else { } else {
const childrenNode = this.$refs.avatarChildren const childrenNode = this.$refs.avatarChildren
if (childrenNode || (scale !== 1 && childrenNode)) { if (childrenNode || (scale !== 1 && childrenNode)) {
const transformString = `scale(${scale}) translateX(-50%)`
const childrenStyle = { const childrenStyle = {
msTransform: `scale(${scale})`, msTransform: transformString,
WebkitTransform: `scale(${scale})`, WebkitTransform: transformString,
transform: `scale(${scale})`, transform: transformString,
position: 'absolute',
display: 'inline-block',
left: `calc(50% - ${Math.round(childrenNode.offsetWidth / 2)}px)`,
} }
const sizeChildrenStyle = typeof size === 'number' ? { const sizeChildrenStyle = typeof size === 'number' ? {
lineHeight: `${size}px`, lineHeight: `${size}px`,

12
components/avatar/__tests__/Avatar.test.js
View File

@ -23,7 +23,7 @@ describe('Avatar Render', () => {
}, },
sync: false, attachToDocument: true, sync: false, attachToDocument: true,
}) })
wrapper.vm.setScale = jest.fn(() => { wrapper.setData({ scale: 0.5 }) }) wrapper.vm.setScale = jest.fn(() => { wrapper.setData({ scale: 0.5 }); wrapper.vm.$forceUpdate() })
await asyncExpect(() => { await asyncExpect(() => {
wrapper.find('img').trigger('error') wrapper.find('img').trigger('error')
}, 0) }, 0)
@ -33,14 +33,10 @@ describe('Avatar Render', () => {
expect(children.at(0).text()).toBe('Fallback') expect(children.at(0).text()).toBe('Fallback')
expect(wrapper.vm.setScale).toBeCalled() expect(wrapper.vm.setScale).toBeCalled()
}) })
// await asyncExpect(() => {
// console.log(wrapper.vm.scale, document.body.querySelector('.ant-avatar-string'))
// expect(global.document.body.querySelector('.ant-avatar-string').style.transform).toBe('scale(0.5)')
// global.document.body.innerHTML = ''
// }, 1000)
await asyncExpect(() => { await asyncExpect(() => {
expect(global.document.body.querySelector('.ant-avatar-string').style.transform).toContain('scale(0.5)')
}) global.document.body.innerHTML = ''
}, 0)
}) })
it('should handle onError correctly', () => { it('should handle onError correctly', () => {
global.document.body.innerHTML = '' global.document.body.innerHTML = ''

8
components/avatar/__tests__/__snapshots__/demo.test.js.snap
View File

@ -1,14 +1,14 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders ./components/avatar/demo/badge.md correctly 1`] = `<div><span style="margin-right: 24px;"><span class="ant-badge"><span class="ant-avatar ant-avatar-square ant-avatar-icon"><i class="anticon anticon-user"></i></span><sup title="1" class="ant-scroll-number ant-badge-count ant-badge-zoom-enter"><span class="ant-scroll-number-only" style="transform: translateY(-1100%);"><p class="">0</p><p class="">1</p><p class="">2</p><p class="">3</p><p class="">4</p><p class="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p><p class="">0</p><p class="current">1</p><p class="">2</p><p class="">3</p><p class="">4</p><p class="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p><p class="">0</p><p class="">1</p><p class="">2</p><p class="">3</p><p class="">4</p><p class="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p></span></sup></span></span> <span><span class="ant-badge"><span class="ant-avatar ant-avatar-square ant-avatar-icon"><i class="anticon anticon-user"></i></span><sup class="ant-scroll-number ant-badge-dot ant-badge-zoom-enter"></sup></span></span></div>`; exports[`renders ./components/avatar/demo/badge.md correctly 1`] = `<div><span style="margin-right: 24px;"><span class="ant-badge"><span class="ant-avatar ant-avatar-square ant-avatar-icon"><i class="anticon anticon-user"><svg viewBox="64 64 896 896" data-icon="user" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M858.5 763.6a374 374 0 0 0-80.6-119.5 375.63 375.63 0 0 0-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 0 0-80.6 119.5A371.7 371.7 0 0 0 136 901.8a8 8 0 0 0 8 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 0 0 8-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"></path></svg></i></span><sup title="1" class="ant-scroll-number ant-badge-count ant-badge-zoom-enter"><span class="ant-scroll-number-only" style="transform: translateY(-1100%);"><p class="">0</p><p class="">1</p><p class="">2</p><p class="">3</p><p class="">4</p><p class="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p><p class="">0</p><p class="current">1</p><p class="">2</p><p class="">3</p><p class="">4</p><p class="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p><p class="">0</p><p class="">1</p><p class="">2</p><p class="">3</p><p class="">4</p><p class="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p></span></sup></span></span> <span><span class="ant-badge"><span class="ant-avatar ant-avatar-square ant-avatar-icon"><i class="anticon anticon-user"><svg viewBox="64 64 896 896" data-icon="user" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M858.5 763.6a374 374 0 0 0-80.6-119.5 375.63 375.63 0 0 0-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 0 0-80.6 119.5A371.7 371.7 0 0 0 136 901.8a8 8 0 0 0 8 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 0 0 8-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"></path></svg></i></span><sup class="ant-scroll-number ant-badge-dot ant-badge-zoom-enter"></sup></span></span></div>`;
exports[`renders ./components/avatar/demo/basic.md correctly 1`] = ` exports[`renders ./components/avatar/demo/basic.md correctly 1`] = `
<div> <div>
<div><span class="ant-avatar ant-avatar-circle ant-avatar-icon" style="width: 64px; height: 64px; line-height: 64px; font-size: 32px;"><i class="anticon anticon-user"></i></span> <span class="ant-avatar ant-avatar-lg ant-avatar-circle ant-avatar-icon"><i class="anticon anticon-user"></i></span> <span class="ant-avatar ant-avatar-circle ant-avatar-icon"><i class="anticon anticon-user"></i></span> <span class="ant-avatar ant-avatar-sm ant-avatar-circle ant-avatar-icon"><i class="anticon anticon-user"></i></span></div> <br> <div><span class="ant-avatar ant-avatar-circle ant-avatar-icon" style="width: 64px; height: 64px; line-height: 64px; font-size: 32px;"><i class="anticon anticon-user"><svg viewBox="64 64 896 896" data-icon="user" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M858.5 763.6a374 374 0 0 0-80.6-119.5 375.63 375.63 0 0 0-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 0 0-80.6 119.5A371.7 371.7 0 0 0 136 901.8a8 8 0 0 0 8 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 0 0 8-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"></path></svg></i></span> <span class="ant-avatar ant-avatar-lg ant-avatar-circle ant-avatar-icon"><i class="anticon anticon-user"><svg viewBox="64 64 896 896" data-icon="user" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M858.5 763.6a374 374 0 0 0-80.6-119.5 375.63 375.63 0 0 0-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 0 0-80.6 119.5A371.7 371.7 0 0 0 136 901.8a8 8 0 0 0 8 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 0 0 8-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"></path></svg></i></span> <span class="ant-avatar ant-avatar-circle ant-avatar-icon"><i class="anticon anticon-user"><svg viewBox="64 64 896 896" data-icon="user" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M858.5 763.6a374 374 0 0 0-80.6-119.5 375.63 375.63 0 0 0-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 0 0-80.6 119.5A371.7 371.7 0 0 0 136 901.8a8 8 0 0 0 8 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 0 0 8-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"></path></svg></i></span> <span class="ant-avatar ant-avatar-sm ant-avatar-circle ant-avatar-icon"><i class="anticon anticon-user"><svg viewBox="64 64 896 896" data-icon="user" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M858.5 763.6a374 374 0 0 0-80.6-119.5 375.63 375.63 0 0 0-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 0 0-80.6 119.5A371.7 371.7 0 0 0 136 901.8a8 8 0 0 0 8 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 0 0 8-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"></path></svg></i></span></div> <br>
<div><span class="ant-avatar ant-avatar-square ant-avatar-icon" style="width: 64px; height: 64px; line-height: 64px; font-size: 32px;"><i class="anticon anticon-user"></i></span> <span class="ant-avatar ant-avatar-lg ant-avatar-square ant-avatar-icon"><i class="anticon anticon-user"></i></span> <span class="ant-avatar ant-avatar-square ant-avatar-icon"><i class="anticon anticon-user"></i></span> <span class="ant-avatar ant-avatar-sm ant-avatar-square ant-avatar-icon"><i class="anticon anticon-user"></i></span></div> <div><span class="ant-avatar ant-avatar-square ant-avatar-icon" style="width: 64px; height: 64px; line-height: 64px; font-size: 32px;"><i class="anticon anticon-user"><svg viewBox="64 64 896 896" data-icon="user" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M858.5 763.6a374 374 0 0 0-80.6-119.5 375.63 375.63 0 0 0-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 0 0-80.6 119.5A371.7 371.7 0 0 0 136 901.8a8 8 0 0 0 8 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 0 0 8-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"></path></svg></i></span> <span class="ant-avatar ant-avatar-lg ant-avatar-square ant-avatar-icon"><i class="anticon anticon-user"><svg viewBox="64 64 896 896" data-icon="user" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M858.5 763.6a374 374 0 0 0-80.6-119.5 375.63 375.63 0 0 0-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 0 0-80.6 119.5A371.7 371.7 0 0 0 136 901.8a8 8 0 0 0 8 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 0 0 8-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"></path></svg></i></span> <span class="ant-avatar ant-avatar-square ant-avatar-icon"><i class="anticon anticon-user"><svg viewBox="64 64 896 896" data-icon="user" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M858.5 763.6a374 374 0 0 0-80.6-119.5 375.63 375.63 0 0 0-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 0 0-80.6 119.5A371.7 371.7 0 0 0 136 901.8a8 8 0 0 0 8 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 0 0 8-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"></path></svg></i></span> <span class="ant-avatar ant-avatar-sm ant-avatar-square ant-avatar-icon"><i class="anticon anticon-user"><svg viewBox="64 64 896 896" data-icon="user" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M858.5 763.6a374 374 0 0 0-80.6-119.5 375.63 375.63 0 0 0-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 0 0-80.6 119.5A371.7 371.7 0 0 0 136 901.8a8 8 0 0 0 8 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 0 0 8-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"></path></svg></i></span></div>
</div> </div>
`; `;
exports[`renders ./components/avatar/demo/dynamic.md correctly 1`] = `<div><span class="ant-avatar ant-avatar-lg ant-avatar-square" style="background-color: rgb(245, 106, 0); vertical-align: middle;"><span class="ant-avatar-string">U</span></span> <button type="button" class="ant-btn ant-btn-default ant-btn-sm" style="vertical-align: middle;"><span>改 变</span></button></div>`; exports[`renders ./components/avatar/demo/dynamic.md correctly 1`] = `<div><span class="ant-avatar ant-avatar-lg ant-avatar-square" style="background-color: rgb(245, 106, 0); vertical-align: middle;"><span class="ant-avatar-string">U</span></span> <button type="button" class="ant-btn ant-btn-default ant-btn-sm" style="vertical-align: middle;"><span>改 变</span></button></div>`;
exports[`renders ./components/avatar/demo/type.md correctly 1`] = `<div><span class="ant-avatar ant-avatar-circle ant-avatar-icon"><i class="anticon anticon-user"></i></span> <span class="ant-avatar ant-avatar-circle"><span class="ant-avatar-string">U</span></span> <span class="ant-avatar ant-avatar-circle"><span class="ant-avatar-string">USER</span></span> <span class="ant-avatar ant-avatar-circle ant-avatar-image"><img src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"></span> <span class="ant-avatar ant-avatar-circle" style="color: rgb(245, 106, 0); background-color: rgb(253, 227, 207);"><span class="ant-avatar-string">U</span></span> <span class="ant-avatar ant-avatar-circle ant-avatar-icon" style="background-color: rgb(135, 208, 104);"><i class="anticon anticon-user"></i></span></div>`; exports[`renders ./components/avatar/demo/type.md correctly 1`] = `<div><span class="ant-avatar ant-avatar-circle ant-avatar-icon"><i class="anticon anticon-user"><svg viewBox="64 64 896 896" data-icon="user" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M858.5 763.6a374 374 0 0 0-80.6-119.5 375.63 375.63 0 0 0-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 0 0-80.6 119.5A371.7 371.7 0 0 0 136 901.8a8 8 0 0 0 8 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 0 0 8-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"></path></svg></i></span> <span class="ant-avatar ant-avatar-circle"><span class="ant-avatar-string">U</span></span> <span class="ant-avatar ant-avatar-circle"><span class="ant-avatar-string">USER</span></span> <span class="ant-avatar ant-avatar-circle ant-avatar-image"><img src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"></span> <span class="ant-avatar ant-avatar-circle" style="color: rgb(245, 106, 0); background-color: rgb(253, 227, 207);"><span class="ant-avatar-string">U</span></span> <span class="ant-avatar ant-avatar-circle ant-avatar-icon" style="background-color: rgb(135, 208, 104);"><i class="anticon anticon-user"><svg viewBox="64 64 896 896" data-icon="user" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M858.5 763.6a374 374 0 0 0-80.6-119.5 375.63 375.63 0 0 0-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 0 0-80.6 119.5A371.7 371.7 0 0 0 136 901.8a8 8 0 0 0 8 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 0 0 8-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"></path></svg></i></span></div>`;

4
components/avatar/demo/index.vue
View File

@ -9,6 +9,9 @@ import US from '../index.en-US.md'
const md = { const md = {
cn: `# Avatar头像 cn: `# Avatar头像
用来代表用户或事物，支持图片、图标或字符展示。 用来代表用户或事物，支持图片、图标或字符展示。
## 设计师专属
安装 [Kitchen Sketch 插件 <EFBFBD>](https://kitchen.alipay.com)，一键填充高逼格头像和文本.
## 代码演示`, ## 代码演示`,
us: `# Avatar us: `# Avatar
Avatars can be used to represent people or objects. It supports images, 'Icon's, or letters. Avatars can be used to represent people or objects. It supports images, 'Icon's, or letters.
@ -19,6 +22,7 @@ export default {
category: 'Components', category: 'Components',
subtitle: '头像', subtitle: '头像',
type: 'Data Display', type: 'Data Display',
zhType: '数据展示',
title: 'Avatar', title: 'Avatar',
render () { render () {
return ( return (

2
components/select/index.jsx
View File

@ -31,6 +31,8 @@ const AbstractSelectProps = () => ({
backfill: PropTypes.bool, backfill: PropTypes.bool,
showArrow: PropTypes.bool, showArrow: PropTypes.bool,
getPopupContainer: PropTypes.func, getPopupContainer: PropTypes.func,
open: PropTypes.bool,
defaultOpen: PropTypes.bool,
}) })
const Value = PropTypes.shape({ const Value = PropTypes.shape({
key: PropTypes.string, key: PropTypes.string,