first
This commit is contained in:
366
node_modules/vant/lib/picker/PickerColumn.js
generated
vendored
Normal file
366
node_modules/vant/lib/picker/PickerColumn.js
generated
vendored
Normal file
@ -0,0 +1,366 @@
|
||||
"use strict";
|
||||
|
||||
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
||||
|
||||
exports.__esModule = true;
|
||||
exports.default = exports.MOMENTUM_LIMIT_DISTANCE = exports.MOMENTUM_LIMIT_TIME = void 0;
|
||||
|
||||
var _babelHelperVueJsxMergeProps = _interopRequireDefault(require("@vue/babel-helper-vue-jsx-merge-props"));
|
||||
|
||||
var _deepClone = require("../utils/deep-clone");
|
||||
|
||||
var _utils = require("../utils");
|
||||
|
||||
var _number = require("../utils/format/number");
|
||||
|
||||
var _event = require("../utils/dom/event");
|
||||
|
||||
var _touch = require("../mixins/touch");
|
||||
|
||||
var DEFAULT_DURATION = 200; // 惯性滑动思路:
|
||||
// 在手指离开屏幕时,如果和上一次 move 时的间隔小于 `MOMENTUM_LIMIT_TIME` 且 move
|
||||
// 距离大于 `MOMENTUM_LIMIT_DISTANCE` 时,执行惯性滑动
|
||||
|
||||
var MOMENTUM_LIMIT_TIME = 300;
|
||||
exports.MOMENTUM_LIMIT_TIME = MOMENTUM_LIMIT_TIME;
|
||||
var MOMENTUM_LIMIT_DISTANCE = 15;
|
||||
exports.MOMENTUM_LIMIT_DISTANCE = MOMENTUM_LIMIT_DISTANCE;
|
||||
|
||||
var _createNamespace = (0, _utils.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 (0, _utils.isObject)(option) && option.disabled;
|
||||
} // use standard WheelEvent:
|
||||
// https://developer.mozilla.org/en-US/docs/Web/API/WheelEvent
|
||||
|
||||
|
||||
var supportMousewheel = _utils.inBrowser && 'onwheel' in window;
|
||||
var mousewheelTimer = null;
|
||||
|
||||
var _default2 = createComponent({
|
||||
mixins: [_touch.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: (0, _deepClone.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) {
|
||||
(0, _event.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) {
|
||||
(0, _event.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 = (0, _deepClone.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;
|
||||
(0, _event.preventDefault)(event, true);
|
||||
}
|
||||
|
||||
this.offset = (0, _number.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;
|
||||
}
|
||||
|
||||
(0, _event.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 = (0, _number.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 = (0, _number.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 ((0, _utils.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 (0, _number.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", (0, _babelHelperVueJsxMergeProps.default)([{}, data]), [_this4.slots('option', option) || h("div", (0, _babelHelperVueJsxMergeProps.default)([{}, 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()])]);
|
||||
}
|
||||
});
|
||||
|
||||
exports.default = _default2;
|
1
node_modules/vant/lib/picker/index.css
generated
vendored
Normal file
1
node_modules/vant/lib/picker/index.css
generated
vendored
Normal file
@ -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}
|
399
node_modules/vant/lib/picker/index.js
generated
vendored
Normal file
399
node_modules/vant/lib/picker/index.js
generated
vendored
Normal file
@ -0,0 +1,399 @@
|
||||
"use strict";
|
||||
|
||||
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
||||
|
||||
exports.__esModule = true;
|
||||
exports.default = void 0;
|
||||
|
||||
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
||||
|
||||
var _utils = require("../utils");
|
||||
|
||||
var _event = require("../utils/dom/event");
|
||||
|
||||
var _constant = require("../utils/constant");
|
||||
|
||||
var _shared = require("./shared");
|
||||
|
||||
var _unit = require("../utils/format/unit");
|
||||
|
||||
var _loading = _interopRequireDefault(require("../loading"));
|
||||
|
||||
var _PickerColumn = _interopRequireDefault(require("./PickerColumn"));
|
||||
|
||||
// Utils
|
||||
// Components
|
||||
var _createNamespace = (0, _utils.createNamespace)('picker'),
|
||||
createComponent = _createNamespace[0],
|
||||
bem = _createNamespace[1],
|
||||
t = _createNamespace[2];
|
||||
|
||||
var _default2 = createComponent({
|
||||
props: (0, _extends2.default)({}, _shared.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 ? (0, _unit.unitToPx)(this.itemHeight) : _shared.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": _event.preventDefault
|
||||
}
|
||||
}, [this.genColumnItems(), h("div", {
|
||||
"class": bem('mask'),
|
||||
"style": maskStyle
|
||||
}), h("div", {
|
||||
"class": [_constant.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.default, {
|
||||
"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.default, {
|
||||
"class": bem('loading')
|
||||
}) : h(), this.slots('columns-top'), this.genColumns(), this.slots('columns-bottom'), this.toolbarPosition === 'bottom' ? this.genToolbar() : h()]);
|
||||
}
|
||||
});
|
||||
|
||||
exports.default = _default2;
|
117
node_modules/vant/lib/picker/index.less
generated
vendored
Normal file
117
node_modules/vant/lib/picker/index.less
generated
vendored
Normal file
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
28
node_modules/vant/lib/picker/shared.js
generated
vendored
Normal file
28
node_modules/vant/lib/picker/shared.js
generated
vendored
Normal file
@ -0,0 +1,28 @@
|
||||
"use strict";
|
||||
|
||||
exports.__esModule = true;
|
||||
exports.pickerProps = exports.DEFAULT_ITEM_HEIGHT = void 0;
|
||||
var DEFAULT_ITEM_HEIGHT = 44;
|
||||
exports.DEFAULT_ITEM_HEIGHT = DEFAULT_ITEM_HEIGHT;
|
||||
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
|
||||
}
|
||||
};
|
||||
exports.pickerProps = pickerProps;
|
3
node_modules/vant/lib/picker/style/index.js
generated
vendored
Normal file
3
node_modules/vant/lib/picker/style/index.js
generated
vendored
Normal file
@ -0,0 +1,3 @@
|
||||
require('../../style/base.css');
|
||||
require('../../loading/index.css');
|
||||
require('../index.css');
|
3
node_modules/vant/lib/picker/style/less.js
generated
vendored
Normal file
3
node_modules/vant/lib/picker/style/less.js
generated
vendored
Normal file
@ -0,0 +1,3 @@
|
||||
require('../../style/base.less');
|
||||
require('../../loading/index.less');
|
||||
require('../index.less');
|
Reference in New Issue
Block a user