javascript/element-plus
1
0
Fork 0
mirror of https://github.com/element-plus/element-plus.git synced 2025-08-18 05:54:28 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(components): [autocomplete] add placeholder prop type definition (#21206)

Browse Source 
* fix(components): [autocomplete] add placeholder prop type definition

* feat(components): [autocomplete] add inputProps and merge properties

* docs: [input] description typo

* feat: explicitly using the `model` & `disabled`

* fix(components): [time-picker] single input name type

* docs: add input attrs link

---------

Co-authored-by: warmthsea <2586244885@qq.com>
This commit is contained in:
yuhengshen
2025-07-03 06:15:53 +08:00
committed by GitHub
parent 1e28b08bcb
commit a579224896
6 changed files with 39 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -51,27 +51,28 @@ autocomplete/custom-loading
### Attributes ### Attributes
| Name | Description | Type | Default | | Name | Description | Type | Default |
| ----------------------------------- | -------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------- | ------------ | | ------------------------------------ | -------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------- | ------------ |
| model-value / v-model | binding value | ^[string] | — | | model-value / v-model | binding value | ^[string] | — |
| placeholder | the placeholder of Autocomplete | ^[string] | — | | placeholder | the placeholder of Autocomplete | ^[string] | — |
| clearable | whether to show clear button | ^[boolean] | false | | clearable | whether to show clear button | ^[boolean] | false |
| disabled | whether Autocomplete is disabled | ^[boolean] | false | | disabled | whether Autocomplete is disabled | ^[boolean] | false |
| value-key | key name of the input suggestion object for display | ^[string] | value | | 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 | ^[Array] / ^[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 | ^[Array] / ^[Function]`(queryString: string, callback: callbackfn) => void` | — |
| 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 | | 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] | — |
| aria-label ^(a11y) ^(2.7.2) | native `aria-label` attribute | ^[string] | — | | aria-label ^(a11y) ^(2.7.2) | native `aria-label` attribute | ^[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-class | custom class name for autocomplete's dropdown | ^[string] | — |
| teleported | whether select dropdown is teleported to the body | ^[boolean] | true | | teleported | whether select dropdown is teleported to the body | ^[boolean] | true |
| append-to ^(2.9.9) | which select dropdown appends to | ^[CSSSelector] / ^[HTMLElement] | — | | append-to ^(2.9.9) | which select dropdown appends to | ^[CSSSelector] / ^[HTMLElement] | — |
| 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 |
| 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 ^(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 |
| [input props](./input.md#attributes) | — | — | — |
### Events ### Events

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

@ -6,12 +6,12 @@ import {
isString, isString,
} from '@element-plus/utils' } from '@element-plus/utils'
import { useTooltipContentProps } from '@element-plus/components/tooltip' import { useTooltipContentProps } from '@element-plus/components/tooltip'
import { useAriaProps } from '@element-plus/hooks'
import { import {
CHANGE_EVENT, CHANGE_EVENT,
INPUT_EVENT, INPUT_EVENT,
UPDATE_MODEL_EVENT, UPDATE_MODEL_EVENT,
} from '@element-plus/constants' } from '@element-plus/constants'
import { inputProps } from '@element-plus/components/input'
import type { ExtractPropTypes } from 'vue' import type { ExtractPropTypes } from 'vue'
import type Autocomplete from './autocomplete.vue' import type Autocomplete from './autocomplete.vue'
@ -30,6 +30,7 @@ export type AutocompleteFetchSuggestions =
| AutocompleteData | AutocompleteData
export const autocompleteProps = buildProps({ export const autocompleteProps = buildProps({
...inputProps,
/** /**
* @description key name of the input suggestion object for display * @description key name of the input suggestion object for display
*/ */
@ -123,25 +124,6 @@ export const autocompleteProps = buildProps({
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,
...useAriaProps(['ariaLabel']),
} as const) } as const)
export type AutocompleteProps = ExtractPropTypes<typeof autocompleteProps> export type AutocompleteProps = ExtractPropTypes<typeof autocompleteProps>

17
packages/components/autocomplete/src/autocomplete.vue
View File

@ -29,12 +29,9 @@
> >
<el-input <el-input
ref="inputRef" ref="inputRef"
v-bind="attrs" v-bind="mergeProps(passInputProps, $attrs)"
:clearable="clearable"
:disabled="disabled"
:name="name"
:model-value="modelValue" :model-value="modelValue"
:aria-label="ariaLabel" :disabled="disabled"
@input="handleInput" @input="handleInput"
@change="handleChange" @change="handleChange"
@focus="handleFocus" @focus="handleFocus"
@ -107,22 +104,23 @@
<script lang="ts" setup> <script lang="ts" setup>
import { import {
computed, computed,
mergeProps,
onBeforeUnmount, onBeforeUnmount,
onMounted, onMounted,
ref, ref,
useAttrs as useRawAttrs, useAttrs as useRawAttrs,
} from 'vue' } from 'vue'
import { debounce } from 'lodash-unified' import { debounce, pick } from 'lodash-unified'
import { onClickOutside } from '@vueuse/core' import { onClickOutside } from '@vueuse/core'
import { Loading } from '@element-plus/icons-vue' import { Loading } from '@element-plus/icons-vue'
import { useAttrs, useId, useNamespace } from '@element-plus/hooks' import { useId, useNamespace } from '@element-plus/hooks'
import { isArray, throwError } from '@element-plus/utils' import { isArray, throwError } from '@element-plus/utils'
import { import {
CHANGE_EVENT, CHANGE_EVENT,
INPUT_EVENT, INPUT_EVENT,
UPDATE_MODEL_EVENT, UPDATE_MODEL_EVENT,
} from '@element-plus/constants' } from '@element-plus/constants'
import ElInput from '@element-plus/components/input' import ElInput, { inputProps } from '@element-plus/components/input'
import ElScrollbar from '@element-plus/components/scrollbar' import ElScrollbar from '@element-plus/components/scrollbar'
import ElTooltip from '@element-plus/components/tooltip' import ElTooltip from '@element-plus/components/tooltip'
import ElIcon from '@element-plus/components/icon' import ElIcon from '@element-plus/components/icon'
@ -143,7 +141,8 @@ defineOptions({
const props = defineProps(autocompleteProps) const props = defineProps(autocompleteProps)
const emit = defineEmits(autocompleteEmits) const emit = defineEmits(autocompleteEmits)
const attrs = useAttrs() const passInputProps = computed(() => pick(props, Object.keys(inputProps)))
const rawAttrs = useRawAttrs() const rawAttrs = useRawAttrs()
const disabled = useFormDisabled() const disabled = useFormDisabled()
const ns = useNamespace('autocomplete') const ns = useNamespace('autocomplete')

6
packages/components/input/src/input.ts
View File

@ -108,7 +108,7 @@ export const inputProps = buildProps({
*/ */
readonly: Boolean, readonly: Boolean,
/** /**
* @description native input readonly * @description whether to show clear button
*/ */
clearable: Boolean, clearable: Boolean,
/** /**
@ -175,6 +175,10 @@ export const inputProps = buildProps({
type: definePropType<HTMLAttributes['inputmode']>(String), type: definePropType<HTMLAttributes['inputmode']>(String),
default: undefined, default: undefined,
}, },
/**
* @description same as `name` in native input
*/
name: String,
} as const) } as const)
export type InputProps = ExtractPropTypes<typeof inputProps> export type InputProps = ExtractPropTypes<typeof inputProps>

1
packages/components/input/src/input.vue
View File

@ -34,6 +34,7 @@
ref="input" ref="input"
:class="nsInput.e('inner')" :class="nsInput.e('inner')"
v-bind="attrs" v-bind="attrs"
:name="name"
:minlength="minlength" :minlength="minlength"
:maxlength="maxlength" :maxlength="maxlength"
:type="showPassword ? (passwordVisible ? 'text' : 'password') : type" :type="showPassword ? (passwordVisible ? 'text' : 'password') : type"

2
packages/components/time-picker/src/common/picker.vue
View File

@ -28,7 +28,7 @@
ref="inputRef" ref="inputRef"
container-role="combobox" container-role="combobox"
:model-value="(displayValue as string)" :model-value="(displayValue as string)"
:name="name" :name="(name as string | undefined)"
:size="pickerSize" :size="pickerSize"
:disabled="pickerDisabled" :disabled="pickerDisabled"
:placeholder="placeholder" :placeholder="placeholder"