first

node_modules/vant/es/picker/PickerColumn.js

@@ -0,0 +1,349 @@
+import _mergeJSXProps2 from "@vue/babel-helper-vue-jsx-merge-props";
+import _mergeJSXProps from "@vue/babel-helper-vue-jsx-merge-props";
+import { deepClone } from '../utils/deep-clone';
+import { createNamespace, inBrowser, isObject } from '../utils';
+import { range } from '../utils/format/number';
+import { preventDefault, on, off } from '../utils/dom/event';
+import { TouchMixin } from '../mixins/touch';
+var DEFAULT_DURATION = 200; // 惯性滑动思路:
+// 在手指离开屏幕时，如果和上一次 move 时的间隔小于 `MOMENTUM_LIMIT_TIME` 且 move
+// 距离大于 `MOMENTUM_LIMIT_DISTANCE` 时，执行惯性滑动
+
+export var MOMENTUM_LIMIT_TIME = 300;
+export var MOMENTUM_LIMIT_DISTANCE = 15;
+
+var _createNamespace = createNamespace('picker-column'),
+    createComponent = _createNamespace[0],
+    bem = _createNamespace[1];
+
+function getElementTranslateY(element) {
+  var style = window.getComputedStyle(element);
+  var transform = style.transform || style.webkitTransform;
+  var translateY = transform.slice(7, transform.length - 1).split(', ')[5];
+  return Number(translateY);
+}
+
+function isOptionDisabled(option) {
+  return isObject(option) && option.disabled;
+} // use standard WheelEvent:
+// https://developer.mozilla.org/en-US/docs/Web/API/WheelEvent
+
+
+var supportMousewheel = inBrowser && 'onwheel' in window;
+var mousewheelTimer = null;
+export default createComponent({
+  mixins: [TouchMixin],
+  props: {
+    valueKey: String,
+    readonly: Boolean,
+    allowHtml: Boolean,
+    className: String,
+    itemHeight: Number,
+    defaultIndex: Number,
+    swipeDuration: [Number, String],
+    visibleItemCount: [Number, String],
+    initialOptions: {
+      type: Array,
+      default: function _default() {
+        return [];
+      }
+    }
+  },
+  data: function data() {
+    return {
+      offset: 0,
+      duration: 0,
+      options: deepClone(this.initialOptions),
+      currentIndex: this.defaultIndex
+    };
+  },
+  created: function created() {
+    if (this.$parent.children) {
+      this.$parent.children.push(this);
+    }
+
+    this.setIndex(this.currentIndex);
+  },
+  mounted: function mounted() {
+    this.bindTouchEvent(this.$el);
+
+    if (supportMousewheel) {
+      on(this.$el, 'wheel', this.onMouseWheel, false);
+    }
+  },
+  destroyed: function destroyed() {
+    var children = this.$parent.children;
+
+    if (children) {
+      children.splice(children.indexOf(this), 1);
+    }
+
+    if (supportMousewheel) {
+      off(this.$el, 'wheel');
+    }
+  },
+  watch: {
+    initialOptions: 'setOptions',
+    defaultIndex: function defaultIndex(val) {
+      this.setIndex(val);
+    }
+  },
+  computed: {
+    count: function count() {
+      return this.options.length;
+    },
+    baseOffset: function baseOffset() {
+      return this.itemHeight * (this.visibleItemCount - 1) / 2;
+    }
+  },
+  methods: {
+    setOptions: function setOptions(options) {
+      if (JSON.stringify(options) !== JSON.stringify(this.options)) {
+        this.options = deepClone(options);
+        this.setIndex(this.defaultIndex);
+      }
+    },
+    onTouchStart: function onTouchStart(event) {
+      if (this.readonly) {
+        return;
+      }
+
+      this.touchStart(event);
+
+      if (this.moving) {
+        var translateY = getElementTranslateY(this.$refs.wrapper);
+        this.offset = Math.min(0, translateY - this.baseOffset);
+        this.startOffset = this.offset;
+      } else {
+        this.startOffset = this.offset;
+      }
+
+      this.duration = 0;
+      this.transitionEndTrigger = null;
+      this.touchStartTime = Date.now();
+      this.momentumOffset = this.startOffset;
+    },
+    onTouchMove: function onTouchMove(event) {
+      if (this.readonly) {
+        return;
+      }
+
+      this.touchMove(event);
+
+      if (this.direction === 'vertical') {
+        this.moving = true;
+        preventDefault(event, true);
+      }
+
+      this.offset = range(this.startOffset + this.deltaY, -(this.count * this.itemHeight), this.itemHeight);
+      var now = Date.now();
+
+      if (now - this.touchStartTime > MOMENTUM_LIMIT_TIME) {
+        this.touchStartTime = now;
+        this.momentumOffset = this.offset;
+      }
+    },
+    onTouchEnd: function onTouchEnd() {
+      var _this = this;
+
+      if (this.readonly) {
+        return;
+      }
+
+      var distance = this.offset - this.momentumOffset;
+      var duration = Date.now() - this.touchStartTime;
+      var allowMomentum = duration < MOMENTUM_LIMIT_TIME && Math.abs(distance) > MOMENTUM_LIMIT_DISTANCE;
+
+      if (allowMomentum) {
+        this.momentum(distance, duration);
+        return;
+      }
+
+      var index = this.getIndexByOffset(this.offset);
+      this.duration = DEFAULT_DURATION;
+      this.setIndex(index, true); // compatible with desktop scenario
+      // use setTimeout to skip the click event Emitted after touchstart
+
+      setTimeout(function () {
+        _this.moving = false;
+      }, 0);
+    },
+    onMouseWheel: function onMouseWheel(event) {
+      var _this2 = this;
+
+      if (this.readonly) {
+        return;
+      }
+
+      preventDefault(event, true); // simply combine touchstart and touchmove
+
+      var translateY = getElementTranslateY(this.$refs.wrapper);
+      this.startOffset = Math.min(0, translateY - this.baseOffset);
+      this.momentumOffset = this.startOffset;
+      this.transitionEndTrigger = null; // directly use deltaY, see https://caniuse.com/?search=deltaY
+      // use deltaY to detect direction for not special setting device
+      // https://developer.mozilla.org/en-US/docs/Web/API/Element/wheel_event
+
+      var deltaY = event.deltaY;
+
+      if (this.startOffset === 0 && deltaY < 0) {
+        return;
+      } // get offset
+      // if necessary, can adjust distance value to make scrolling smoother
+
+
+      var distance = -deltaY;
+      this.offset = range(this.startOffset + distance, -(this.count * this.itemHeight), this.itemHeight);
+
+      if (mousewheelTimer) {
+        clearTimeout(mousewheelTimer);
+      }
+
+      mousewheelTimer = setTimeout(function () {
+        _this2.onTouchEnd();
+
+        _this2.touchStartTime = 0;
+      }, MOMENTUM_LIMIT_TIME);
+    },
+    onTransitionEnd: function onTransitionEnd() {
+      this.stopMomentum();
+    },
+    onClickItem: function onClickItem(index) {
+      if (this.moving || this.readonly) {
+        return;
+      }
+
+      this.transitionEndTrigger = null;
+      this.duration = DEFAULT_DURATION;
+      this.setIndex(index, true);
+    },
+    adjustIndex: function adjustIndex(index) {
+      index = range(index, 0, this.count);
+
+      for (var i = index; i < this.count; i++) {
+        if (!isOptionDisabled(this.options[i])) return i;
+      }
+
+      for (var _i = index - 1; _i >= 0; _i--) {
+        if (!isOptionDisabled(this.options[_i])) return _i;
+      }
+    },
+    getOptionText: function getOptionText(option) {
+      if (isObject(option) && this.valueKey in option) {
+        return option[this.valueKey];
+      }
+
+      return option;
+    },
+    setIndex: function setIndex(index, emitChange) {
+      var _this3 = this;
+
+      index = this.adjustIndex(index) || 0;
+      var offset = -index * this.itemHeight;
+
+      var trigger = function trigger() {
+        if (index !== _this3.currentIndex) {
+          _this3.currentIndex = index;
+
+          if (emitChange) {
+            _this3.$emit('change', index);
+          }
+        }
+      }; // trigger the change event after transitionend when moving
+
+
+      if (this.moving && offset !== this.offset) {
+        this.transitionEndTrigger = trigger;
+      } else {
+        trigger();
+      }
+
+      this.offset = offset;
+    },
+    setValue: function setValue(value) {
+      var options = this.options;
+
+      for (var i = 0; i < options.length; i++) {
+        if (this.getOptionText(options[i]) === value) {
+          return this.setIndex(i);
+        }
+      }
+    },
+    getValue: function getValue() {
+      return this.options[this.currentIndex];
+    },
+    getIndexByOffset: function getIndexByOffset(offset) {
+      return range(Math.round(-offset / this.itemHeight), 0, this.count - 1);
+    },
+    momentum: function momentum(distance, duration) {
+      var speed = Math.abs(distance / duration);
+      distance = this.offset + speed / 0.003 * (distance < 0 ? -1 : 1);
+      var index = this.getIndexByOffset(distance);
+      this.duration = +this.swipeDuration;
+      this.setIndex(index, true);
+    },
+    stopMomentum: function stopMomentum() {
+      this.moving = false;
+      this.duration = 0;
+
+      if (this.transitionEndTrigger) {
+        this.transitionEndTrigger();
+        this.transitionEndTrigger = null;
+      }
+    },
+    genOptions: function genOptions() {
+      var _this4 = this;
+
+      var h = this.$createElement;
+      var optionStyle = {
+        height: this.itemHeight + "px"
+      };
+      return this.options.map(function (option, index) {
+        var _domProps;
+
+        var text = _this4.getOptionText(option);
+
+        var disabled = isOptionDisabled(option);
+        var data = {
+          style: optionStyle,
+          attrs: {
+            role: 'button',
+            tabindex: disabled ? -1 : 0
+          },
+          class: [bem('item', {
+            disabled: disabled,
+            selected: index === _this4.currentIndex
+          })],
+          on: {
+            click: function click() {
+              _this4.onClickItem(index);
+            }
+          }
+        };
+        var childData = {
+          class: 'van-ellipsis',
+          domProps: (_domProps = {}, _domProps[_this4.allowHtml ? 'innerHTML' : 'textContent'] = text, _domProps)
+        };
+        return h("li", _mergeJSXProps([{}, data]), [_this4.slots('option', option) || h("div", _mergeJSXProps2([{}, childData]))]);
+      });
+    }
+  },
+  render: function render() {
+    var h = arguments[0];
+    var wrapperStyle = {
+      transform: "translate3d(0, " + (this.offset + this.baseOffset) + "px, 0)",
+      transitionDuration: this.duration + "ms",
+      transitionProperty: this.duration ? 'all' : 'none'
+    };
+    return h("div", {
+      "class": [bem(), this.className]
+    }, [h("ul", {
+      "ref": "wrapper",
+      "style": wrapperStyle,
+      "class": bem('wrapper'),
+      "on": {
+        "transitionend": this.onTransitionEnd
+      }
+    }, [this.genOptions()])]);
+  }
+});

