vue2组件系列第十八节:Field 输入框

Field输入框绝对是一个高频组件。在我们还没有学习这个组件的时候，就曾经多次用到过这个组件。完全支持Input 标签所有的原生属性，比如 maxlength、placeholder、autofocus 等。Vant为我们定制了多种样式，常见样式基本都收拢起来，总有一款适合你。

准备工作：

1. 创建一个页面: Field.vue
2. 在router.js里配置Field页面的路由

{
 path: '/field',
 name: 'field',
 component: () => import('./views/Field.vue')
 }

1. 在index.vue里添加一项

<a href="javascript:void(0)" @click="$router.push('/field')">
 <van-col span="6" class="marb20">
 <van-icon name="pending-deliver" />
 <div>Field 输入框</div>
 </van-col>
</a>

至今为止呢，我们的首页显示的样式子是这样滴?不知道不觉间我们已经学完了7个组件了！哇噢，为自己欢呼一下吧！如果想看更多的内容，欢迎关注我，每天都有更新哈。

代码演示Field输入框：

基础用法：

普通的一个小示例，只有一个label标签，和一个输入框：

<van-cell-group>
 <van-field 
 v-model="value"
 placeholder="请输入用户名" 
 label="用户名" 
 />
</van-cell-group>

我们还可以给他们增加些修饰，比如在label前面加个icon，在输入框尾部加个icon，还可以点击右侧的icon做一个交互。通常项目里点击icon会弹出一个弹出框，这里我们暂且就toast一个轻提示：

<van-cell-group>
 <van-field 
 v-model="value"
 placeholder="请输入用户名" 
 label="用户名" 
 left-icon="contact"
 icon="question"
 @click-icon="$toast('question')"
 />
</van-cell-group>

错误提示一共有两种，一种是在输入框里显示错误提示，另一种是在输入框下方显示错误提示。在输入框里显示错误提示如下：

<van-cell-group>
 <van-field 
 v-model="value"
 placeholder="请输入用户名" 
 label="用户名" 
 left-icon="contact"
 icon="question"
 @click-icon="$toast('question')"
 error
 />
</van-cell-group>

错误提示在输入框下面展示如下：

<van-cell-group>
 <van-field 
 v-model="value"
 placeholder="请输入用户名" 
 label="用户名" 
 left-icon="contact"
 icon="question"
 @click-icon="$toast('question')"
 error-message="输入不正确噢"
 />
</van-cell-group>

还有一个高频用法，就是发送验证码的用法。这就用到了组件的扩展-slot。slot的值有4个，label，left-icon，icon，button。相当于是代表在4个位置上进行自定义。在DOM里完整的代码如下：

<van-cell-group style="line-height: 60px;">
 <van-field 
 v-model="value"
 placeholder="请输入用户名" 
 label="用户名" 
 left-icon="contact"
 >
 <van-button slot="button" type="primary" size="small">发送验证码</van-button>
 </van-field>
</van-cell-group>

如果有对不齐的情况，可以在浏览器里查看Elements找对应的class，在css样式里进行修改即可。

今天就到这里啦。休息休息一会儿吧?明天继续加油噢！加油