mirror of
https://gitee.com/element-plus/element-plus.git
synced 2024-12-15 09:50:58 +08:00
c6bed151a5
* feat(website): init viteperss (#3162) * init vitepress * Finish homepage * relayout page * partial finish * update * update use lang * remove font weight; change font size * docs: optimize docs folder structure * reorganize project * fix ssr issue * fix build issues Co-authored-by: Kevin <sxzz@sxzz.moe> Co-authored-by: zouhang <zouhang@didiglobal.com> * feat(website) integrate with crowdin (#3218) - Introduce Crowdin CLI - Add script for fetching Crowdin token from env - Add script for local development * fix formatting * update codeblocks (#3249) * feat(docs): update website preview script - Update azure preview build script - Eliminate dead links * bootstrap docs * fix homepage layout issue * fix formating * Finish ToC and codepen integration * reorganized files and fix issue that causes demo unavailable after build * feat(docs): migration documentations (#3283) * feat(docs): migration documentations - Move documentations to docs/ * remove unused files * docs: [popconfirm] migrate document (#3285) * feat(docs): migrate documentation from space.md to upload.md (#3292) - Upload documentations acorrodingly * docs: [date-picker] migrate document (#3289) * docs: [date-picker] migrate document * fix: typo * docs: [slider] migrate document (#3287) * docs: migrate documents (#3290) * docs: migrate-datetime-picker * docs: migrate descriptions * docs: migrate dialog * docs: migrate divider * docs: migrate drawer * docs: migrate drapdown * docs: fix drapdown * docs: migrate empty * docs: migrate form * docs: add scoped for style * docs: simplify toRefs * chore: update doc (#3297) * chore: update doc * chore: update doc * chore: update doc * feat(docs): migrate documentations from infinite-scroll to page-header (#3303) - Update docs accordingly - Update CodePen icon to match style - Update component name to match others * docs: migrate documentions (#3293) migrate list: * image * popover * scrollbar * radio * rate * skeleton * select * select-v2 * reault * progress * pagination * chore: update doc (#3305) Co-authored-by: 0song <0song@gmail.com> * Fix broken pipeline * chore: update demo plugin * website perfection * fix hydration bug * docs: update guide (#3342) * WIP docs * docs: update docs * add dark mode * make dev fetch components from local instead of node_modules Co-authored-by: msidolphin <msidolphin@outlook.com> Co-authored-by: Aex <spryti@qq.com> Co-authored-by: 0song <82012629+0song@users.noreply.github.com> Co-authored-by: 0song <0song@gmail.com> Co-authored-by: zouhang <zouhang@didiglobal.com> Co-authored-by: 三咲智子 <sxzz@sxzz.moe> * fix(docs): fix codepen code example issue (#3380) * fix(docs): fix codepen code example issue - Add lang="ts" for all example files - Fix codepen import error * revert changes in resource.vue * feat(docs): complete crowdin integration (#3408) * Update mds for preparing the integration script * deprecate old website * update sponsors and even handler for resize * update build script for preview * fix preview-build error * fix preview-build error * fix preview-build error * fix preview-build error * fix preview-build error * update deploy script and some bugs * Fix existing issue * chore(project): add dev preview workflow * chore(project): rename dev to staging * update the size of toc * update staging-preview script * update preview scripts * enable website build for preview * fix build error * final commitment for update the details * remove azure pipeline * move docs ignores into docs and update date Co-authored-by: Kevin <sxzz@sxzz.moe> Co-authored-by: zouhang <zouhang@didiglobal.com> Co-authored-by: msidolphin <msidolphin@outlook.com> Co-authored-by: Aex <spryti@qq.com> Co-authored-by: 0song <82012629+0song@users.noreply.github.com> Co-authored-by: 0song <0song@gmail.com>
243 lines
20 KiB
Markdown
243 lines
20 KiB
Markdown
# Input
|
||
|
||
Input data using mouse or keyboard.
|
||
|
||
:::warning
|
||
|
||
Input is a controlled component, it **always shows Vue binding value**.
|
||
|
||
Under normal circumstances, `input` event should be handled. Its handler should update component's binding value (or use `v-model`). Otherwise, input box's value will not change.
|
||
|
||
Do not support `v-model` modifiers.
|
||
|
||
:::
|
||
|
||
## Basic usage
|
||
|
||
:::demo
|
||
|
||
input/basic
|
||
|
||
:::
|
||
|
||
## Disabled
|
||
|
||
:::demo Disable the Input with the `disabled` attribute.
|
||
|
||
input/disabled
|
||
|
||
:::
|
||
|
||
## Clearable
|
||
|
||
:::demo Make the Input clearable with the `clearable` attribute.
|
||
|
||
input/clearable
|
||
|
||
:::
|
||
|
||
## Password box
|
||
|
||
:::demo Make a toggle-able password Input with the `show-password` attribute.
|
||
|
||
input/password
|
||
|
||
:::
|
||
|
||
## Input with icon
|
||
|
||
Add an icon to indicate input type.
|
||
|
||
:::demo To add icons in Input, you can simply use `prefix-icon` and `suffix-icon` attributes. Also, the `prefix` and `suffix` named slots works as well.
|
||
|
||
input/with-icon
|
||
|
||
:::
|
||
|
||
## Textarea
|
||
|
||
Resizable for entering multiple lines of text information. Add attribute `type="textarea"` to change `input` into native `textarea`.
|
||
|
||
:::demo Control the height by setting the `rows` prop.
|
||
|
||
input/textarea
|
||
|
||
:::
|
||
|
||
## Autosize Textarea
|
||
|
||
Setting the `autosize` prop for a textarea type of Input makes the height to automatically adjust based on the content. An options object can be provided to `autosize` to specify the minimum and maximum number of lines the textarea can automatically adjust.
|
||
|
||
:::demo
|
||
|
||
input/auto-sizing-textarea
|
||
|
||
:::
|
||
|
||
## Mixed input
|
||
|
||
Prepend or append an element, generally a label or a button.
|
||
|
||
:::demo Use `slot` to distribute elements that prepend or append to Input.
|
||
|
||
input/mixed-input
|
||
|
||
:::
|
||
|
||
## Sizes
|
||
|
||
:::demo Add `size` attribute to change the size of Input. In addition to the default size, there are three other options: `large`, `small` and `mini`.
|
||
|
||
input/various-size
|
||
|
||
:::
|
||
|
||
## Autocomplete
|
||
|
||
You can get some recommended tips based on the current input.
|
||
|
||
:::demo Autocomplete component provides input suggestions. The `fetch-suggestions` attribute is a method that returns suggested input. In this example, `querySearch(queryString, cb)` returns suggestions to Autocomplete via `cb(data)` when suggestions are ready.
|
||
|
||
input/autocomplete
|
||
|
||
:::
|
||
|
||
## Custom template
|
||
|
||
Customize how suggestions are displayed.
|
||
|
||
:::demo Use `scoped slot` to customize suggestion items. In the scope, you can access the suggestion object via the `item` key.
|
||
|
||
input/autocomplete-template
|
||
|
||
:::
|
||
|
||
## Remote search
|
||
|
||
Search data from server-side.
|
||
|
||
:::demo
|
||
|
||
input/remote-search
|
||
|
||
:::
|
||
|
||
## Limit length
|
||
|
||
:::demo `maxlength` and `minlength` attributes of input, they declare a limit on the number of characters a user can input. The "number of characters" is measured using JavaScript string length.Setting the `maxlength` prop for a text or textarea type of Input can limit the length of input value, allows you to show word count by setting `show-word-limit` to `true` at the same time.
|
||
|
||
input/length-limiting
|
||
|
||
:::
|
||
|
||
## Input Attributes
|
||
|
||
| Attribute | Description | Type | Accepted Values | Default |
|
||
| -------------------- | ------------------------------------------------------------------------------------------------------------------------------------ | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------- | ------- |
|
||
| type | type of input | string | text, textarea and other [native input types](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types) | text |
|
||
| modelValue / v-model | binding value | string / number | — | — |
|
||
| maxlength | the max length | string / number | — | — |
|
||
| minlength | same as `minlength` in native input | number | — | — |
|
||
| show-word-limit | whether show word count，only works when `type` is 'text' or 'textarea' | boolean | — | false |
|
||
| placeholder | placeholder of Input | string | — | — |
|
||
| clearable | whether to show clear button | boolean | — | false |
|
||
| show-password | whether to show toggleable password input | boolean | — | false |
|
||
| disabled | whether Input is disabled | boolean | — | false |
|
||
| size | size of Input, works when `type` is not 'textarea' | string | medium / small / mini | — |
|
||
| prefix-icon | prefix icon class | string | — | — |
|
||
| suffix-icon | suffix icon class | string | — | — |
|
||
| rows | number of rows of textarea, only works when `type` is 'textarea' | number | — | 2 |
|
||
| autosize | whether textarea has an adaptive height, only works when `type` is 'textarea'. Can accept an object, e.g. { minRows: 2, maxRows: 6 } | boolean / object | — | false |
|
||
| autocomplete | same as `autocomplete` in native input | string | — | off |
|
||
| name | same as `name` in native input | string | — | — |
|
||
| readonly | same as `readonly` in native input | boolean | — | false |
|
||
| max | same as `max` in native input | — | — | — |
|
||
| min | same as `min` in native input | — | — | — |
|
||
| step | same as `step` in native input | — | — | — |
|
||
| resize | control the resizability | string | none / both / horizontal / vertical | — |
|
||
| autofocus | same as `autofocus` in native input | boolean | — | false |
|
||
| form | same as `form` in native input | string | — | — |
|
||
| label | label text | string | — | — |
|
||
| tabindex | input tabindex | string / number | - | - |
|
||
| validate-event | whether to trigger form validation | boolean | - | true |
|
||
| input-style | the style of the input element or textarea element | object | - | {} |
|
||
|
||
## Input slots
|
||
|
||
| Name | Description |
|
||
| ------- | ----------------------------------------------------------------- |
|
||
| prefix | content as Input prefix, only works when `type` is 'text' |
|
||
| suffix | content as Input suffix, only works when `type` is 'text' |
|
||
| prepend | content to prepend before Input, only works when `type` is 'text' |
|
||
| append | content to append after Input, only works when `type` is 'text' |
|
||
|
||
## Input Events
|
||
|
||
| Event Name | Description | Parameters |
|
||
| ---------- | ---------------------------------------------------------------------- | ------------------------- |
|
||
| blur | triggers when Input blurs | (event: Event) |
|
||
| focus | triggers when Input focuses | (event: Event) |
|
||
| change | triggers only when the input box loses focus or the user presses Enter | (value: string \| number) |
|
||
| input | triggers when the Input value change | (value: string \| number) |
|
||
| clear | triggers when the Input is cleared by clicking the clear button | — |
|
||
|
||
## Input Methods
|
||
|
||
| Method | Description | Parameters |
|
||
| ------ | -------------------------------- | ---------- |
|
||
| focus | focus the input element | — |
|
||
| blur | blur the input element | — |
|
||
| select | select the text in input element | — |
|
||
|
||
## Autocomplete Attributes
|
||
|
||
| Attribute | 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 |
|
||
| icon | icon name | string | — | — |
|
||
| 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 | — | — |
|
||
| prefix-icon | prefix icon class | string | — | — |
|
||
| suffix-icon | suffix icon class | string | — | — |
|
||
| hide-loading | whether to hide the loading icon in remote search | boolean | — | false |
|
||
| popper-append-to-body | 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 |
|
||
| highlight-first-item | whether to highlight first item in remote search suggestions by default | boolean | — | false |
|
||
|
||
## Autocomplete Slots
|
||
|
||
| Name | Description |
|
||
| ------- | ------------------------------- |
|
||
| prefix | content as Input prefix |
|
||
| suffix | content as Input suffix |
|
||
| prepend | content to prepend before Input |
|
||
| append | content to append after Input |
|
||
|
||
## Autocomplete Scoped Slot
|
||
|
||
| Name | Description |
|
||
| ---- | --------------------------------------------------------------------- |
|
||
| — | Custom content for input suggestions. The scope parameter is { item } |
|
||
|
||
## Autocomplete Events
|
||
|
||
| Event 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) |
|
||
|
||
## Autocomplete Methods
|
||
|
||
| Method | Description | Parameters |
|
||
| ------ | ----------------------- | ---------- |
|
||
| focus | focus the input element | — |
|