node_modules/vant/es/picker/index.css

@@ -0,0 +1 @@
+.van-picker{position:relative;background-color:#fff;-webkit-user-select:none;user-select:none}.van-picker__toolbar{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;height:44px}.van-picker__cancel,.van-picker__confirm{height:100%;padding:0 16px;font-size:14px;background-color:transparent;border:none;cursor:pointer}.van-picker__cancel:active,.van-picker__confirm:active{opacity:.7}.van-picker__confirm{color:#576b95}.van-picker__cancel{color:#969799}.van-picker__title{max-width:50%;font-weight:500;font-size:16px;line-height:20px;text-align:center}.van-picker__columns{position:relative;display:-webkit-box;display:-webkit-flex;display:flex;cursor:grab}.van-picker__loading{position:absolute;top:0;right:0;bottom:0;left:0;z-index:3;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;justify-content:center;color:#1989fa;background-color:rgba(255,255,255,.9)}.van-picker__frame{position:absolute;top:50%;right:16px;left:16px;z-index:2;-webkit-transform:translateY(-50%);transform:translateY(-50%);pointer-events:none}.van-picker__mask{position:absolute;top:0;left:0;z-index:1;width:100%;height:100%;background-image:-webkit-linear-gradient(top,hsla(0,0%,100%,.9),hsla(0,0%,100%,.4)),-webkit-linear-gradient(bottom,hsla(0,0%,100%,.9),hsla(0,0%,100%,.4));background-image:linear-gradient(180deg,hsla(0,0%,100%,.9),hsla(0,0%,100%,.4)),linear-gradient(0deg,hsla(0,0%,100%,.9),hsla(0,0%,100%,.4));background-repeat:no-repeat;background-position:top,bottom;-webkit-transform:translateZ(0);transform:translateZ(0);pointer-events:none}.van-picker-column{-webkit-box-flex:1;-webkit-flex:1;flex:1;overflow:hidden;font-size:16px}.van-picker-column__wrapper{-webkit-transition-timing-function:cubic-bezier(.23,1,.68,1);transition-timing-function:cubic-bezier(.23,1,.68,1)}.van-picker-column__item{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;justify-content:center;padding:0 4px;color:#000}.van-picker-column__item--disabled{cursor:not-allowed;opacity:.3}

node_modules/vant/es/picker/index.js

@@ -0,0 +1,383 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+// Utils
+import { createNamespace } from '../utils';
+import { preventDefault } from '../utils/dom/event';
+import { BORDER_UNSET_TOP_BOTTOM } from '../utils/constant';
+import { pickerProps, DEFAULT_ITEM_HEIGHT } from './shared';
+import { unitToPx } from '../utils/format/unit'; // Components
+
+import Loading from '../loading';
+import PickerColumn from './PickerColumn';
+
+var _createNamespace = createNamespace('picker'),
+    createComponent = _createNamespace[0],
+    bem = _createNamespace[1],
+    t = _createNamespace[2];
+
+export default createComponent({
+  props: _extends({}, pickerProps, {
+    defaultIndex: {
+      type: [Number, String],
+      default: 0
+    },
+    columns: {
+      type: Array,
+      default: function _default() {
+        return [];
+      }
+    },
+    toolbarPosition: {
+      type: String,
+      default: 'top'
+    },
+    valueKey: {
+      type: String,
+      default: 'text'
+    }
+  }),
+  data: function data() {
+    return {
+      children: [],
+      formattedColumns: []
+    };
+  },
+  computed: {
+    itemPxHeight: function itemPxHeight() {
+      return this.itemHeight ? unitToPx(this.itemHeight) : DEFAULT_ITEM_HEIGHT;
+    },
+    dataType: function dataType() {
+      var columns = this.columns;
+      var firstColumn = columns[0] || {};
+
+      if (firstColumn.children) {
+        return 'cascade';
+      }
+
+      if (firstColumn.values) {
+        return 'object';
+      }
+
+      return 'text';
+    }
+  },
+  watch: {
+    columns: {
+      handler: 'format',
+      immediate: true
+    }
+  },
+  methods: {
+    format: function format() {
+      var columns = this.columns,
+          dataType = this.dataType;
+
+      if (dataType === 'text') {
+        this.formattedColumns = [{
+          values: columns
+        }];
+      } else if (dataType === 'cascade') {
+        this.formatCascade();
+      } else {
+        this.formattedColumns = columns;
+      }
+    },
+    formatCascade: function formatCascade() {
+      var formatted = [];
+      var cursor = {
+        children: this.columns
+      };
+
+      while (cursor && cursor.children) {
+        var _cursor$defaultIndex;
+
+        var _cursor = cursor,
+            children = _cursor.children;
+        var defaultIndex = (_cursor$defaultIndex = cursor.defaultIndex) != null ? _cursor$defaultIndex : +this.defaultIndex;
+
+        while (children[defaultIndex] && children[defaultIndex].disabled) {
+          if (defaultIndex < children.length - 1) {
+            defaultIndex++;
+          } else {
+            defaultIndex = 0;
+            break;
+          }
+        }
+
+        formatted.push({
+          values: cursor.children,
+          className: cursor.className,
+          defaultIndex: defaultIndex
+        });
+        cursor = children[defaultIndex];
+      }
+
+      this.formattedColumns = formatted;
+    },
+    emit: function emit(event) {
+      var _this = this;
+
+      if (this.dataType === 'text') {
+        this.$emit(event, this.getColumnValue(0), this.getColumnIndex(0));
+      } else {
+        var values = this.getValues(); // compatible with old version of wrong parameters
+        // should be removed in next major version
+        // see: https://github.com/vant-ui/vant/issues/5905
+
+        if (this.dataType === 'cascade') {
+          values = values.map(function (item) {
+            return item[_this.valueKey];
+          });
+        }
+
+        this.$emit(event, values, this.getIndexes());
+      }
+    },
+    onCascadeChange: function onCascadeChange(columnIndex) {
+      var cursor = {
+        children: this.columns
+      };
+      var indexes = this.getIndexes();
+
+      for (var i = 0; i <= columnIndex; i++) {
+        cursor = cursor.children[indexes[i]];
+      }
+
+      while (cursor && cursor.children) {
+        columnIndex++;
+        this.setColumnValues(columnIndex, cursor.children);
+        cursor = cursor.children[cursor.defaultIndex || 0];
+      }
+    },
+    onChange: function onChange(columnIndex) {
+      var _this2 = this;
+
+      if (this.dataType === 'cascade') {
+        this.onCascadeChange(columnIndex);
+      }
+
+      if (this.dataType === 'text') {
+        this.$emit('change', this, this.getColumnValue(0), this.getColumnIndex(0));
+      } else {
+        var values = this.getValues(); // compatible with old version of wrong parameters
+        // should be removed in next major version
+        // see: https://github.com/vant-ui/vant/issues/5905
+
+        if (this.dataType === 'cascade') {
+          values = values.map(function (item) {
+            return item[_this2.valueKey];
+          });
+        }
+
+        this.$emit('change', this, values, columnIndex);
+      }
+    },
+    // get column instance by index
+    getColumn: function getColumn(index) {
+      return this.children[index];
+    },
+    // @exposed-api
+    // get column value by index
+    getColumnValue: function getColumnValue(index) {
+      var column = this.getColumn(index);
+      return column && column.getValue();
+    },
+    // @exposed-api
+    // set column value by index
+    setColumnValue: function setColumnValue(index, value) {
+      var column = this.getColumn(index);
+
+      if (column) {
+        column.setValue(value);
+
+        if (this.dataType === 'cascade') {
+          this.onCascadeChange(index);
+        }
+      }
+    },
+    // @exposed-api
+    // get column option index by column index
+    getColumnIndex: function getColumnIndex(columnIndex) {
+      return (this.getColumn(columnIndex) || {}).currentIndex;
+    },
+    // @exposed-api
+    // set column option index by column index
+    setColumnIndex: function setColumnIndex(columnIndex, optionIndex) {
+      var column = this.getColumn(columnIndex);
+
+      if (column) {
+        column.setIndex(optionIndex);
+
+        if (this.dataType === 'cascade') {
+          this.onCascadeChange(columnIndex);
+        }
+      }
+    },
+    // @exposed-api
+    // get options of column by index
+    getColumnValues: function getColumnValues(index) {
+      return (this.children[index] || {}).options;
+    },
+    // @exposed-api
+    // set options of column by index
+    setColumnValues: function setColumnValues(index, options) {
+      var column = this.children[index];
+
+      if (column) {
+        column.setOptions(options);
+      }
+    },
+    // @exposed-api
+    // get values of all columns
+    getValues: function getValues() {
+      return this.children.map(function (child) {
+        return child.getValue();
+      });
+    },
+    // @exposed-api
+    // set values of all columns
+    setValues: function setValues(values) {
+      var _this3 = this;
+
+      values.forEach(function (value, index) {
+        _this3.setColumnValue(index, value);
+      });
+    },
+    // @exposed-api
+    // get indexes of all columns
+    getIndexes: function getIndexes() {
+      return this.children.map(function (child) {
+        return child.currentIndex;
+      });
+    },
+    // @exposed-api
+    // set indexes of all columns
+    setIndexes: function setIndexes(indexes) {
+      var _this4 = this;
+
+      indexes.forEach(function (optionIndex, columnIndex) {
+        _this4.setColumnIndex(columnIndex, optionIndex);
+      });
+    },
+    // @exposed-api
+    confirm: function confirm() {
+      this.children.forEach(function (child) {
+        return child.stopMomentum();
+      });
+      this.emit('confirm');
+    },
+    cancel: function cancel() {
+      this.emit('cancel');
+    },
+    genTitle: function genTitle() {
+      var h = this.$createElement;
+      var titleSlot = this.slots('title');
+
+      if (titleSlot) {
+        return titleSlot;
+      }
+
+      if (this.title) {
+        return h("div", {
+          "class": ['van-ellipsis', bem('title')]
+        }, [this.title]);
+      }
+    },
+    genCancel: function genCancel() {
+      var h = this.$createElement;
+      return h("button", {
+        "attrs": {
+          "type": "button"
+        },
+        "class": bem('cancel'),
+        "on": {
+          "click": this.cancel
+        }
+      }, [this.slots('cancel') || this.cancelButtonText || t('cancel')]);
+    },
+    genConfirm: function genConfirm() {
+      var h = this.$createElement;
+      return h("button", {
+        "attrs": {
+          "type": "button"
+        },
+        "class": bem('confirm'),
+        "on": {
+          "click": this.confirm
+        }
+      }, [this.slots('confirm') || this.confirmButtonText || t('confirm')]);
+    },
+    genToolbar: function genToolbar() {
+      var h = this.$createElement;
+
+      if (this.showToolbar) {
+        return h("div", {
+          "class": bem('toolbar')
+        }, [this.slots() || [this.genCancel(), this.genTitle(), this.genConfirm()]]);
+      }
+    },
+    genColumns: function genColumns() {
+      var h = this.$createElement;
+      var itemPxHeight = this.itemPxHeight;
+      var wrapHeight = itemPxHeight * this.visibleItemCount;
+      var frameStyle = {
+        height: itemPxHeight + "px"
+      };
+      var columnsStyle = {
+        height: wrapHeight + "px"
+      };
+      var maskStyle = {
+        backgroundSize: "100% " + (wrapHeight - itemPxHeight) / 2 + "px"
+      };
+      return h("div", {
+        "class": bem('columns'),
+        "style": columnsStyle,
+        "on": {
+          "touchmove": preventDefault
+        }
+      }, [this.genColumnItems(), h("div", {
+        "class": bem('mask'),
+        "style": maskStyle
+      }), h("div", {
+        "class": [BORDER_UNSET_TOP_BOTTOM, bem('frame')],
+        "style": frameStyle
+      })]);
+    },
+    genColumnItems: function genColumnItems() {
+      var _this5 = this;
+
+      var h = this.$createElement;
+      return this.formattedColumns.map(function (item, columnIndex) {
+        var _item$defaultIndex;
+
+        return h(PickerColumn, {
+          "attrs": {
+            "readonly": _this5.readonly,
+            "valueKey": _this5.valueKey,
+            "allowHtml": _this5.allowHtml,
+            "className": item.className,
+            "itemHeight": _this5.itemPxHeight,
+            "defaultIndex": (_item$defaultIndex = item.defaultIndex) != null ? _item$defaultIndex : +_this5.defaultIndex,
+            "swipeDuration": _this5.swipeDuration,
+            "visibleItemCount": _this5.visibleItemCount,
+            "initialOptions": item.values
+          },
+          "scopedSlots": {
+            option: _this5.$scopedSlots.option
+          },
+          "on": {
+            "change": function change() {
+              _this5.onChange(columnIndex);
+            }
+          }
+        });
+      });
+    }
+  },
+  render: function render(h) {
+    return h("div", {
+      "class": bem()
+    }, [this.toolbarPosition === 'top' ? this.genToolbar() : h(), this.loading ? h(Loading, {
+      "class": bem('loading')
+    }) : h(), this.slots('columns-top'), this.genColumns(), this.slots('columns-bottom'), this.toolbarPosition === 'bottom' ? this.genToolbar() : h()]);
+  }
+});

node_modules/vant/es/picker/index.less

@@ -0,0 +1,117 @@
+@import '../style/var';
+
+.van-picker {
+  position: relative;
+  background-color: @picker-background-color;
+  user-select: none;
+
+  &__toolbar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: @picker-toolbar-height;
+  }
+
+  &__cancel,
+  &__confirm {
+    height: 100%;
+    padding: @picker-action-padding;
+    font-size: @picker-action-font-size;
+    background-color: transparent;
+    border: none;
+    cursor: pointer;
+
+    &:active {
+      opacity: @active-opacity;
+    }
+  }
+
+  &__confirm {
+    color: @picker-confirm-action-color;
+  }
+
+  &__cancel {
+    color: @picker-cancel-action-color;
+  }
+
+  &__title {
+    max-width: 50%;
+    font-weight: @font-weight-bold;
+    font-size: @picker-title-font-size;
+    line-height: @picker-title-line-height;
+    text-align: center;
+  }
+
+  &__columns {
+    position: relative;
+    display: flex;
+    cursor: grab;
+  }
+
+  &__loading {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 3;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: @picker-loading-icon-color;
+    background-color: @picker-loading-mask-color;
+  }
+
+  &__frame {
+    position: absolute;
+    top: 50%;
+    right: @padding-md;
+    left: @padding-md;
+    z-index: 2;
+    transform: translateY(-50%);
+    pointer-events: none;
+  }
+
+  &__mask {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 1;
+    width: 100%;
+    height: 100%;
+    background-image: linear-gradient(
+        180deg,
+        hsla(0, 0%, 100%, 0.9),
+        hsla(0, 0%, 100%, 0.4)
+      ),
+      linear-gradient(0deg, hsla(0, 0%, 100%, 0.9), hsla(0, 0%, 100%, 0.4));
+    background-repeat: no-repeat;
+    background-position: top, bottom;
+    // fix rendering failure during animation on safari
+    transform: translateZ(0);
+    pointer-events: none;
+  }
+
+  &-column {
+    flex: 1;
+    overflow: hidden;
+    font-size: @picker-option-font-size;
+
+    &__wrapper {
+      transition-timing-function: cubic-bezier(0.23, 1, 0.68, 1);
+    }
+
+    &__item {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 0 @padding-base;
+      color: @picker-option-text-color;
+
+      &--disabled {
+        cursor: not-allowed;
+        opacity: @picker-option-disabled-opacity;
+      }
+    }
+  }
+}

node_modules/vant/es/picker/shared.js

@@ -0,0 +1,22 @@
+export var DEFAULT_ITEM_HEIGHT = 44;
+export var pickerProps = {
+  title: String,
+  loading: Boolean,
+  readonly: Boolean,
+  itemHeight: [Number, String],
+  showToolbar: Boolean,
+  cancelButtonText: String,
+  confirmButtonText: String,
+  allowHtml: {
+    type: Boolean,
+    default: true
+  },
+  visibleItemCount: {
+    type: [Number, String],
+    default: 6
+  },
+  swipeDuration: {
+    type: [Number, String],
+    default: 1000
+  }
+};

node_modules/vant/es/picker/style/index.js

@@ -0,0 +1,3 @@
+import '../../style/base.css';
+import '../../loading/index.css';
+import '../index.css';

node_modules/vant/es/picker/style/less.js

@@ -0,0 +1,3 @@
+import '../../style/base.less';
+import '../../loading/index.less';
+import '../index.less';