bmui
Version:
Bluemoon Moon Components
369 lines (340 loc) • 10.6 kB
JavaScript
var _OFFSET = 30;
var __render = function __render() {
var _vm = this;
var _h = _vm.$createElement;
var _c = _vm._self._c || _h;
return _c('div', {
staticClass: "bmui-picker-shade"
}, [_c('aside', {
staticClass: "bmui-picker"
}, [_vm._m(0), _vm._v(" "), _vm.type === 'TIME' ? _c('div', {
staticClass: "bmui-picker-content"
}, [_c('div', {
staticClass: "bmui-picker-list",
on: {
"touchstart": function touchstart($event) {
$event.preventDefault();
return _vm.down($event, 0);
},
"touchmove": function touchmove($event) {
$event.preventDefault();
return _vm.move($event);
},
"touchend": function touchend($event) {
$event.preventDefault();
return _vm.up($event);
},
"mousedown": function mousedown($event) {
$event.preventDefault();
return _vm.down($event, 0);
},
"mousemove": function mousemove($event) {
$event.preventDefault();
return _vm.move($event);
},
"mouseleave": function mouseleave($event) {
$event.preventDefault();
return _vm.up($event);
},
"mouseup": function mouseup($event) {
$event.preventDefault();
return _vm.up($event);
}
}
}, [_c('div', {
staticClass: "bmui-picker-wrap",
style: {
'transform': "translateY(" + ((_vm.indexes[0] || 0) * -_vm.OFFSET + (_vm.yTarget === 0 ? _vm.yCurr - _vm.yStart : 0)) + "px)"
}
}, _vm._l(_vm.displayedItems[0], function (h, i) {
return _c('div', {
key: i,
staticClass: "bmui-picker-item",
"class": {
'bmui-picker-active': _vm.yTarget === 0 ? i === _vm.targetIndex : i === _vm.indexes[0]
},
style: {
'height': _vm.OFFSET + 'px',
'lineHeight': _vm.OFFSET + 'px'
}
}, [_vm._v(_vm._s(h.name))]);
}), 0)]), _vm._v(" "), _vm._m(1), _vm._v(" "), _c('div', {
staticClass: "bmui-picker-list",
on: {
"touchstart": function touchstart($event) {
$event.preventDefault();
return _vm.down($event, 1);
},
"touchmove": function touchmove($event) {
$event.preventDefault();
return _vm.move($event);
},
"touchend": function touchend($event) {
$event.preventDefault();
return _vm.up($event);
},
"mousedown": function mousedown($event) {
$event.preventDefault();
return _vm.down($event, 1);
},
"mousemove": function mousemove($event) {
$event.preventDefault();
return _vm.move($event);
},
"mouseleave": function mouseleave($event) {
$event.preventDefault();
return _vm.up($event);
},
"mouseup": function mouseup($event) {
$event.preventDefault();
return _vm.up($event);
}
}
}, [_c('div', {
staticClass: "bmui-picker-wrap",
style: {
'transform': "translateY(" + ((_vm.indexes[1] || 0) * -_vm.OFFSET + (_vm.yTarget === 1 ? _vm.yCurr - _vm.yStart : 0)) + "px)"
}
}, _vm._l(_vm.displayedItems[1], function (m, i) {
return _c('div', {
key: i,
staticClass: "bmui-picker-item",
"class": {
'bmui-picker-active': _vm.yTarget === 1 ? i === _vm.targetIndex : i === _vm.indexes[1]
},
style: {
'height': _vm.OFFSET + 'px',
'lineHeight': _vm.OFFSET + 'px'
}
}, [_vm._v(_vm._s(m.name))]);
}), 0)])]) : _c('div', {
staticClass: "bmui-picker-content"
}, _vm._l(_vm.displayedItems, function (list, listIndex) {
return list.length ? _c('div', {
key: listIndex,
staticClass: "bmui-picker-list",
on: {
"touchstart": function touchstart($event) {
$event.preventDefault();
return _vm.down($event, listIndex);
},
"touchmove": function touchmove($event) {
$event.preventDefault();
return _vm.move($event);
},
"touchend": function touchend($event) {
$event.preventDefault();
return _vm.up($event);
},
"mousedown": function mousedown($event) {
$event.preventDefault();
return _vm.down($event, listIndex);
},
"mousemove": function mousemove($event) {
$event.preventDefault();
return _vm.move($event);
},
"mouseleave": function mouseleave($event) {
$event.preventDefault();
return _vm.up($event);
},
"mouseup": function mouseup($event) {
$event.preventDefault();
return _vm.up($event);
}
}
}, [_c('div', {
staticClass: "bmui-picker-wrap",
style: {
'transform': "translateY(" + ((_vm.indexes[listIndex] || 0) * -_vm.OFFSET + (_vm.yTarget === listIndex ? _vm.yCurr - _vm.yStart : 0)) + "px)"
}
}, _vm._l(list, function (item, itemIndex) {
return _c('div', {
key: itemIndex,
staticClass: "bmui-picker-item",
"class": {
'bmui-picker-active': _vm.yTarget === listIndex ? itemIndex === _vm.targetIndex : itemIndex === _vm.indexes[listIndex]
},
style: {
'height': _vm.OFFSET + 'px',
'lineHeight': _vm.OFFSET + 'px'
}
}, [_vm._v(_vm._s(typeof item === 'string' ? item : item.value))]);
}), 0)]) : _vm._e();
}), 0)])]);
};
var __staticRender = [function () {
var _vm = this;
var _h = _vm.$createElement;
var _c = _vm._self._c || _h;
return _c('div', {
staticClass: "bmui-picker-head"
}, [_c('button', {
staticClass: "bmui-picker-btn",
attrs: {
"type": "button"
}
}, [_vm._v("取消")]), _vm._v(" "), _c('button', {
staticClass: "bmui-picker-btn",
attrs: {
"type": "button"
}
}, [_vm._v("确认")])]);
}, function () {
var _vm = this;
var _h = _vm.$createElement;
var _c = _vm._self._c || _h;
return _c('div', {
staticClass: "bmui-picker-list bmui-picker-colon"
}, [_c('div', {
staticClass: "bmui-picker-wrap"
}, [_vm._v(":")])]);
}];
export default {
render: __render,
staticRenderFns: __staticRender,
data: function data() {
return {
type: '',
items: [],
indexes: [],
yTarget: null,
yStart: null,
yCurr: null,
status: '',
// STARTING
NOW: null,
TODAY: null
};
},
computed: {
OFFSET: function OFFSET() {
return _OFFSET;
},
displayedItems: function displayedItems() {
if (this.items.length > 1) {
return this.items;
} else {
var res = [];
var i = 0;
var target = this.items[0];
while (target && target.length) {
res.push(target);
var itemIndex = this.indexes[i];
if (typeof itemIndex === 'number') {
var item = target[itemIndex];
if (item && item.sub && item.sub.length) {
if (item.sub) {
if (item.sub.length) {
target = item.sub;
i++;
continue;
}
}
}
}
break;
}
return res;
}
},
targetIndex: function targetIndex() {
if (typeof this.yTarget === 'number') {
var offset = this.yCurr - this.yStart;
var ceiling = offset > 0 ? offset % _OFFSET > _OFFSET / 2 : offset % _OFFSET > -_OFFSET / 2;
var target = this.indexes[this.yTarget] - (ceiling ? Math.ceil(offset / _OFFSET) : Math.floor(offset / _OFFSET));
var max = this.displayedItems[this.yTarget].length - 1;
return target > 0 ? target > max ? max : target : 0;
}
return null;
}
},
created: function created() {
this.doInitData();
},
methods: {
doInitData: function doInitData() {
this.NOW = Date.now();
this.TODAY = new Date().setHours(0, 0, 0, 0);
this.type = this.$options.config && this.$options.config.type || '';
if (this.type === 'TIME') {
this.items = function () {
var res = [];
var hours = [];
var minutes = [];
for (var h = 0; h < 24; h++) {
hours.push({
name: h < 10 ? '0' + h : '' + h,
value: h
});
}
for (var m = 0; m < 60; m++) {
minutes.push({
name: m < 10 ? '0' + m : '' + m,
value: m
});
}
res.push(hours);
res.push(minutes);
return res;
}();
var date = this.$options.value === undefined ? new Date() : new Date(this.$options.value);
this.$options.value = [date.getHours(), date.getMinutes()];
} else {
this.items = this.$options.list || [];
}
this.doSetIndexes(this.$options.value || []);
},
doSetIndexes: function doSetIndexes(values) {
var _this = this;
var _loop = function _loop(i) {
if (!values || values[i] === undefined) {
_this.indexes.splice(i, 1, _this.indexes[i] || 0);
} else {
var target = _this.displayedItems[i].findIndex(function (item) {
return typeof item === 'string' ? item === values[i] : item.value === values[i];
});
_this.indexes.splice(i, 1, target === -1 ? 0 : target);
}
};
for (var i = 0; i < this.displayedItems.length; i++) {
_loop(i);
}
return this.indexes;
},
down: function down(ev, index) {
if (!this.status) {
this.yTarget = index;
this.yStart = ev.touches ? ev.touches[0].clientY : ev.clientY;
this.yCurr = ev.touches ? ev.touches[0].clientY : ev.clientY;
this.status = 'STARTING';
}
},
move: function () {
var locker;
return function (ev) {
if (this.status === 'STARTING') {
if (locker) return;
locker = setTimeout(function () {
locker = null;
}, 75);
this.yCurr = ev.touches ? ev.touches[0].clientY : ev.clientY;
}
};
}(),
up: function up() {
if (this.status === 'STARTING') {
if (this.items.length > 1) {
this.indexes.splice(this.yTarget, 1, this.targetIndex);
} else {
this.indexes = this.indexes.slice(0, this.yTarget).concat(this.targetIndex);
} // 下面这一句会自动选择sub的第一项，但会增加较多的displayedItems消耗
// this.doSetIndexes()
this.yTarget = null;
this.yStart = null;
this.yCurr = null;
this.status = '';
}
}
}
};