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 auto-complete

pull/1790/head
tangjinzhou 2020-02-08 13:26:18 +08:00
parent 22b28b34c2
commit 7a8bef0ef3
9 changed files with 150 additions and 124 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
build/config.js
View File

@ -1,5 +1,5 @@
module.exports = {
dev: {
componentName: 'anchor', // dev components
componentName: 'auto-complete', // dev components
},
};

11
components/auto-complete/InputElement.jsx
View File

@ -20,17 +20,6 @@ export default {
disabled: PropTypes.bool,
placeholder: PropTypes.string,
},
methods: {
focus() {
const ele = this.$refs.ele;
ele.focus ? ele.focus() : this.$el.focus();
},
blur() {
const ele = this.$refs.ele;
ele.blur ? ele.blur() : this.$el.blur();
},
},
render() {
const { $slots = {}, $attrs = {}, placeholder } = this;
const listeners = getListeners(this);

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

@ -1,15 +1,28 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders ./components/auto-complete/demo/basic.md correctly 1`] = `
<div tabindex="0" class="ant-select ant-select-combobox ant-select-enabled ant-select-show-search ant-select-auto-complete" style="width: 200px;">
<div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-controls="test-uuid" class="ant-select-selection ant-select-selection--single">
<div class="ant-select-selection__rendered">
<ul>
<li class="ant-select-search ant-select-search--inline">
<div class="ant-select-search__field__wrap"><input placeholder="input here" type="text" value="" class="ant-input ant-select-search__field"><span class="ant-select-search__field__mirror">&nbsp;</span></div>
</li>
</ul>
</div><span unselectable="on" class="ant-select-arrow" style="user-select: none;"><i aria-label="icon: down" class="ant-select-arrow-icon anticon anticon-down"><svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></i></span>
<div>
<div tabindex="0" class="ant-select ant-select-combobox ant-select-enabled ant-select-show-search ant-select-auto-complete" style="width: 200px;">
<div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-controls="test-uuid" class="ant-select-selection ant-select-selection--single">
<div class="ant-select-selection__rendered">
<ul>
<li class="ant-select-search ant-select-search--inline">
<div class="ant-select-search__field__wrap"><input placeholder="input here" type="text" value="" class="ant-input ant-select-search__field"><span class="ant-select-search__field__mirror">&nbsp;</span></div>
</li>
</ul>
</div><span unselectable="on" class="ant-select-arrow" style="user-select: none;"><i aria-label="icon: down" class="ant-select-arrow-icon anticon anticon-down"><svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></i></span>
</div>
</div> <br> <br>
<div tabindex="0" class="ant-select ant-select-combobox ant-select-enabled ant-select-show-search ant-select-auto-complete" style="width: 200px;">
<div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-controls="test-uuid" class="ant-select-selection ant-select-selection--single">
<div class="ant-select-selection__rendered">
<ul>
<li class="ant-select-search ant-select-search--inline">
<div class="ant-select-search__field__wrap"><input placeholder="control mode" type="text" value="" class="ant-input ant-select-search__field"><span class="ant-select-search__field__mirror">&nbsp;</span></div>
</li>
</ul>
</div><span unselectable="on" class="ant-select-arrow" style="user-select: none;"><i aria-label="icon: down" class="ant-select-arrow-icon anticon anticon-down"><svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></i></span>
</div>
</div>
</div>
`;
@ -79,7 +92,7 @@ exports[`renders ./components/auto-complete/demo/uncertain-category.md correctly
<div class="ant-select-selection__rendered">
<ul>
<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"><input placeholder="input here" type="text" value="" class="ant-input"><span class="ant-input-suffix"><button type="button" class="search-btn ant-btn ant-btn-primary ant-btn-lg"><i aria-label="icon: search" class="anticon anticon-search"><svg viewBox="64 64 896 896" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" 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>
<div class="ant-select-search__field__wrap"><span class="ant-input-affix-wrapper ant-select-search__field"><input placeholder="input here" type="text" value="" class="ant-input"><span class="ant-input-suffix"><button type="button" class="search-btn ant-btn ant-btn-primary ant-btn-lg" style="margin-right: -12px;"><i aria-label="icon: search" class="anticon anticon-search"><svg viewBox="64 64 896 896" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" 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>
</ul>
</div><span unselectable="on" class="ant-select-arrow" style="user-select: none;"><i aria-label="icon: down" class="ant-select-arrow-icon anticon anticon-down"><svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></i></span>

23
components/auto-complete/demo/basic.md
View File

@ -10,28 +10,45 @@ Basic Usage, set datasource of autocomplete with `dataSource` property.
```tpl
<template>
<div>
<a-auto-complete
:dataSource="dataSource"
style="width: 200px"
@select="onSelect"
@search="handleSearch"
@search="onSearch"
placeholder="input here"
/>
<br />
<br />
<a-auto-complete
:value="value"
:dataSource="dataSource"
style="width: 200px"
@select="onSelect"
@search="onSearch"
@change="onChange"
placeholder="control mode"
/>
</div>
</template>
<script>
export default {
data() {
return {
value: '',
dataSource: [],
};
},
methods: {
handleSearch(value) {
this.dataSource = !value ? [] : [value, value + value, value + value + value];
onSearch(searchText) {
this.dataSource = !searchText ? [] : [searchText, searchText.repeat(2), searchText.repeat(3)];
},
onSelect(value) {
console.log('onSelect', value);
},
onChange(value) {
this.value = value;
}
},
};
</script>

82
components/auto-complete/demo/certain-category.md
View File

@ -30,17 +30,17 @@ Lookup-Patterns - Certain Category
href="https://www.google.com/search?q=antd"
target="_blank"
rel="noopener noreferrer"
>更多
>more
</a>
</span>
<a-select-option v-for="opt in group.children" :key="opt.title" :value="opt.title">
{{opt.title}}
<span class="certain-search-item-count">{{opt.count}} 人 关注</span>
<span class="certain-search-item-count">{{opt.count}} people</span>
</a-select-option>
</a-select-opt-group>
<a-select-option disabled key="all" class="show-all">
<a href="https://www.google.com/search?q=antd" target="_blank" rel="noopener noreferrer">
查看所有结果
<a href="https://www.google.com/search?q=ant-design-vue" target="_blank" rel="noopener noreferrer">
View all results
</a>
</a-select-option>
</template>
@ -51,43 +51,43 @@ Lookup-Patterns - Certain Category
</div>
</template>
<script>
const dataSource = [
{
title: '话题',
children: [
{
title: 'AntDesign',
count: 10000,
},
{
title: 'AntDesign UI',
count: 10600,
},
],
},
{
title: '问题',
children: [
{
title: 'AntDesign UI 有多好',
count: 60100,
},
{
title: 'AntDesign 是啥',
count: 30010,
},
],
},
{
title: '文章',
children: [
{
title: 'AntDesign 是一个设计语言',
count: 100000,
},
],
},
];
const dataSource = [
{
title: 'Libraries',
children: [
{
title: 'AntDesign',
count: 10000,
},
{
title: 'AntDesign UI',
count: 10600,
},
],
},
{
title: 'Solutions',
children: [
{
title: 'AntDesign UI',
count: 60100,
},
{
title: 'AntDesign',
count: 30010,
},
],
},
{
title: 'Articles',
children: [
{
title: 'AntDesign design language',
count: 100000,
},
],
},
];
export default {
data() {
return {

24
components/auto-complete/demo/uncertain-category.md
View File

@ -22,7 +22,7 @@ Lookup-Patterns - Uncertain Category
>
<template slot="dataSource">
<a-select-option v-for="item in dataSource" :key="item.category" :text="item.category">
{{item.query}} 在
Found {{item.query}} on
<a
:href="`https://s.taobao.com/search?q=${item.query}`"
target="_blank"
@ -30,12 +30,11 @@ Lookup-Patterns - Uncertain Category
>
{{item.category}}
</a>
区块中
<span className="global-search-item-count">约 {{item.count}} 个结果</span>
<span className="global-search-item-count">{{item.count}} results</span>
</a-select-option>
</template>
<a-input>
<a-button slot="suffix" class="search-btn" size="large" type="primary">
<a-button slot="suffix" style="margin-right: -12px" class="search-btn" size="large" type="primary">
<a-icon type="search" />
</a-button>
</a-input>
@ -93,18 +92,23 @@ Lookup-Patterns - Uncertain Category
padding-right: 62px;
}
.global-search.ant-select-auto-complete .ant-input-affix-wrapper .ant-input-suffix {
right: 0;
}
.global-search.ant-select-auto-complete .ant-input-affix-wrapper .ant-input-suffix button {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.global-search-item {
display: flex;
}
.global-search-item-desc {
flex: auto;
text-overflow: ellipsis;
overflow: hidden;
}
.global-search-item-count {
position: absolute;
right: 16px;
flex: none;
}
</style>
```

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

@ -4,37 +4,38 @@
<a-auto-complete :dataSource="dataSource" />
```
| Property | Description | Type | Default |
| --- | --- | --- | --- |
| allowClear | Show clear button, effective in multiple mode only. | boolean | false |
| autoFocus | get focus when component mounted | boolean | false |
| backfill | backfill selected item the input when using keyboard | boolean | false |
| slot="default" (for customize input element) | customize input element | HTMLInputElement / HTMLTextAreaElement | `<Input />` |
| dataSource | Data source for autocomplete | slot \| [DataSourceItemType](https://github.com/vueComponent/ant-design-vue/blob/724d53b907e577cf5880c1e6742d4c3f924f8f49/components/auto-complete/index.vue#L9)\[] | |
| defaultActiveFirstOption | Whether active first option by default | boolean | true |
| defaultValue | Initial selected option. | string\|string\[]\| - |
| disabled | Whether disabled select | boolean | false |
| filterOption | If true, filter options by input, if function, filter options against it. The function will receive two arguments, `inputValue` and `option`, if the function returns `true`, the option will be included in the filtered set; Otherwise, it will be excluded. | boolean or function(inputValue, option) | true |
| 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&lt;{ key: string, label: string\|vNodes }> | - |
| defaultOpen | Initial open state of dropdown | boolean | - |
| open | Controlled open state of dropdown | boolean | - |
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| allowClear | Show clear button, effective in multiple mode only. | boolean | false | |
| autoFocus | get focus when component mounted | boolean | false | |
| backfill | backfill selected item the input when using keyboard | boolean | false | |
| slot="default" (for customize input element) | customize input element | HTMLInputElement / HTMLTextAreaElement | `<Input />` | |
| dataSource | Data source for autocomplete | slot \| [DataSourceItemType](https://github.com/vueComponent/ant-design-vue/blob/724d53b907e577cf5880c1e6742d4c3f924f8f49/components/auto-complete/index.vue#L9)\[] | | |
| dropdownMenuStyle | additional style applied to dropdown menu | object | | 1.5.0 |
| defaultActiveFirstOption | Whether active first option by default | boolean | true | |
| defaultValue | Initial selected option. | string\|string\[]\| - | |
| disabled | Whether disabled select | boolean | false | |
| filterOption | If true, filter options by input, if function, filter options against it. The function will receive two arguments, `inputValue` and `option`, if the function returns `true`, the option will be included in the filtered set; Otherwise, it will be excluded. | boolean or function(inputValue, option) | true | |
| 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&lt;{ key: string, label: string\|vNodes }> | - | |
| defaultOpen | Initial open state of dropdown | boolean | - | |
| open | Controlled open state of dropdown | boolean | - | |
### events
| Events Name | Description | Arguments |
| --- | --- | --- |
| change | Called when select an option or input value change, or value of input is changed | function(value) |
| blur | Called when leaving the component. | function() |
| 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) |
| dropdownVisibleChange | Call when dropdown open | function(open) |
| Events Name | Description | Arguments | Version |
| --- | --- | --- | --- |
| change | Called when select an option or input value change, or value of input is changed | function(value) | |
| blur | Called when leaving the component. | function() | |
| 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) | |
| dropdownVisibleChange | Call when dropdown open | function(open) | |
## Methods
| Name | Description |
| ------- | ------------ |
| blur() | remove focus |
| focus() | get focus |
| Name | Description | Version |
| ------- | ------------ | ------- |
| blur() | remove focus | |
| focus() | get focus | |

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

@ -32,6 +32,7 @@ const AutoCompleteProps = {
value: SelectValue,
defaultValue: SelectValue,
dataSource: PropTypes.array,
dropdownMenuStyle: PropTypes.object,
optionLabelProp: String,
dropdownMatchSelectWidth: PropTypes.bool,
// onChange?: (value: SelectValue) => void;

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

@ -4,27 +4,28 @@
<a-auto-complete :dataSource="dataSource" />
```
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| allowClear | 支持清除, 单选模式有效 | boolean | false |
| autoFocus | 自动获取焦点 | boolean | false |
| backfill | 使用键盘选择选项的时候把选中项回填到输入框中 | boolean | false |
| slot="default" (自定义输入框) | 自定义输入框 | HTMLInputElement / HTMLTextAreaElement | `<Input />` |
| dataSource | 自动完成的数据源 | slot \| [DataSourceItemType](https://github.com/vueComponent/ant-design-vue/blob/724d53b907e577cf5880c1e6742d4c3f924f8f49/components/auto-complete/index.vue#L9)\[] | |
| defaultActiveFirstOption | 是否默认高亮第一个选项。 | boolean | true |
| defaultValue | 指定默认选中的条目 | string\|string\[]\| 无 |
| disabled | 是否禁用 | boolean | false |
| filterOption | 是否根据输入项进行筛选。当其为一个函数时，会接收 `inputValue` `option` 两个参数，当 `option` 符合筛选条件时，应返回 `true`，反之则返回 `false`。 | boolean or function(inputValue, option) | true |
| optionLabelProp | 回填到选择框的 Option 的属性值，默认是 Option 的子元素。比如在子元素需要高亮效果时，此值可以设为 `value`。 | string | `children` |
| placeholder | 输入框提示 | string \| slot | - |
| value(v-model) | 指定当前选中的条目 | string\|string\[]\|{ key: string, label: string\|vNodes }\|Array&lt;{ key: string, label: string\|vNodes }> | 无 |
| defaultOpen | 是否默认展开下拉菜单 | boolean | - |
| open | 是否展开下拉菜单 | boolean | - |
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| allowClear | 支持清除, 单选模式有效 | boolean | false | |
| autoFocus | 自动获取焦点 | boolean | false | |
| backfill | 使用键盘选择选项的时候把选中项回填到输入框中 | boolean | false | |
| slot="default" (自定义输入框) | 自定义输入框 | HTMLInputElement / HTMLTextAreaElement | `<Input />` | |
| dataSource | 自动完成的数据源 | slot \| [DataSourceItemType](https://github.com/vueComponent/ant-design-vue/blob/724d53b907e577cf5880c1e6742d4c3f924f8f49/components/auto-complete/index.vue#L9)\[] | | |
| dropdownMenuStyle | dropdown 菜单自定义样式 | object | | 1.5.0 |
| defaultActiveFirstOption | 是否默认高亮第一个选项。 | boolean | true | |
| defaultValue | 指定默认选中的条目 | string\|string\[]\| 无 | |
| disabled | 是否禁用 | boolean | false | |
| filterOption | 是否根据输入项进行筛选。当其为一个函数时，会接收 `inputValue` `option` 两个参数，当 `option` 符合筛选条件时，应返回 `true`，反之则返回 `false`。 | boolean or function(inputValue, option) | true | |
| optionLabelProp | 回填到选择框的 Option 的属性值，默认是 Option 的子元素。比如在子元素需要高亮效果时，此值可以设为 `value`。 | string | `children` | |
| placeholder | 输入框提示 | string \| slot | - | |
| value(v-model) | 指定当前选中的条目 | string\|string\[]\|{ key: string, label: string\|vNodes }\|Array&lt;{ key: string, label: string\|vNodes }> | 无 | |
| defaultOpen | 是否默认展开下拉菜单 | boolean | - | |
| open | 是否展开下拉菜单 | boolean | - | |
### 事件
| 事件名称 | 说明 | 回调参数 |
| --- | --- | --- |
| 事件名称 | 说明 | 回调参数 | 版本 |
| --- | --- | --- | --- |
| change | 选中 option，或 input 的 value 变化时，调用此函数 | function(value) |
| blur | 失去焦点时的回调 | function() |
| focus | 获得焦点时的回调 | function() |
@ -34,7 +35,7 @@
## 方法
| 名称 | 描述 |
| ------- | -------- |
| 名称 | 描述 | 版本 |
| ------- | -------- | ---- |
| blur() | 移除焦点 |
| focus() | 获取焦点 |