question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[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:closed
  • Created 3 years ago
  • Comments:6 (6 by maintainers)

github_iconTop GitHub Comments

1reaction
zymoplasticcommented, Jan 22, 2021

clear 是一个常见需求, 是不是可以考虑加进去, 这个图标的显示通常跟 inputhover 相关, 外部实现不是很方便

hover 的时候 显示 clear 图标是吗?如果用户同时还设置了 suffix 应该是怎么样的一种行为?

并排

0reactions
coolyuantaocommented, Jan 22, 2021
  1. groupform-item功能有一定重叠,建议是不要了
  2. readonly会跟样式挂勾,建议也要
  3. computeCharacterCount这个建议是返回整串字符串
  4. 两个事件仅在icon下生效,clear也要加事件事件。插槽就没必要触发事件了
Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found