mirror/element-plus
2
0
Fork 0
mirror of https://github.com/element-plus/element-plus.git synced 2025-02-17 11:49:41 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs(components): [autocomplete] (#11026)

Browse Source 
* docs(components): [autocomplete]
* Update form docs with new syntax.

* docs(components): [autocomplete]

* docs(components): [autocomplete]
This commit is contained in:
Xc 2023-02-11 23:39:23 +08:00 committed by GitHub
parent 203347f1aa
commit a2de1b9c1f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 76 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
docs/en-US/component/autocomplete.md
View File

@ -47,26 +47,26 @@ autocomplete/remote-search
### Attributes ### Attributes
| Name | Description | Type | Default | | Name | Description | Type | Default |
| --------------------------------- | -------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------- | ------------ | | -------------------------------------- | -------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------- | ------------ |
| placeholder | the placeholder of Autocomplete | ^[string] | — | | model-value / v-model | binding value | ^[string] | — |
| clearable | whether to show clear button | ^[boolean] | false | | placeholder | the placeholder of Autocomplete | ^[string] | — |
| disabled | whether Autocomplete is disabled | ^[boolean] | false | | clearable | whether to show clear button | ^[boolean] | false |
| value-key | key name of the input suggestion object for display | ^[string] | value | | disabled | whether Autocomplete is disabled | ^[boolean] | false |
| model-value / v-model | binding value | ^[string] | — | | value-key | key name of the input suggestion object for display | ^[string] | value |
| debounce | debounce delay when typing, in milliseconds | ^[number] | 300 | | debounce | debounce delay when typing, in milliseconds | ^[number] | 300 |
| placement | placement of the popup menu | ^[enum]`'top' \| 'top- start' \| 'top-end' \| 'bottom' \| 'bottom-start' \| 'bottom-end'` | bottom-start | | placement | placement of the popup menu | ^[enum]`'top' \| 'top- start' \| 'top-end' \| 'bottom' \| 'bottom-start' \| 'bottom-end'` | bottom-start |
| fetch-suggestions | a method to fetch input suggestions. When suggestions are ready, invoke `callback(data:[])` to return them to Autocomplete | ^[Function]`(queryString: string, callback: callbackfn) => void` | — | | fetch-suggestions | a method to fetch input suggestions. When suggestions are ready, invoke `callback(data:[])` to return them to Autocomplete | ^[Function]`(queryString: string, callback: callbackfn) => void` | — |
| popper-class | custom class name for autocomplete's dropdown | ^[string] | — | | trigger-on-focus | whether show suggestions when input focus | ^[boolean] | true |
| trigger-on-focus | whether show suggestions when input focus | ^[boolean] | true | | select-when-unmatched | whether to emit a `select` event on enter when there is no autocomplete match | ^[boolean] | false |
| name | same as `name` in native input | ^[string] | — | | name | same as `name` in native input | ^[string] | — |
| select-when-unmatched | whether to emit a `select` event on enter when there is no autocomplete match | ^[boolean] | false | | label | label text | ^[string] | — |
| label | label text | ^[string] | — | | hide-loading | whether to hide the loading icon in remote search | ^[boolean] | false |
| hide-loading | whether to hide the loading icon in remote search | ^[boolean] | false | | popper-class | custom class name for autocomplete's dropdown | ^[string] | — |
| popper-append-to-body(deprecated) | whether to append the dropdown to body. If the positioning of the dropdown is wrong, you can try to set this prop to false | ^[boolean] | false | | popper-append-to-body<DeprecatedTag /> | whether to append the dropdown to body. If the positioning of the dropdown is wrong, you can try to set this prop to false | ^[boolean] | false |
| teleported | whether select dropdown is teleported to the body | ^[boolean] | true | | teleported | whether select dropdown is teleported to the body | ^[boolean] | true |
| highlight-first-item | whether to highlight first item in remote search suggestions by default | ^[boolean] | false | | highlight-first-item | whether to highlight first item in remote search suggestions by default | ^[boolean] | false |
| fit-input-width | whether the width of the dropdown is the same as the input | ^[boolean] | false | | fit-input-width | whether the width of the dropdown is the same as the input | ^[boolean] | false |
### Events ### Events
@ -79,13 +79,13 @@ autocomplete/remote-search
| Name | Description | | Name | Description |
| ------- | --------------------------------------------------------------------- | | ------- | --------------------------------------------------------------------- |
| default | Custom content for input suggestions. The scope parameter is { item } | | default | custom content for input suggestions. The scope parameter is { item } |
| prefix | content as Input prefix | | prefix | content as Input prefix |
| suffix | content as Input suffix | | suffix | content as Input suffix |
| prepend | content to prepend before Input | | prepend | content to prepend before Input |
| append | content to append after Input | | append | content to append after Input |
### Instance Exposes ### Exposes
| Name | Description | Type | | Name | Description | Type |
| ---------------- | ------------------------------------------- | ----------------------------------------- | | ---------------- | ------------------------------------------- | ----------------------------------------- |

