mirror of
https://github.com/element-plus/element-plus.git
synced 2024-11-27 02:01:15 +08:00
fix(docs): [autocomplete] [affix] (#10443)
* Replace jsx with customized API syntax Co-authored-by: JeremyWuuuuu <15975785+JeremyWuuuuu@users.noreply.github.com>
This commit is contained in:
Jeremy
GitHub
parent
36c5aed076
commit
39faf4beaa
@ -41,26 +41,26 @@ affix/fixed
|
||||
|
||||
### Affix Attributes
|
||||
|
||||
| Name | Description | Type | Default | Required |
|
||||
| ---------- | -------------------------------- | ---------------------------------------- | ------- | -------- |
|
||||
| `offset` | offset distance. | `number` | `0` | No |
|
||||
| `position` | position of affix. | <EnumType :values="['top', 'bottom']" /> | `'top'` | No |
|
||||
| `target` | target container. (CSS selector) | `string` | — | No |
|
||||
| `z-index` | `z-index` of affix | `number` | `100` | No |
|
||||
| Name | Description | Type | Default | Required |
|
||||
| ---------- | -------------------------------- | -------------------------- | ------- | -------- |
|
||||
| `offset` | offset distance. | ^[number] | `0` | No |
|
||||
| `position` | position of affix. | ^[enum]`'top' \| 'bottom'` | `'top'` | No |
|
||||
| `target` | target container. (CSS selector) | ^[string] | — | No |
|
||||
| `z-index` | `z-index` of affix | ^[number] | `100` | No |
|
||||
|
||||
### Affix Events
|
||||
|
||||
| Name | Description | Type |
|
||||
| -------- | ---------------------------------- | ------------------------------------------------------------------------------- |
|
||||
| `change` | triggers when fixed state changed. | <FunctionType :params="[['fixed', 'boolean']]" /> |
|
||||
| `scroll` | triggers when scrolling. | <FunctionType :params="[['value', '{ scrollTop: number, fixed: boolean }']]" /> |
|
||||
| Name | Description | Type |
|
||||
| -------- | ---------------------------------- | ------------------------------------------------------------------- |
|
||||
| `change` | triggers when fixed state changed. | ^[Function]`(fixed: boolean) => void` |
|
||||
| `scroll` | triggers when scrolling. | ^[Function]`(value: { scrollTop: number, fixed: boolean }) => void` |
|
||||
|
||||
### Affix Exposes
|
||||
|
||||
| Method | Description | Type |
|
||||
| ------------ | --------------------------- | ---------------- |
|
||||
| `update` | update affix state manually | <FunctionType /> |
|
||||
| `updateRoot` | update rootRect info | <FunctionType /> |
|
||||
| Method | Description | Type |
|
||||
| ------------ | --------------------------- | ----------------------- |
|
||||
| `update` | update affix state manually | ^[Function]`() => void` |
|
||||
| `updateRoot` | update rootRect info | ^[Function]`() => void` |
|
||||
|
||||
### Affix Slots
|
||||
|
||||
|
||||
@ -41,35 +41,29 @@ autocomplete/remote-search
|
||||
|
||||
### Attributes
|
||||
|
||||
```api
|
||||
|
||||
| Name | Description | Type | Default |
|
||||
| --------------------------------- | -------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- | ------------ |
|
||||
| placeholder | the placeholder of Autocomplete | <StringType /> | — |
|
||||
| clearable | whether to show clear button | <BooleanType /> | false |
|
||||
| disabled | whether Autocomplete is disabled | <BooleanType /> | false |
|
||||
| value-key | key name of the input suggestion object for display | <StringType /> | value |
|
||||
| model-value / v-model | binding value | <StringType /> | — |
|
||||
| debounce | debounce delay when typing, in milliseconds | <NumberType /> | 300 |
|
||||
| placement | placement of the popup menu | <EnumType :values="['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 | <FunctionType :params="[['queryString', 'string'], ['callback', 'CallbackFn']]" /> | — |
|
||||
| popper-class | custom class name for autocomplete's dropdown | <StringType /> | — |
|
||||
| trigger-on-focus | whether show suggestions when input focus | <BooleanType /> | true |
|
||||
| name | same as `name` in native input | <StringType /> | — |
|
||||
| select-when-unmatched | whether to emit a `select` event on enter when there is no autocomplete match | <BooleanType /> | false |
|
||||
| label | label text | <StringType /> | — |
|
||||
| hide-loading | whether to hide the loading icon in remote search | <BooleanType /> | 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 | <BooleanType /> | false |
|
||||
| teleported | whether select dropdown is teleported to the body | <BooleanType /> | true |
|
||||
| highlight-first-item | whether to highlight first item in remote search suggestions by default | <BooleanType /> | false |
|
||||
| fit-input-width | whether the width of the dropdown is the same as the input | <BooleanType /> | false |
|
||||
|
||||
```
|
||||
| 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 |
|
||||
|
||||
### Slots
|
||||
|
||||
```api
|
||||
|
||||
| Name | Description |
|
||||
| ------- | --------------------------------------------------------------------- |
|
||||
| default | Custom content for input suggestions. The scope parameter is { item } |
|
||||
@ -78,36 +72,26 @@ autocomplete/remote-search
|
||||
| prepend | content to prepend before Input |
|
||||
| append | content to append after Input |
|
||||
|
||||
```
|
||||
|
||||
### Events
|
||||
|
||||
```api
|
||||
|
||||
| Name | Description | Type |
|
||||
| ------ | ------------------------------------------------ | ------------------------------------------------------------------------------ |
|
||||
| select | triggers when a suggestion is clicked | <FunctionType :params="[['item', ['{ value: typeof modelValue }', 'any']]]" /> |
|
||||
| change | triggers when the icon inside Input value change | <FunctionType :params="[['value', ['string', 'number']]]" /> |
|
||||
|
||||
```
|
||||
| Name | Description | Type |
|
||||
| ------ | ------------------------------------------------ | ----------------------------------------------------- |
|
||||
| select | triggers when a suggestion is clicked | ^[Function]`(item: typeof modelValue \| any) => void` |
|
||||
| change | triggers when the icon inside Input value change | ^[Function]`(value: string \| number) => void` |
|
||||
|
||||
### Instance Exposes
|
||||
|
||||
```api
|
||||
|
||||
| Name | Description | Type |
|
||||
| ---------------- | ------------------------------------------- | -------------------------------------------------------------------- |
|
||||
| activated | if autocomplete activated | <RefType type="boolean" /> |
|
||||
| blur | blur the input element | <FunctionType /> |
|
||||
| close | collapse suggestion list | <FunctionType /> |
|
||||
| focus | focus the input element | <FunctionType /> |
|
||||
| handleSelect | triggers when a suggestion is clicked | <FunctionType :params="[['item', 'any']]" returns="Promise<void>" /> |
|
||||
| handleKeyEnter | handle keyboard enter event | <FunctionType returns="Promise<void>" /> |
|
||||
| highlightedIndex | the index of the currently highlighted item | <RefType type="number" /> |
|
||||
| highlight | highlight an item in a suggestion | <FunctionType :params="[['itemIndex', 'number']]" /> |
|
||||
| inputRef | el-input component instance | <RefType type="ElInputInstance" /> |
|
||||
| loading | remote search loading indicator | <RefType type="boolean" /> |
|
||||
| popperRef | el-tooltip component instance | <RefType type="ElTooltipInstance" /> |
|
||||
| suggestions | fetch suggestions result | <RefType type="Record<string, any>" /> |
|
||||
|
||||
```
|
||||
| Name | Description | Type |
|
||||
| ---------------- | ------------------------------------------- | ----------------------------------------- |
|
||||
| activated | if autocomplete activated | ^[Object]`Ref<boolean>` |
|
||||
| blur | blur the input element | ^[Function]`() => void` |
|
||||
| close | collapse suggestion list | ^[Function]`() => void` |
|
||||
| focus | focus the input element | ^[Function]`() => void` |
|
||||
| handleSelect | triggers when a suggestion is clicked | ^[Function]`(item: any) => promise<void>` |
|
||||
| handleKeyEnter | handle keyboard enter event | ^[Function]`() => promise<void>` |
|
||||
| highlightedIndex | the index of the currently highlighted item | ^[Object]`Ref<number>` |
|
||||
| highlight | highlight an item in a suggestion | ^[Function]`(itemIndex: number) => void` |
|
||||
| inputRef | el-input component instance | ^[Object]`Ref<ElInputInstance>` |
|
||||
| loading | remote search loading indicator | ^[Object]`Ref<boolean>` |
|
||||
| popperRef | el-tooltip component instance | ^[Object]`Ref<ElTooltipInstance>` |
|
||||
| suggestions | fetch suggestions result | ^[Object]`Ref<record<string, any>>` |
|
||||
|
||||
Loading…
Reference in New Issue
Block a user