输入框 Input

基于原生组件Input封装，用于接收单行文本，支持文本、密码、数字、身份证等类型的输入。

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

基础案例

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

示例代码

<l-input label="用户名"  placeholder="请输入用户名"  />
<l-input label="密码"  placeholder="请输入密码"  />

对齐方式

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

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

另外，我们还可以通过 label-width 来设置标题部分的宽度，默认是200，单位是rpx。

示例代码

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

隐藏表单标题

在不需要显示左侧表单标题时候，可以设置hideLabel=”true”将左侧表单标题隐藏。

示例代码

<l-input label="标题"  placeholder="这里没有隐藏标题" />
<l-input placeholder="这里隐藏了标题" hide-label="{{true}}"  />

输入框类型

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

示例代码

<l-input label="数字" type="number" placeholder="请输入数字" />

清除按钮

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

示例代码

<l-input label="清除按钮" clear="{{true}}" />

设置必选项

输入框要显示必填图标，设置 required 为 true 即可。这里只是显示必填图标 * ，不会自动判断是否输入内容，如果需要判断输入内容，请查看设置校验规则部分。

示例代码

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

设置校验规则

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

示例代码

<l-input label="银行卡号" placeholder="请输入代理商的银行卡号" required="{{true}}" rules="{{cardRule}}" />

data:{
    cardRule:[{
        required: true
      },{
        type: 'number',
        min: 16,
        max: 19,
        message: "长度在16-19之间"
    }]
}

设置禁用

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

示例代码

<l-input label="禁用"  disabled="{{true}}"  placeholder="禁止输入" />

自定义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>
    </view>
</l-input>

表单项属性（Input Attributes）

表单项外部样式类（Input ExternalClasses）

已经弃用的外部样式类

以下这些外部样式类已经停止支持，将在未来的某个版本中去除，请使用上方的外部样式类替代。

表单项事件 (表单项 Events）