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
| Name | Description | Type | Default |
| --------------------------------- | -------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------- | ------------ |
| placeholder | the placeholder of Autocomplete | ^[string] | — |
| clearable | whether to show clear button | ^[boolean] | false |
| disabled | whether Autocomplete is disabled | ^[boolean] | false |
| value-key | key name of the input suggestion object for display | ^[string] | value |
| model-value / v-model | binding value | ^[string] | — |
| 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 |
| 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 |
| 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] | — |
| hide-loading | whether to hide the loading icon in remote search | ^[boolean] | false |
| 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 |
| 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 |
| fit-input-width | whether the width of the dropdown is the same as the input | ^[boolean] | false |
| Name | Description | Type | Default |
| -------------------------------------- | -------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------- | ------------ |
| model-value / v-model | binding value | ^[string] | — |
| placeholder | the placeholder of Autocomplete | ^[string] | — |
| clearable | whether to show clear button | ^[boolean] | false |
| disabled | whether Autocomplete is disabled | ^[boolean] | false |
| value-key | key name of the input suggestion object for display | ^[string] | value |
| 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 |
| 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` | — |
| 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] | — |
| label | label text | ^[string] | — |
| 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<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 |
| 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 |
### Events
@ -79,13 +79,13 @@ autocomplete/remote-search
| 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 |
| suffix | content as Input suffix |
| prepend | content to prepend before Input |
| append | content to append after Input |
### Instance Exposes
### Exposes
| Name | Description | Type |
| ---------------- | ------------------------------------------- | ----------------------------------------- |

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

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