微信小程序Vant组件输入框与选择器的组合使用

在开发过程中使用第三方组件能够快速帮助我们搭建页面。Vant官网，如果你还没接触过Vant，可以看一下官方的介绍，并进行安装使用。

步入正题，今天我就讲一下Vant的输入框与选择器的组合使用方法。

效果就像下图，当点击选择性别时，弹出选择器。


首先，在App.json文件中，需要引入的组件包括：输入框、弹出层、选择器。

"usingComponents":{
    
    
   "van-field": "vant-weapp/field/index",
    "van-picker": "vant-weapp/picker/index",
    "van-popup": "vant-weapp/popup/index"
},

上面路径需要根据你自己的Vant组件所放位置进行编写。

首先，使用Vant的输入框，你需要知道的是，这个输入框同样只是一个输入框，在提交数据的时候，还是使用的form表单进行提交。
为了保持选择性别那一项的样式与其他输入框样式相同，我们依然使用输入框组件，但是需要把此输入框写为只读输入框，也就是不能够输入内容。点击此输入框能够弹出选择器，只要给此输入框外加一层view进行点击事件，因为Vant输入框没有单纯的点击事件。

wxml代码：

<form bindsubmit="submitNewStuInfo">
<van-cell-group>
  <van-field
    name="stuName"
    required
    clearable
    label="姓名"
    title-width="3em"
    placeholder="请输入姓名"
  />

  <van-field
    name="stuClass"
    label="班级"
    title-width="3em"
    placeholder="如:'18计算机8班'"
    required
    clearable
  />
  <view bindtap="showPopup">
   <van-field
    label="性别"
    title-width="3em"
    placeholder="选择性别"
    value="{
    
    {gender}}"
    required
    readonly
  />
  </view>
  <van-field
    name="phone"
    label="手机号"
    type="number"
    maxlength="11"
    title-width="3em"
    placeholder="本人手机号码"
    required
    clearable
  />
  <van-field
    name="authCode"
    label="验证码"
    type="number"
    maxlength="6"
    title-width="3em"
    placeholder="报名现场实时显示"
    required
    clearable
  />
</van-cell-group>
<van-popup show="{
    
    { show }}" bind:close="onClose"  position="bottom"
  custom-style="height: 40%">
    <van-picker title="选择性别" show-toolbar columns="{
    
    { columns }}"  bind:cancel="onClose"
  bind:confirm="onConfirm"/>
</van-popup>
 <button class="button" disabled="{
    
    {disabled}}" form-type="submit">立即注册</button>
</form>

你可以看到在van-field里面有很多属性，这些属性可以根据你自己的需求进行修改。
Vant官网对输入框属性的介绍：

当然除了这些还有很多，你可以去Vant网站进行查看。

js代码:

data: {
    
    
   show:false,     //控制弹出层是否弹出的值
   columns: ['男','女'],   //选择器中的值
   gender:''        //选择性别之后的值进行页面显示
 },
 showPopup(e){
    
          //点击选择性别，打开弹出层（选择器）
      this.setData({
    
    show:true})
    },
 onClose() {
    
         //点击空白处开闭弹出层（选择器）及选择器左上角的取消
    this.setData({
    
     show: false });
  },
 onConfirm(e){
    
        //选择器右上角的确定，点击确定获取值
   this.setData({
    
    
     gender:e.detail.value,
     show:false
   })
 },
submitNewStuInfo(e){
    
    
	//表单输入框提交的内容包含在e参数中
}

以上就是输入框与选择器的组合使用。

如果你的选择器需要多列值，你可以对选择器进行修改。

用第三方组件，完全不需要wxss用来修饰组件。确实很方便！

扫描二维码关注公众号，回复： 12910901 查看本文章

有问题可以下方留言~