小程序vant weapp 封装下拉框

此文编写于2021-9-14，2022-5-2官方以提供area组件

Vant Weapp 官方已提供 省市区组件@vant/weapp/area/index

---

 

封装下拉框：

xml：

<van-field label="{{label}}" model:value="{{ value }}" placeholder="{{place}}" border="{{ true }}" readonly
  right-icon="{{icon}}" bindtap="tap" />
<van-popup show="{{ popShow }}" position="bottom" custom-style="height: 50%;overflow:hidden">
  <van-picker value-key="{{valueKeyName}}" id="picker" show-toolbar title="{{label}}" columns="{{ columns }}" bind:cancel="onCancel" bind:confirm="onConfirm" />
</van-popup>

js：

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    label: String, //输入框标签
    place: String, //输入框提示
    columns:Array, //选择器 选项
    valueKeyName:{ //选择器 选项数组中 对象的value的默认key
      type:String,
      value:'text'
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    popShow: false,
    icon:'arrow-down'  //下拉箭头
  },

  /**
   * 组件的方法列表
   */
  methods: {
    //点击输入框触发
    tap() {
      this.setData({
        popShow: true,
        icon:'arrow-up'
      })
    },
    //点击取消
    onCancel() {
      this.setData({
        popShow: false,
        icon:'arrow-down'
      })
    },
    点击确认
    onConfirm(e) {
      let pic, value
      pic = this.selectComponent('#picker')
      //获取当前选中项的值  改值为对象
      value = pic.getValues()
      this.setData({
        value: value[0][this.data.valueKeyName],  //设置输入框为选择器选中的值
      })
      this.triggerEvent('confirm', {  //传递到组件外事件 ， 返回当前选中项 对象
        value: value[0]
      })
      this.onCancel()
    }
  }
})

 呈现效果：

注释：label属性是左边那个'选择区域'，placeholder 是 '输入提示'，border 是内边框，readonly 输入框只读.  van-popup 弹窗 里面放入了一个选择器，value-key 接收columns的对象数组中的对象中要显示的value的默认key [ vant默认为text ]

使用该组件：

<select-popup label="选择区域" place="请选择区域" columns="{{list}}" bind:confirm="getIndex" valueKeyName="name"></select-popup>

 js：

Page({

  /**
   * 页面的初始数据
   */
  data: {
    list:[
      {code:'001',name:'武汉'},
      {code:'002',name:'南京'},
      {code:'003',name:'北京'},
      {code:'004',name:'西安'}]
  },

  getIndex(e){
    //打印选中项
    console.log(e.detail.value);
  },

})

打印结果：

注意:  在app.json或index.json中引入组件