Input 输入框

通过鼠标或键盘输入内容，是最基础的表单域的包装。

代码演示

输入框：

<r-input></r-input>

属性

标签label

提供类似于 Metiral Design 的输入体验。

<r-input label="user"></r-input>

占位placeholder

与原生placeholder一致。

<r-input placeholder="user"></r-input>

禁用disabled

通过disabled可以禁用输入框，禁用后该按钮上的事件失效。

<r-input label="user" disabled></r-input>

值value

设置或返回输入框的value属性值。

类型type

目前支持password、number这几种类型，设置后会出现额外的ui控件。

密码输入框

支持密码明文和密文切换。

<r-input icon="lock" type="password"></r-input>

图标icon

可以设置一个icon来表示标签标识。

<r-input icon="user"></r-input>

数字输入框

数字输入框，类似于原生input[type=number]，支持min、max、step属性，支持键盘上下键切换数字。

<r-input type="number" min="-10" max="10" step="0.5"></r-input>

name 属性名

跟 form 组件联动的时候有效，form 提交时收集的字段名字

status 状态

• error

默认色值: #ff4d4f

<r-input status="error"></r-input>

• warning

默认色值: #ff7875

<r-input  status="warning"></r-input>

事件event

常见的回调事件。

onchange

文本改变的时候触发。

<r-input onchange="func(this.value)"></r-input>

const input = document.createElement('r-input');
input.setAttribute('label', 'home');
const func = (e) => {
  console.log(e);
};
input.addEventListener('change', func);

oninput

输入时触发。

const input = document.createElement('r-input');
input.setAttribute('label', 'home');
const func = (e) => {
  console.log(e);
};
input.addEventListener('input', func);

事件的e参数结构