Skip to content

Commit 65ccb44

Browse files
selicensselicens
authored
feat(AutoComplete): add border less and customize clear button (#6829)
* feat: add border less * feat: add customize clear button
1 parent 18405e1 commit 65ccb44

File tree

7 files changed

+168
-0
lines changed

7 files changed

+168
-0
lines changed

‎components/auto-complete/__tests__/__snapshots__/demo.test.js.snap

+35
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,28 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

3+
exports[`renders ./components/auto-complete/demo/allow-clear.vue correctly 1`] = `
4+
<div style="width: 200px;" class="ant-select ant-select-show-search ant-select-auto-complete ant-select-single ant-select-allow-clear ant-select-show-search">
5+
<!---->
6+
<div class="ant-select-selector"><span class="ant-select-selection-search"><input type="search" id="rc_select_TEST_OR_SSR" autocomplete="off" class="ant-select-selection-search-input" role="combobox" aria-haspopup="listbox" aria-owns="rc_select_TEST_OR_SSR_list" aria-autocomplete="list" aria-controls="rc_select_TEST_OR_SSR_list" aria-activedescendant="rc_select_TEST_OR_SSR_list_0"></span>
7+
<!----><span class="ant-select-selection-placeholder">Clearable</span>
8+
</div>
9+
<!---->
10+
<!---->
11+
<!---->
12+
</div>
13+
<br>
14+
<br>
15+
<div style="width: 200px;" class="ant-select ant-select-show-search ant-select-auto-complete ant-select-single ant-select-allow-clear ant-select-show-search">
16+
<!---->
17+
<div class="ant-select-selector"><span class="ant-select-selection-search"><input type="search" id="rc_select_TEST_OR_SSR" autocomplete="off" class="ant-select-selection-search-input" role="combobox" aria-haspopup="listbox" aria-owns="rc_select_TEST_OR_SSR_list" aria-autocomplete="list" aria-controls="rc_select_TEST_OR_SSR_list" aria-activedescendant="rc_select_TEST_OR_SSR_list_0"></span>
18+
<!----><span class="ant-select-selection-placeholder">Customized clear icon</span>
19+
</div>
20+
<!---->
21+
<!---->
22+
<!---->
23+
</div>
24+
`;
25+
326
exports[`renders ./components/auto-complete/demo/basic.vue correctly 1`] = `
427
<div style="width: 200px;" class="ant-select ant-select-show-search ant-select-auto-complete ant-select-single ant-select-show-search">
528
<!---->
@@ -12,6 +35,18 @@ exports[`renders ./components/auto-complete/demo/basic.vue correctly 1`] = `
1235
</div>
1336
`;
1437
38+
exports[`renders ./components/auto-complete/demo/border-less.vue correctly 1`] = `
39+
<div style="width: 200px;" class="ant-select ant-select-borderless ant-select-show-search ant-select-auto-complete ant-select-single ant-select-show-search">
40+
<!---->
41+
<div class="ant-select-selector"><span class="ant-select-selection-search"><input type="search" id="rc_select_TEST_OR_SSR" autocomplete="off" class="ant-select-selection-search-input" role="combobox" aria-haspopup="listbox" aria-owns="rc_select_TEST_OR_SSR_list" aria-autocomplete="list" aria-controls="rc_select_TEST_OR_SSR_list" aria-activedescendant="rc_select_TEST_OR_SSR_list_0"></span>
42+
<!----><span class="ant-select-selection-placeholder">border less</span>
43+
</div>
44+
<!---->
45+
<!---->
46+
<!---->
47+
</div>
48+
`;
49+
1550
exports[`renders ./components/auto-complete/demo/certain-category.vue correctly 1`] = `
1651
<div class="certain-category-search-wrapper" style="width: 250px;">
1752
<div popupclassname="certain-category-search-dropdown" class="ant-select certain-category-search ant-select-show-search ant-select-auto-complete ant-select-single ant-select-customize-input ant-select-show-search" style="width: 250px;">

‎components/auto-complete/demo/allow-clear.vue

+69
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
<docs>
2+
---
3+
order: 8
4+
title:
5+
zh-CN: 自定义清除按钮
6+
en-US: Customize clear button
7+
---
8+
9+
## zh-CN
10+
11+
自定义清除按钮。
12+
13+
## en-US
14+
15+
Customize clear button.
16+
</docs>
17+
18+
<template>
19+
<a-auto-complete
20+
v-model:value="value"
21+
:options="options"
22+
style="width: 200px"
23+
placeholder="Clearable"
24+
:allow-clear="true"
25+
@select="onSelect"
26+
@search="onSearch"
27+
/>
28+
<br />
29+
<br />
30+
<a-auto-complete
31+
v-model:value="value"
32+
:options="options"
33+
style="width: 200px"
34+
placeholder="Customized clear icon"
35+
:allow-clear="true"
36+
@select="onSelect"
37+
@search="onSearch"
38+
>
39+
<template #clearIcon>
40+
<close-outlined />
41+
</template>
42+
</a-auto-complete>
43+
</template>
44+
45+
<script lang="ts" setup>
46+
import { ref } from 'vue';
47+
import { CloseOutlined } from '@ant-design/icons-vue';
48+
49+
interface MockVal {
50+
value: string;
51+
}
52+
53+
const mockVal = (str: string, repeat = 1): MockVal => {
54+
return {
55+
value: str.repeat(repeat),
56+
};
57+
};
58+
const value = ref('');
59+
const options = ref<MockVal[]>([]);
60+
const onSearch = (searchText: string) => {
61+
console.log('searchText');
62+
options.value = !searchText
63+
? []
64+
: [mockVal(searchText), mockVal(searchText, 2), mockVal(searchText, 3)];
65+
};
66+
const onSelect = (value: string) => {
67+
console.log('onSelect', value);
68+
};
69+
</script>

‎components/auto-complete/demo/border-less.vue

+53
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
<docs>
2+
---
3+
order: 7
4+
title:
5+
zh-CN: 无边框
6+
en-US: Border less
7+
---
8+
9+
## zh-CN
10+
11+
没有边框。
12+
13+
## en-US
14+
15+
border less.
16+
</docs>
17+
18+
<template>
19+
<a-auto-complete
20+
v-model:value="value"
21+
:options="options"
22+
style="width: 200px"
23+
placeholder="border less"
24+
:bordered="false"
25+
@select="onSelect"
26+
@search="onSearch"
27+
/>
28+
</template>
29+
30+
<script lang="ts" setup>
31+
import { ref } from 'vue';
32+
33+
interface MockVal {
34+
value: string;
35+
}
36+
37+
const mockVal = (str: string, repeat = 1): MockVal => {
38+
return {
39+
value: str.repeat(repeat),
40+
};
41+
};
42+
const value = ref('');
43+
const options = ref<MockVal[]>([]);
44+
const onSearch = (searchText: string) => {
45+
console.log('searchText');
46+
options.value = !searchText
47+
? []
48+
: [mockVal(searchText), mockVal(searchText, 2), mockVal(searchText, 3)];
49+
};
50+
const onSelect = (value: string) => {
51+
console.log('onSelect', value);
52+
};
53+
</script>

‎components/auto-complete/demo/index.vue

+6
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@
77
<certain-category />
88
<uncertain-category />
99
<statusVue />
10+
<border-less />
11+
<allow-clear />
1012
</demo-sort>
1113
</template>
1214

@@ -18,6 +20,8 @@ import NonCaseSensitive from './non-case-sensitive.vue';
1820
import CertainCategory from './certain-category.vue';
1921
import UncertainCategory from './uncertain-category.vue';
2022
import statusVue from './status.vue';
23+
import BorderLess from './border-less.vue';
24+
import AllowClear from './allow-clear.vue';
2125
2226
import CN from '../index.zh-CN.md';
2327
import US from '../index.en-US.md';
@@ -34,6 +38,8 @@ export default defineComponent({
3438
NonCaseSensitive,
3539
CertainCategory,
3640
UncertainCategory,
41+
BorderLess,
42+
AllowClear,
3743
},
3844
setup() {
3945
return {};

‎components/auto-complete/index.en-US.md

+2
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,8 @@ The differences with Select are:
3030
| allowClear | Show clear button, effective in multiple mode only. | boolean | false | |
3131
| autofocus | get focus when component mounted | boolean | false | |
3232
| backfill | backfill selected item the input when using keyboard | boolean | false | |
33+
| bordered | Whether has border style | boolean | true | 4.0 |
34+
| clearIcon | Use slot custom clear icon | slot | `<CloseCircleFilled />` | 4.0 |
3335
| default (for customize input element) | customize input element | slot | `<Input />` | |
3436
| defaultActiveFirstOption | Whether active first option by default | boolean | true | |
3537
| defaultOpen | Initial open state of dropdown | boolean | - | |

‎components/auto-complete/index.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,7 @@ const AutoComplete = defineComponent({
5454
default: any;
5555
notFoundContent: any;
5656
dataSource: any;
57+
clearIcon: any;
5758
}>,
5859
setup(props, { slots, attrs, expose }) {
5960
warning(

‎components/auto-complete/index.zh-CN.md

+2
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,8 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*WERTQ6qvgEYAAA
3131
| allowClear | 支持清除, 单选模式有效 | boolean | false | |
3232
| autofocus | 自动获取焦点 | boolean | false | |
3333
| backfill | 使用键盘选择选项的时候把选中项回填到输入框中 | boolean | false | |
34+
| bordered | 是否有边框 | boolean | true | 4.0 |
35+
| clearIcon | 使用插槽自定义清除按钮 | slot | `<CloseCircleFilled />` | 4.0 |
3436
| default (自定义输入框) | 自定义输入框 | slot | `<Input />` | |
3537
| defaultActiveFirstOption | 是否默认高亮第一个选项。 | boolean | true | |
3638
| defaultOpen | 是否默认展开下拉菜单 | boolean | - | |

0 commit comments

Comments
 (0)