输入框 Input

用户可控制是否显示输入框标题，是否出现清除按钮，还可以自定义 Input 组件的右边部分（传入 ），实现自定义按钮、验证码输入框等。

Input的标题部分是通过 label 属性来实现，你还可以通过placeholder 来显示自定义的占位文本。

对齐方式

根据具体需求，选择最佳的标签对齐方式（输入框标题和输入框部分）。

label-layout 默认值是 left ，即输入框标题在 label-width 设置的范围内居左显示。值为 right 时，输入框标题居右显示。

示例代码

<l-input label="名称" label-layout="left" label-width="170"  />
<l-input label="名称" label-layout="right" label-width="170"  />

输入框类型

输入框类型的可选值有 text 、idcard 、 、number、digit ，可根据不同的场景选择。

示例代码

当我们设置 clear 为 true 时，并且当输入框输入内容后，会显示 清除按钮 ，我们可以通过点击它来清除文本内容。

设置必选项

示例代码

<l-input label="必填" placeholder="这里是必填项" />

设置校验规则

设置表单校验是为了在防止用户犯错的前提下，尽可能让用户更早地发现并纠正错误，我们可以通过 rules 属性来设置相对应的校验规则。

示例代码

<l-input label="银行卡号" placeholder="请输入代理商的银行卡号" />

当我们需要讲表单项禁用时，设置 为 true 即可。

自定义Input组件右边部分

通过 <slot> 的方式可以自定义Input 组件的右边部分，实现自定义按钮、验证码输入框等。另外需要注意的是传入进去的slot需要制定他的slot属性的值为right

示例代码

<l-input label="验证码"  label-layout="left"  placeholder="请输入验证码" >
    <img slot="right" src="path/to/img.png">
</l-input>

自定义Input组件左边(label)部分

通过 <slot> 的方式可以自定义Input 组件的label部分，实现带图标的输入框等。

示例代码

<l-input  placeholder="请输入邮箱" >
    <view class="email" slot="left">
        <img src="path/to/email.png">
        <text>邮箱：</text>

表单项事件 (表单项 Events）