mirror of
https://github.com/element-plus/element-plus.git
synced 2024-11-21 01:02:59 +08:00
docs(components): [autocomplete] (#10405)
* docs(components): [autocomplete] * Add new API component `ref-type`. * Update doc API name font-family. * Update API popup style. * Update Autocomplete documentations.
This commit is contained in:
Jeremy
GitHub
parent
98e171ef4b
commit
71e6365a74
21
docs/.vitepress/vitepress/components/globals/vp-api-ref.vue
Normal file
21
docs/.vitepress/vitepress/components/globals/vp-api-ref.vue
Normal file
@ -0,0 +1,21 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import ApiTyping from './vp-api-typing.vue'
|
||||
|
||||
const props = defineProps({
|
||||
type: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
shallow: Boolean,
|
||||
})
|
||||
|
||||
const type = computed(() => {
|
||||
const wrapperType = props.shallow ? 'ShallowRef' : 'Ref'
|
||||
return `${wrapperType}<${props.type}>`
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ApiTyping type="Object" :details="type" />
|
||||
</template>
|
||||
@ -17,7 +17,12 @@ defineProps({
|
||||
<template #content>
|
||||
<slot>
|
||||
<div class="m-1">
|
||||
<code>
|
||||
<code
|
||||
style="
|
||||
color: var(--code-tooltip-color);
|
||||
background-color: var(--code-tooltip-bg-color);
|
||||
"
|
||||
>
|
||||
{{ details }}
|
||||
</code>
|
||||
</div>
|
||||
|
||||
@ -20,6 +20,7 @@ import ApiFunctionType from './components/globals/vp-api-function.vue'
|
||||
import ApiBooleanType from './components/globals/vp-api-bool.vue'
|
||||
import ApiStringType from './components/globals/vp-api-string.vue'
|
||||
import ApiNumberType from './components/globals/vp-api-number.vue'
|
||||
import ApiRefType from './components/globals/vp-api-ref.vue'
|
||||
import ApiEnumType from './components/globals/vp-api-enum.vue'
|
||||
import ApiExternalType from './components/globals/vp-api-external.vue'
|
||||
import IconList from './components/globals/icons.vue'
|
||||
@ -38,5 +39,6 @@ export const globals: [string, Component][] = [
|
||||
['BooleanType', ApiBooleanType],
|
||||
['StringType', ApiStringType],
|
||||
['NumberType', ApiNumberType],
|
||||
['RefType', ApiRefType],
|
||||
['ExternalType', ApiExternalType],
|
||||
]
|
||||
|
||||
@ -218,6 +218,10 @@ li > ol {
|
||||
thead tr:first-child th {
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
tbody tr td:first-child {
|
||||
font-family: var(--font-family-mono);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -67,6 +67,8 @@
|
||||
--code-bg-color: var(--el-fill-color-light);
|
||||
--code-text-color: var(--text-color);
|
||||
--code-font-family: var(--font-family-mono);
|
||||
--code-tooltip-bg-color: var(--code-bg-color);
|
||||
--code-tooltip-color: #0C61C9;
|
||||
|
||||
// tip block
|
||||
--block-tip-bg-color: rgba(var(--el-color-primary-rgb), 0.1);
|
||||
@ -80,4 +82,6 @@
|
||||
--bg-color-rgb: 0, 0, 0;
|
||||
--bg-color-soft: #242424;
|
||||
--bg-color-mute: #2c2c2c;
|
||||
--code-tooltip-bg-color: rgba(var(--el-color-primary-rgb), 0.1);
|
||||
--code-tooltip-color: var(--brand-color);
|
||||
}
|
||||
|
||||
2
docs/components.d.ts
vendored
2
docs/components.d.ts
vendored
@ -65,7 +65,9 @@ declare module '@vue/runtime-core' {
|
||||
VpApiFunction: typeof import('./.vitepress/vitepress/components/globals/vp-api-function.vue')['default']
|
||||
VpApiNumber: typeof import('./.vitepress/vitepress/components/globals/vp-api-number.vue')['default']
|
||||
VpApiPrimitive: typeof import('./.vitepress/vitepress/components/globals/vp-api-primitive.vue')['default']
|
||||
VpApiRef: typeof import('./.vitepress/vitepress/components/globals/vp-api-ref.vue')['default']
|
||||
VpApiString: typeof import('./.vitepress/vitepress/components/globals/vp-api-string.vue')['default']
|
||||
VpApiSynthetic: typeof import('./.vitepress/vitepress/components/globals/vp-api-synthetic.vue')['default']
|
||||
VpApiTyping: typeof import('./.vitepress/vitepress/components/globals/vp-api-typing.vue')['default']
|
||||
VpApp: typeof import('./.vitepress/vitepress/components/vp-app.vue')['default']
|
||||
VpChangelog: typeof import('./.vitepress/vitepress/components/globals/vp-changelog.vue')['default']
|
||||
|
||||
@ -37,49 +37,61 @@ autocomplete/remote-search
|
||||
|
||||
:::
|
||||
|
||||
## Autocomplete Attributes
|
||||
## Autocomplete APIs
|
||||
|
||||
| Name | Description | Type | Accepted Values | 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 | string | 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, callback) | — | — |
|
||||
| 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 / false | 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 |
|
||||
### Attributes
|
||||
|
||||
## Autocomplete Slots
|
||||
| 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 |
|
||||
|
||||
### Slots
|
||||
|
||||
| Name | Description |
|
||||
| ------- | --------------------------------------------------------------------- |
|
||||
| — | 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 |
|
||||
|
||||
## Autocomplete Events
|
||||
### Events
|
||||
|
||||
| Name | Description | Parameters |
|
||||
| ------ | ------------------------------------------------ | ------------------------- |
|
||||
| select | triggers when a suggestion is clicked | suggestion being clicked |
|
||||
| change | triggers when the icon inside Input value change | (value: string \| number) |
|
||||
| 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']]" /> |
|
||||
|
||||
## Autocomplete Methods
|
||||
### Instance Exposes
|
||||
|
||||
| Method | Description | Parameters |
|
||||
| ------ | ----------------------- | ---------- |
|
||||
| focus | focus the input element | — |
|
||||
| blur | blur the input element | — |
|
||||
| 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>" /> |
|
||||
|
||||
Loading…
Reference in New Issue
Block a user