【Vant Weapp】van-field 输入框

手机号输入框

<van-field
  value="{{ phone }}"
  placeholder="请输入手机号"
  maxlength="11"
  type="number"
  border="{{ false }}"
  bind:change="onChange"
/>

onChange(event) {
  this.setData({
    phone:event.detail
  })
},

 picker选择选项

 

<van-cell-group>
  <van-field label="性别" 
    readonly 
    required
    model:value="{{ name }}" 
    border="{{ false }}" 
    bind:click-input="changeSex" 
    placeholder="请选择性别"/>
  
  <van-popup show="{{ show }}" position="bottom"  bind:close="onClose">
    <van-picker 
      show-toolbar 
      columns="{{ list }}" 
      value-key="sex_name"  
      bind:cancel="onCancel"  
      bind:confirm="onConfirm"/>
  </van-popup>
</van-cell-group>

data:{
    name:"",
    list: [
      {sex_name: "男", id: 5},
      {sex_name: "女", id: 10}
    ],
}

changeSex() {
  this.setData({
    show: true
  });
},

onCancel() {
  this.setData({
    show: false
  });
},

onConfirm(event) {
  this.setData({
    name: event.detail.value.sex_name,
    id: event.detail.value.id,
    show: false
  });
},