manniu-picker使用说明

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

参数说明

|参数|说明|类型|默认值|可选值 |:--:|:--:|:--:|:--:|:--: |pickerType|弹窗类型|String|picker|picker:选择器弹窗 timePicker:时间选择器弹窗 |show|弹窗是否显示|Boolean|false|true:显示 false:隐藏 |valueFormat|日期组件返回值格式化|String|无|见日期格式 |pickerOptions|vant Picker组件和DatetimePicker接受的props|Object|无|见官方文档或下方pickerOptions说明

日期格式

使用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

|参数|说明|类型|默认值| |:--:|:--:|:--:|:--:|:--: |columns| 对象数组，配置每一列显示的数据| Column[]| [] |title |顶部栏标题 string - |confirm-button-text| 确认按钮文字 |string |确认 |cancel-button-text| 取消按钮文字 |string |取消 |value-key |选项对象中，选项文字对应的键名 |string |text |toolbar-position |顶部栏位置，可选值为bottom |string |top |loading |是否显示加载状态| boolean false |readonly v2.10.5 |是否为只读状态，只读状态下无法切换选项| boolean |false |show-toolbar |是否显示顶部栏| boolean |false |allow-html |是否允许选项内容中渲染 HTML| boolean |true |default-index |单列选择时，默认选中项的索引 |number | string| 0 |item-height v2.8.6 |选项高度，支持 px vw rem 单位，默认 px| number/string |44 |visible-item-count |可见的选项个数 number | string| 6 |swipe-duration |快速滑动时惯性滚动的时长，单位 ms |number/string| 1000

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

|参数|说明|类型|默认值| |:--:|:--:|:--:|:--:|:--: |type |时间类型，可选值为 date time year-month month-day datehour |string |datetime |title |顶部栏标题 |string |'' |confirm-button-text |确认按钮文字 |string |确认 |cancel-button-text |取消按钮文字 |string |取消 |show-toolbar |是否显示顶部栏 |boolean |true |loading| 是否显示加载状态| boolean| false |readonly v2.10.5 |是否为只读状态，只读状态下无法切换选项 |boolean| false |filter |选项过滤函数 |(type, vals) => vals| - |formatter| 选项格式化函数| (type, val) => val| - |columns-order v2.9.2| 自定义列排序数组, 子项可选值为 year、month、day、hour、minute |string[]| - |item-height v2.8.6 |选项高度，支持 px vw rem 单位，默认 px number | string|44 |visible-item-count |可见的选项个数 |number | string| 6 |swipe-duration |快速滑动时惯性滚动的时长，单位ms number | string |1000

日期选择器

<!-- 日期选择器 -->
    <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);
      }
    },
  };