54
packages/components/autocomplete/src/autocomplete.ts
View File

@ -29,18 +29,30 @@ export type AutocompleteFetchSuggestions =
| AutocompleteData | AutocompleteData
export const autocompleteProps = buildProps({ export const autocompleteProps = buildProps({
/**
* @description key name of the input suggestion object for display
*/
valueKey: { valueKey: {
type: String, type: String,
default: 'value', default: 'value',
}, },
/**
* @description binding value
*/
modelValue: { modelValue: {
type: [String, Number], type: [String, Number],
default: '', default: '',
}, },
/**
* @description debounce delay when typing, in milliseconds
*/
debounce: { debounce: {
type: Number, type: Number,
default: 300, default: 300,
}, },
/**
* @description the placeholder of Autocomplete
*/
placement: { placement: {
type: definePropType<Placement>(String), type: definePropType<Placement>(String),
values: [ values: [
@ -53,38 +65,80 @@ export const autocompleteProps = buildProps({
], ],
default: 'bottom-start', default: 'bottom-start',
}, },
/**
* @description a method to fetch input suggestions. When suggestions are ready, invoke `callback(data:[])` to return them to Autocomplete
*/
fetchSuggestions: { fetchSuggestions: {
type: definePropType<AutocompleteFetchSuggestions>([Function, Array]), type: definePropType<AutocompleteFetchSuggestions>([Function, Array]),
default: NOOP, default: NOOP,
}, },
/**
* @description custom class name for autocomplete's dropdown
*/
popperClass: { popperClass: {
type: String, type: String,
default: '', default: '',
}, },
/**
* @description whether show suggestions when input focus
*/
triggerOnFocus: { triggerOnFocus: {
type: Boolean, type: Boolean,
default: true, default: true,
}, },
/**
* @description whether to emit a `select` event on enter when there is no autocomplete match
*/
selectWhenUnmatched: { selectWhenUnmatched: {
type: Boolean, type: Boolean,
default: false, default: false,
}, },
/**
* @description whether to hide the loading icon in remote search
*/
hideLoading: { hideLoading: {
type: Boolean, type: Boolean,
default: false, default: false,
}, },
/**
* @description label text
*/
label: { label: {
type: String, type: String,
}, },
teleported: useTooltipContentProps.teleported, teleported: useTooltipContentProps.teleported,
/**
* @description whether to highlight first item in remote search suggestions by default
*/
highlightFirstItem: { highlightFirstItem: {
type: Boolean, type: Boolean,
default: false, default: false,
}, },
/**
* @description whether the width of the dropdown is the same as the input
*/
fitInputWidth: { fitInputWidth: {
type: Boolean, type: Boolean,
default: false, default: false,
}, },
/**
* @description whether to show clear button
*/
clearable: {
type: Boolean,
default: false,
},
/**
* @description whether to disable
*/
disabled: {
type: Boolean,
default: false,
},
/**
* @description same as `name` in native input
*/
name: String,
} as const) } as const)
export type AutocompleteProps = ExtractPropTypes<typeof autocompleteProps> export type AutocompleteProps = ExtractPropTypes<typeof autocompleteProps>