[comp: input] add input, textarea components
See original GitHub issue- I have searched the issues of this repository and believe that this is not a duplicate.
What problem does this feature solve?
- 需要用户输入表单域内容时。
- 提供组合型输入框,带搜索的输入框,还可以进行大小选择。
What does the proposed API look like?
ix-input
Props
除以下表格之外还支持原生
input
元素的所有属性。
名称 | 说明 | 类型 | 默认值 | 全局配置 | 备注 |
---|---|---|---|---|---|
v-model:value |
控件值 | string |
- | - | - |
control |
控件控制器 | string|AbstractContro |
- | - | 当存在 control 时, 控件将由 AbstractControl 完全控制,此时 value 会失效 |
disabled |
是否禁用状态 | boolean |
false |
- | - |
addonAfter |
设置后置标签 | string|v-slot:addonAfter |
- | - | - |
addonBefore |
设置前置标签 | string|v-slot:addonBefore |
- | - | - |
suffix |
设置后缀图标 | string|v-slot:suffix |
- | - | - |
prefix |
设置前缀图标 | string|v-slot:prefix |
- | - | - |
size |
设置大小 | large|medium|small |
medium |
✅ | - |
allowClear |
是否清除图标 | boolean |
false |
✅ | - |
borderless |
是否显示边框 | boolean |
false |
✅ | - |
Emits
名称 | 说明 | 参数类型 | 备注 |
---|---|---|---|
suffixClick |
后缀图标被点击 | (value:string, evt: MouseEvent) => void |
- |
prefixClick |
前缀图标被点击 | (value:string, evt: MouseEvent) => void |
- |
afterClear |
清除图标被点击后的回调 | (evt: MouseEvent) => void |
- |
ix-textarea
TextareaProps
除以下表格之外还支持原生
textarea
元素的所有属性。
名称 | 说明 | 类型 | 默认值 | 全局配置 | 备注 |
---|---|---|---|---|---|
v-model:value |
控件值 | string |
- | - | - |
control |
控件控制器 | `string | AbstractControl` | - | - |
autoRows |
是否显示自适应 rows |
boolean|{ minRows: number, maxRows: number } |
false |
✅ | - |
showCharacterCount |
是否展示字符数 | boolean |
false |
✅ | - |
maxCharacterCount |
数字提示显示的最大值 | number|string |
- | ✅ | 仅用于提示,不做校验控制 |
computeCharacterCount |
自定义计算 characterCount 的函数 |
(v: string) => string |
- | ✅ | 优先级高于 maxCharacterCount |
Issue Analytics
- State:
- Created 3 years ago
- Comments:6 (6 by maintainers)
Top Results From Across the Web
The Textarea element - HTML: HyperText Markup Language
This Boolean attribute lets you specify that a form control should have input focus when the page loads. Only one form-associated element in...
Read more >Text area - Examples - Components
A text area that shows all user input at once. Overflow text wraps onto a new line and expands the text area. Auto....
Read more >KendoReact TextArea Overview
The TextArea component is part of the KendoReact Inputs component library. The procedures for installing, importing, and using all components in the library ......
Read more >Creating a generic text-input component with React.
Now, we will make a text-input field: TextInput . This component will: Accept initial value and configs from the developer and register itself...
Read more >How to Use a Multiline Text Area in ReactJS
To make a textarea in React, use the input tag. Below is a simple example of this. 1import React, { Component } from...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
并排
group
跟form-item
功能有一定重叠,建议是不要了readonly
会跟样式挂勾,建议也要computeCharacterCount
这个建议是返回整串字符串clear
也要加事件事件。插槽就没必要触发事件了