doc: update auto-complete demo
tangjinzhou
parent
275996e788
commit
3a2a672240
|
|
@ -14,10 +14,10 @@ exports[`renders ./components/auto-complete/demo/basic.vue correctly 1`] = `
|
|||
|
||||
exports[`renders ./components/auto-complete/demo/certain-category.vue correctly 1`] = `
|
||||
<div class="certain-category-search-wrapper" style="width: 250px;">
|
||||
<div class="ant-select ant-select-lg certain-category-search ant-select-lg ant-select-show-search ant-select-auto-complete ant-select-single ant-select-customize-input ant-select-show-search" style="width: 100%;">
|
||||
<div 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;">
|
||||
<!---->
|
||||
<!---->
|
||||
<div class="ant-select-selector"><span class="ant-select-selection-search"><span class="ant-input-affix-wrapper ant-select-selection-search-input"><!----><input placeholder="input here" id="rc_select_TEST_OR_SSR" autocomplete="off" type="search" class="ant-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 class="ant-input-suffix"><!----><!----><span role="img" aria-label="search" class="anticon anticon-search certain-category-icon"><svg focusable="false" class="" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><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 0011.6 0l43.6-43.5a8.2 8.2 0 000-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></span></span></span></span>
|
||||
<div class="ant-select-selector"><span class="ant-select-selection-search"><span class="ant-input-group-wrapper ant-input-group-wrapper-lg ant-input-search ant-input-search-large ant-select-selection-search-input"><span class="ant-input-wrapper ant-input-group"><!----><input placeholder="input here" id="rc_select_TEST_OR_SSR" autocomplete="off" type="search" class="ant-input ant-input-lg" 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 class="ant-input-group-addon"><button class="ant-btn ant-btn-lg ant-input-search-button ant-btn-icon-only" type="button"><span role="img" aria-label="search" class="anticon anticon-search"><svg focusable="false" class="" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><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 0011.6 0l43.6-43.5a8.2 8.2 0 000-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></span></button></span></span></span></span>
|
||||
<!----><span class="ant-select-selection-placeholder"><!----></span>
|
||||
</div>
|
||||
<!---->
|
||||
|
|
@ -64,7 +64,7 @@ exports[`renders ./components/auto-complete/demo/options.vue correctly 1`] = `
|
|||
|
||||
exports[`renders ./components/auto-complete/demo/uncertain-category.vue correctly 1`] = `
|
||||
<div class="global-search-wrapper" style="width: 300px;">
|
||||
<div class="ant-select ant-select-lg global-search ant-select-lg ant-select-show-search ant-select-auto-complete ant-select-single ant-select-customize-input ant-select-show-search" style="width: 100%;">
|
||||
<div style="width: 300px;" class="ant-select ant-select-show-search ant-select-auto-complete ant-select-single ant-select-customize-input ant-select-show-search">
|
||||
<!---->
|
||||
<!---->
|
||||
<div class="ant-select-selector"><span class="ant-select-selection-search"><span class="ant-input-group-wrapper ant-input-group-wrapper-lg ant-input-search ant-input-search-large ant-input-search-with-button ant-select-selection-search-input"><span class="ant-input-wrapper ant-input-group"><!----><input placeholder="input here" id="rc_select_TEST_OR_SSR" autocomplete="off" type="search" class="ant-input ant-input-lg" 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 class="ant-input-group-addon"><button class="ant-btn ant-btn-primary ant-btn-lg ant-input-search-button" type="button"><!----><span role="img" aria-label="search" class="anticon anticon-search"><svg focusable="false" class="" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><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 0011.6 0l43.6-43.5a8.2 8.2 0 000-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></span></button></span></span></span></span>
|
||||
|
|
|
|||
|
|
@ -21,11 +21,8 @@ Lookup-Patterns - Certain Category.
|
|||
v-model:value="value"
|
||||
class="certain-category-search"
|
||||
dropdown-class-name="certain-category-search-dropdown"
|
||||
:dropdown-match-select-width="false"
|
||||
:dropdown-style="{ width: '300px' }"
|
||||
size="large"
|
||||
style="width: 100%"
|
||||
option-label-prop="value"
|
||||
:dropdown-match-select-width="500"
|
||||
style="width: 250px"
|
||||
:options="dataSource"
|
||||
>
|
||||
<template #option="item">
|
||||
|
|
@ -52,30 +49,33 @@ Lookup-Patterns - Certain Category.
|
|||
</a>
|
||||
</template>
|
||||
<template v-else>
|
||||
{{ item.title }}
|
||||
<span class="certain-search-item-count">{{ item.count }} people</span>
|
||||
<div style="display: flex; justify-content: space-between">
|
||||
{{ item.value }}
|
||||
<span>
|
||||
<UserOutlined />
|
||||
{{ item.count }}
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
<a-input placeholder="input here">
|
||||
<template #suffix><search-outlined class="certain-category-icon" /></template>
|
||||
</a-input>
|
||||
<a-input-search placeholder="input here" size="large"></a-input-search>
|
||||
</a-auto-complete>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { SearchOutlined } from '@ant-design/icons-vue';
|
||||
import { defineComponent, ref } from 'vue';
|
||||
import { UserOutlined } from '@ant-design/icons-vue';
|
||||
const dataSource = [
|
||||
{
|
||||
value: 'Libraries',
|
||||
options: [
|
||||
{
|
||||
value: 'AntDesign',
|
||||
value: 'AntDesignVue',
|
||||
count: 10000,
|
||||
},
|
||||
{
|
||||
value: 'AntDesign UI',
|
||||
value: 'AntDesignVue UI',
|
||||
count: 10600,
|
||||
},
|
||||
],
|
||||
|
|
@ -84,11 +84,11 @@ const dataSource = [
|
|||
value: 'Solutions',
|
||||
options: [
|
||||
{
|
||||
value: 'AntDesign UI FAQ',
|
||||
value: 'AntDesignVue UI FAQ',
|
||||
count: 60100,
|
||||
},
|
||||
{
|
||||
value: 'AntDesign FAQ',
|
||||
value: 'AntDesignVue FAQ',
|
||||
count: 30010,
|
||||
},
|
||||
],
|
||||
|
|
@ -97,7 +97,7 @@ const dataSource = [
|
|||
value: 'Articles',
|
||||
options: [
|
||||
{
|
||||
value: 'AntDesign design language',
|
||||
value: 'AntDesignVue design language',
|
||||
count: 100000,
|
||||
},
|
||||
],
|
||||
|
|
@ -108,7 +108,7 @@ const dataSource = [
|
|||
];
|
||||
export default defineComponent({
|
||||
components: {
|
||||
SearchOutlined,
|
||||
UserOutlined,
|
||||
},
|
||||
setup() {
|
||||
return {
|
||||
|
|
@ -142,27 +142,3 @@ export default defineComponent({
|
|||
max-height: 300px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style scoped>
|
||||
.certain-category-search-wrapper
|
||||
:deep(.certain-category-search.ant-select-auto-complete)
|
||||
.ant-input-affix-wrapper
|
||||
.ant-input-suffix {
|
||||
right: 12px;
|
||||
}
|
||||
.certain-category-search-wrapper :deep(.certain-search-item-count) {
|
||||
position: absolute;
|
||||
color: #999;
|
||||
right: 16px;
|
||||
}
|
||||
.certain-category-search-wrapper
|
||||
:deep(.certain-category-search.ant-select-focused)
|
||||
.certain-category-icon {
|
||||
color: #108ee9;
|
||||
}
|
||||
.certain-category-search-wrapper :deep(.certain-category-icon) {
|
||||
color: #6e6e6e;
|
||||
transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
|
||||
font-size: 16px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -14,29 +14,30 @@ title:
|
|||
|
||||
Lookup-Patterns - Uncertain Category.
|
||||
</docs>
|
||||
|
||||
<template>
|
||||
<div class="global-search-wrapper" style="width: 300px">
|
||||
<a-auto-complete
|
||||
v-model:value="value"
|
||||
class="global-search"
|
||||
size="large"
|
||||
style="width: 100%"
|
||||
option-label-prop="title"
|
||||
:dropdown-match-select-width="252"
|
||||
style="width: 300px"
|
||||
:options="dataSource"
|
||||
@select="onSelect"
|
||||
@search="handleSearch"
|
||||
>
|
||||
<template #option="item">
|
||||
Found {{ item.query }} on
|
||||
<a
|
||||
:href="`https://s.taobao.com/search?q=${item.query}`"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
{{ item.category }}
|
||||
</a>
|
||||
<span class="global-search-item-count">{{ item.count }} results</span>
|
||||
<div style="display: flex; justify-content: space-between">
|
||||
<span>
|
||||
Found {{ item.query }} on
|
||||
<a
|
||||
:href="`https://s.taobao.com/search?q=${item.query}`"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
{{ item.category }}
|
||||
</a>
|
||||
</span>
|
||||
<span>{{ item.count }} results</span>
|
||||
</div>
|
||||
</template>
|
||||
<a-input-search size="large" placeholder="input here" enter-button></a-input-search>
|
||||
</a-auto-complete>
|
||||
|
|
@ -86,40 +87,3 @@ export default defineComponent({
|
|||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.global-search-wrapper {
|
||||
padding-right: 50px;
|
||||
}
|
||||
|
||||
.global-search {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.global-search.ant-select-auto-complete .ant-select-selection--single {
|
||||
margin-right: -46px;
|
||||
}
|
||||
|
||||
.global-search.ant-select-auto-complete .ant-input-affix-wrapper .ant-input:not(:last-child) {
|
||||
padding-right: 62px;
|
||||
}
|
||||
|
||||
.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 {
|
||||
flex: none;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -26,10 +26,10 @@ The differences with Select are:
|
|||
|
||||
| Property | Description | Type | Default | Version |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| #default (for customize input element) | customize input element | HTMLInputElement / HTMLTextAreaElement | `<Input />` | |
|
||||
| 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 | |
|
||||
| default (for customize input element) | customize input element | slot | `<Input />` | |
|
||||
| defaultActiveFirstOption | Whether active first option by default | boolean | true | |
|
||||
| defaultOpen | Initial open state of dropdown | boolean | - | |
|
||||
| disabled | Whether disabled select | boolean | false | |
|
||||
|
|
|
|||
|
|
@ -27,10 +27,10 @@ cover: https://gw.alipayobjects.com/zos/alicdn/qtJm4yt45/AutoComplete.svg
|
|||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| #default (自定义输入框) | 自定义输入框 | HTMLInputElement / HTMLTextAreaElement | `<Input />` | |
|
||||
| allowClear | 支持清除, 单选模式有效 | boolean | false | |
|
||||
| autofocus | 自动获取焦点 | boolean | false | |
|
||||
| backfill | 使用键盘选择选项的时候把选中项回填到输入框中 | boolean | false | |
|
||||
| default (自定义输入框) | 自定义输入框 | slot | `<Input />` | |
|
||||
| defaultActiveFirstOption | 是否默认高亮第一个选项。 | boolean | true | |
|
||||
| defaultOpen | 是否默认展开下拉菜单 | boolean | - | |
|
||||
| disabled | 是否禁用 | boolean | false | |
|
||||
|
|
|
|||
Loading…
Reference in New Issue