manniu-uikit-common-picker

控件支持的组件选项类型

  const CONSTANT_COMPONENT_TYPE = {
    HEART_RATE: 'HEART_RATE', //心率
    BLOOD_PRESSURE: 'BLOOD_PRESSURE', //血压
    SWIMMING_TIME: 'SWIMMING_TIME', //游泳时长
    EDUCATION: 'EDUCATION', //学历
    GENDER: 'GENDER', //性别
    RELATIONSHIP: 'RELATIONSHIP', //亲属关系
    PREGNANCY_PLANNING: 'PREGNANCY_PLANNING', //备孕计划
    LATELY_DAYS: 'LATELY_DAYS', //最近天数
    HEIGHT: 'HEIGHT', //身高
    WEIGHT: 'WEIGHT', //体重
    FAT_RATE: 'FAT_RATE', //体脂率
    HIPLINE: 'HIPLINE', //臀围
    TEMPERATURE: 'TEMPERATURE', //体温
    BLOOD_GLUCOSE: 'BLOOD_GLUCOSE', //血糖
    BMI: 'BMI', //体重指数
  }

效果展示

单列控件样式效果
双列控件样式效果

代码示例

• 页面引入组件并添加监听事件

  <!-- 通用选择器 -->
  <common-picker
    ref="common-picker"
    @confirm="pickerConfirm"
    @cancel="onPickerCancel"
    @change="onPickerChange"
  />

• 页面点击选择控件

  <van-field
    v-model="formParams.heart_rate"
    label="心率"
    placeholder="请选择心率"
    input-align="right"
    readonly
    @click="handleChoosePicker('HEART_RATE','heart_rate')"
  />

• 监听事件及代码处理

  // 选择控件
  handleChoosePicker(type, key) {
    this.$refs['common-picker'].handleChoosePicker(type, key);
  // this.$refs['common-picker'].chooseItem({
  //   type:type,
  //   extraData:{
  //     key,
  //   }
  // });
  },
  // 确认
  pickerConfirm(data) {
    console.log(data);
    const value = data.combinedValue;
    const key = data.extraData.key;
    this.formParams[key] = value;
  },
  onPickerChange(data) {
    console.log(data);
  },
  onPickerCancel(data) {
    console.log(data);
  },

• 代码说明
  ① handleChoosePicker(type, key) 方法接收两个参数，参数一表示选择的控件类型枚举值，参数二用于用户自定义数据，在点击确认后，将会原值返回回来
  ② pickerConfirm(data) 监听确认方法，方法返回数据格式如下

  单列格式

  {
    pickData: [{ text: 20, value: 20 }, 0],
    combinedValue: 20,
    type: 'HEART_RATE',
    extraData: { key: 'heart_rate' },
  }

  双列格式

  {
    pickData: [
      [
        { text: 0, value: 0 },
        { text: '.0', value: 0 },
      ],
      [0, 0],
    ],
    combinedValue: '0.0',
    type: 'HEIGHT',
    extraData: { key: 'height' },
  }

  其中 pickData 字段为vant组件返回的数据 ，combinedValue为选择的多列的字段值按照 '.' 拼接起来的值，type值为控件类型枚举值，extraData为用户传递的自定义数据