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

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

@ -52,7 +52,7 @@ autocomplete/custom-loading
### Attributes
| 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 |
@ -72,6 +72,7 @@ autocomplete/custom-loading
| 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 |
| 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

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

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

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

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

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

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

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

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

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

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