manniu-picker v1.0.3

manniu-picker使用说明

统一弹窗样式墨客地址http://10.241.65.91:8080/app/jE6SYAU6R/storyboard

参数说明

日期格式

使用value-format指定绑定值的格式。

默认情况下，组件接受并返回Date对象。以下为可用的部分格式化字串，其余详细请参考moment： |格式|说明|返回值 |:--:|:--:|:--: |YYYY|四位数字完整表示的年份|如：2014 或 2000 |YY |两位数字表示的年份 | 如：14 或 98 |M |数字表示的月份，没有前导零| 1到12 |MM |数字表示的月份，有前导零| 01到12 |MMM |三个字母缩写表示的月份| Jan到Dec |MMMM |月份，完整的文本格式 |January到December |D |月份中的第几天，没有前导零| 1到31 |DD |月份中的第几天，有前导零| 01到31 |d |星期中的第几天，数字表示|0到6，0表示周日，6表示周六 |ddd| 三个字母表示星期中的第几天| Sun到Sat |dddd |星期几，完整的星期文本 |从Sunday到Saturday |HH |小时，24小时制，有前导零| 00到23 |mm |有前导零的分钟数| 00到59

|ss |有前导零的描述| 01到59

pickerOptions说明

• pickerType：picker
• 其他详细参考：vant Picker

• pickerType：timePicker
• 其他详细参考：vant DatetimePicker

日期选择器

<!-- 日期选择器 -->
    <van-field
      v-model="dateTime"
      picker-type="timePicker"
      label="日期选择"
      placeholder="选择日期"
      input-align="right"
      readonly
      @click="handleDateTime"
    />
    <manniu-picker
      picker-type="timePicker"
      value-format="YYYY-MM-DD"
      :show="showDatePicker"
      :picker-options="{title:'日期选择', type: 'date', minDate: new Date(2020, 0, 1), value: new Date(2022, 10, 11) }"
      @cancel="showDatePicker = false"
      @confirm="confirmDatePicker"
    />

    export default {
    data() {
      return {
        dateTime: '',
        showDatePicker: false,
      };
    },
    methods: {
      // 选择日期
      handleDateTime() {
        this.showDatePicker = true;
      },
      // 确认日期选择
      confirmDatePicker(data) {
        this.showDatePicker = false;
        this.dateTime = data;
      }
    }
  };

普通选择器

<!-- 普通选择器 -->
    <van-field
      v-model="value"
      label="普通选择器"
      placeholder="选择"
      input-align="right"
      readonly
      @click="handlePicker"
    />
    <manniu-picker
      picker-type="picker"
      :show="showPicker"
      :picker-options="{title:'普通选择器',columns:columns"
      @cancel="showPicker = false"
      @confirm="confirmPicker"
    />
    export default {
    data() {
      return {
        value: '',
        showPicker: false,
        columns: [{text: '60',children: [{text: '.4'},{text: '.5'}]},
                  {text: '50',children: [{text: '.4'},{text: '.5'}]}]
      };
    },
    methods: {
      // 选择普通选择器
      handlePicker() {
        this.showPicker = true;
      },
      // 确认选择
      confirmPicker(data) {
        this.showPicker = false;
        console.log('data', data);
      }
    },
  };