You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
846 lines
53 KiB
846 lines
53 KiB
import { normalizeComponent, createInjector } from 'vue-runtime-helpers';
|
|
|
|
//
|
|
//
|
|
//
|
|
//
|
|
//
|
|
//
|
|
//
|
|
//
|
|
//
|
|
//
|
|
//
|
|
//
|
|
|
|
// TODO： 支持自定义的render渲染
|
|
// import textRender from './render'
|
|
var script = {
|
|
props: {
|
|
cancelText: {
|
|
type: String
|
|
},
|
|
confirmText: {
|
|
type: String
|
|
},
|
|
title: {
|
|
type: String
|
|
}
|
|
},
|
|
methods: {
|
|
cancel () {
|
|
this.$emit('cancel');
|
|
},
|
|
confirm () {
|
|
this.$emit('confirm');
|
|
}
|
|
}
|
|
};
|
|
|
|
/* script */
|
|
const __vue_script__ = script;
|
|
|
|
/* template */
|
|
var __vue_render__ = function() {
|
|
var _vm = this;
|
|
var _h = _vm.$createElement;
|
|
var _c = _vm._self._c || _h;
|
|
return _c("div", { staticClass: "header" }, [
|
|
_c("div", { staticClass: "left" }, [
|
|
_c("span", { staticClass: "btn", on: { click: _vm.cancel } }, [
|
|
_vm._v(_vm._s(_vm.cancelText))
|
|
])
|
|
]),
|
|
_vm._v(" "),
|
|
_c("div", { staticClass: "title" }, [_vm._v(_vm._s(_vm.title))]),
|
|
_vm._v(" "),
|
|
_c("div", { staticClass: "right" }, [
|
|
_c("span", { staticClass: "btn", on: { click: _vm.confirm } }, [
|
|
_vm._v(_vm._s(_vm.confirmText))
|
|
])
|
|
])
|
|
])
|
|
};
|
|
var __vue_staticRenderFns__ = [];
|
|
__vue_render__._withStripped = true;
|
|
|
|
/* style */
|
|
const __vue_inject_styles__ = function (inject) {
|
|
if (!inject) return
|
|
inject("data-v-6ffe26b0_0", { source: ".header[data-v-6ffe26b0] {\n height: 44px;\n line-height: 44px;\n display: -webkit-box;\n display: flex;\n -webkit-box-pack: justify;\n justify-content: space-between;\n position: relative;\n}\n.header[data-v-6ffe26b0]::after {\n position: absolute;\n box-sizing: border-box;\n content: \" \";\n pointer-events: none;\n top: -50%;\n right: -50%;\n bottom: -50%;\n left: -50%;\n border: 0 solid #ebedf0;\n -webkit-transform: scale(0.5);\n transform: scale(0.5);\n border-width: 1px 0;\n}\n.title[data-v-6ffe26b0] {\n max-width: 50%;\n font-weight: 500;\n font-size: 16px;\n text-align: center;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.btn[data-v-6ffe26b0] {\n padding: 0 16px;\n color: #1989fa;\n font-size: 14px;\n background-color: transparent;\n}\n\n/*# sourceMappingURL=header.vue.map */", map: {"version":3,"sources":["/Users/naice/my-project/vue-picker/src/header.vue","header.vue"],"names":[],"mappings":"AAuCA;EACA,YAAA;EACA,iBAAA;EACA,oBAAA;EAAA,aAAA;EACA,yBAAA;UAAA,8BAAA;EACA,kBAAA;ACtCA;ADuCA;EACA,kBAAA;EACA,sBAAA;EACA,YAAA;EACA,oBAAA;EACA,SAAA;EACA,WAAA;EACA,YAAA;EACA,UAAA;EACA,uBAAA;EACA,6BAAA;UAAA,qBAAA;EACA,mBAAA;ACrCA;ADwCA;EACA,cAAA;EACA,gBAAA;EACA,eAAA;EACA,kBAAA;EACA,gBAAA;EACA,uBAAA;EACA,mBAAA;ACrCA;ADuCA;EACA,eAAA;EACA,cAAA;EACA,eAAA;EACA,6BAAA;ACpCA;;AAEA,qCAAqC","file":"header.vue","sourcesContent":["<template>\n <div class=\"header\">\n <div class=\"left\">\n <span class=\"btn\" @click=\"cancel\">{{cancelText}}</span>\n </div>\n <div class=\"title\">{{title}}</div>\n <div class=\"right\">\n <span class=\"btn\" @click=\"confirm\">{{confirmText}}</span>\n </div>\n </div>\n</template>\n\n<script>\n // TODO： 支持自定义的render渲染\n // import textRender from './render'\n export default {\n props: {\n cancelText: {\n type: String\n },\n confirmText: {\n type: String\n },\n title: {\n type: String\n }\n },\n methods: {\n cancel () {\n this.$emit('cancel')\n },\n confirm () {\n this.$emit('confirm')\n }\n }\n }\n</script>\n\n<style lang=\"scss\" scoped>\n .header {\n height: 44px;\n line-height: 44px;\n display: flex;\n justify-content: space-between;\n position: relative;\n &::after {\n position: absolute;\n box-sizing: border-box;\n content: ' ';\n pointer-events: none;\n top: -50%;\n right: -50%;\n bottom: -50%;\n left: -50%;\n border: 0 solid #ebedf0;\n transform: scale(0.5);\n border-width: 1px 0;\n }\n }\n .title {\n max-width: 50%;\n font-weight: 500;\n font-size: 16px;\n text-align: center;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n .btn {\n padding: 0 16px;\n color: #1989fa;\n font-size: 14px;\n background-color: transparent;\n }\n</style>\n",".header {\n height: 44px;\n line-height: 44px;\n display: flex;\n justify-content: space-between;\n position: relative;\n}\n.header::after {\n position: absolute;\n box-sizing: border-box;\n content: \" \";\n pointer-events: none;\n top: -50%;\n right: -50%;\n bottom: -50%;\n left: -50%;\n border: 0 solid #ebedf0;\n transform: scale(0.5);\n border-width: 1px 0;\n}\n\n.title {\n max-width: 50%;\n font-weight: 500;\n font-size: 16px;\n text-align: center;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.btn {\n padding: 0 16px;\n color: #1989fa;\n font-size: 14px;\n background-color: transparent;\n}\n\n/*# sourceMappingURL=header.vue.map */"]}, media: undefined });
|
|
|
|
};
|
|
/* scoped */
|
|
const __vue_scope_id__ = "data-v-6ffe26b0";
|
|
/* module identifier */
|
|
const __vue_module_identifier__ = undefined;
|
|
/* functional template */
|
|
const __vue_is_functional_template__ = false;
|
|
/* style inject SSR */
|
|
|
|
/* style inject shadow dom */
|
|
|
|
|
|
|
|
var Header = normalizeComponent(
|
|
{ render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
|
|
__vue_inject_styles__,
|
|
__vue_script__,
|
|
__vue_scope_id__,
|
|
__vue_is_functional_template__,
|
|
__vue_module_identifier__,
|
|
false,
|
|
createInjector,
|
|
undefined,
|
|
undefined
|
|
);
|
|
|
|
const DEFTAULT_ITEM_HEIGHT = 44;
|
|
|
|
// 兼容pc 移动端
|
|
const HAS_TOUCH = 'ontouchstart' in window;
|
|
const START_EVENT = HAS_TOUCH ? 'touchstart' : 'mousedown';
|
|
const MOVE_EVENT = HAS_TOUCH ? 'touchmove' : 'mousemove';
|
|
const END_EVENT = HAS_TOUCH ? 'touchend' : 'mouseup';
|
|
|
|
const getClient = e => {
|
|
let clientX = HAS_TOUCH ? e.changedTouches[0].clientX : e.clientX;
|
|
let clientY = HAS_TOUCH ? e.changedTouches[0].clientY : e.clientY;
|
|
return {
|
|
x: clientX,
|
|
y: clientY
|
|
}
|
|
};
|
|
const isPC = () => {
|
|
const userAgentInfo = navigator.userAgent;
|
|
const Agents = ['Android', 'iPhone', 'SymbianOS', 'Windows Phone', 'iPad', 'iPod'];
|
|
let flag = true;
|
|
for (var v = 0; v < Agents.length; v++) {
|
|
if (userAgentInfo.indexOf(Agents[v]) > 0) {
|
|
flag = false;
|
|
break
|
|
}
|
|
}
|
|
return flag
|
|
};
|
|
|
|
//
|
|
const DEFAULT_DURATION = 200;
|
|
// 惯性滑动思路:
|
|
// 在手指离开屏幕时，如果和上一次 move 时的间隔小于 `LIMIT_TIME` 且 move
|
|
// 距离大于 `LIMIT_DISTANCE` 时，执行惯性滑动
|
|
const LIMIT_TIME = 300;
|
|
const LIMIT_DISTANCE = 15;
|
|
const IS_PC = isPC();
|
|
var script$1 = {
|
|
props: {
|
|
defaultIndex: {
|
|
type: Number,
|
|
default: 0
|
|
},
|
|
column: {
|
|
type: Array,
|
|
default: () => ([])
|
|
},
|
|
boxHeight: Number,
|
|
itemHeight: Number,
|
|
rowNumber: Number
|
|
},
|
|
data() {
|
|
return {
|
|
ulStyle: {
|
|
transform: `translate3d(0px, 0px, 0px)`,
|
|
transitionDuration: `0ms`,
|
|
transitionProperty: `none`,
|
|
lineHeight: `${this.itemHeight}px`
|
|
}
|
|
}
|
|
},
|
|
computed: {
|
|
count() {
|
|
return this.column.length
|
|
},
|
|
getRoNumber() {
|
|
return Math.floor(this.rowNumber / 2)
|
|
}
|
|
},
|
|
methods: {
|
|
init () {
|
|
this.setTop(this.defaultIndex);
|
|
const halfBox = (this.boxHeight - this.itemHeight) / 2;
|
|
this.bottom = halfBox + this.itemHeight;
|
|
this.top = halfBox - this.count * this.itemHeight;
|
|
},
|
|
// 根据index 设置滚动位置
|
|
setTop (index = 0) {
|
|
const { boxHeight, itemHeight } = this;
|
|
this.startTop = ((boxHeight - itemHeight) / 2) - (index * itemHeight);
|
|
this.ulStyle.transform = `translate3d(0px, ${this.startTop}px, 0px)`;
|
|
this.selectIndex = index;
|
|
this.change();
|
|
},
|
|
handleStart (e) {
|
|
this.distStartTop = getClient(e).y;
|
|
this.touchStartTime = Date.now();
|
|
// ----
|
|
this.startY = getClient(e).y;
|
|
this.momentumTop = this.startTop;
|
|
|
|
this.ulStyle.transitionDuration = `0ms`;
|
|
this.ulStyle.transitionProperty = `none`;
|
|
if (IS_PC) {
|
|
document.addEventListener(MOVE_EVENT, this.handleMove, false);
|
|
document.addEventListener(END_EVENT, this.handleEnd, false);
|
|
}
|
|
},
|
|
handleMove (e) {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
this.disY = getClient(e).y - this.startY;
|
|
this.startY = getClient(e).y;
|
|
if (this.startTop >= this.bottom) {
|
|
this.startTop = this.bottom;
|
|
} else if (this.startTop <= this.top) {
|
|
this.startTop = this.top;
|
|
} else {
|
|
this.startTop += this.disY;
|
|
}
|
|
this.ulStyle.transform = `translate3d(0px, ${this.startTop}px, 0px)`;
|
|
const now = Date.now();
|
|
|
|
if (now - this.touchStartTime > LIMIT_TIME) {
|
|
this.touchStartTime = now;
|
|
this.momentumTop = this.startTop;
|
|
}
|
|
},
|
|
handleEnd () {
|
|
if (IS_PC) {
|
|
document.removeEventListener(MOVE_EVENT, this.handleMove, false);
|
|
document.removeEventListener(END_EVENT, this.handleEnd, false);
|
|
}
|
|
const distance = this.startTop - this.momentumTop;
|
|
const duration = Date.now() - this.touchStartTime;
|
|
const allowMomentum = duration < LIMIT_TIME && Math.abs(distance) > LIMIT_DISTANCE;
|
|
if (allowMomentum) {
|
|
this.toMove(distance, duration);
|
|
} else {
|
|
this.setTranfromTop();
|
|
}
|
|
},
|
|
setTranfromTop () {
|
|
this.ulStyle.transitionProperty = `all`;
|
|
this.ulStyle.transitionDuration = `${DEFAULT_DURATION}ms`;
|
|
if (this.startTop >= this.bottom - this.itemHeight) {
|
|
this.setTop();
|
|
} else if (this.startTop <= this.top + this.itemHeight) {
|
|
this.setTop(this.count - 1);
|
|
} else {
|
|
let index = Math.round((this.startTop) / this.itemHeight);
|
|
this.startTop = index * this.itemHeight;
|
|
if (this.startTop > this.bottom) {
|
|
this.startTop = this.bottom - this.itemHeight;
|
|
index = -this.getRoNumber;
|
|
} else if (this.startTop < this.top) {
|
|
this.startTop = this.top + this.itemHeight;
|
|
index = this.count + 1;
|
|
}
|
|
this.ulStyle.transform = `translate3d(0px, ${this.startTop}px, 0px)`;
|
|
index = this.getRoNumber - index;
|
|
if (this.selectIndex !== index) {
|
|
this.selectIndex = index;
|
|
this.change();
|
|
}
|
|
}
|
|
},
|
|
toMove (distance, duration) {
|
|
const speed = Math.abs(distance / duration);
|
|
distance = this.startTop + (speed / 0.002) * (distance < 0 ? -1 : 1);
|
|
this.ulStyle.transitionProperty = `all`;
|
|
this.ulStyle.transitionDuration = `1000ms`;
|
|
this.setTop(Math.min(Math.max(Math.round(-distance / this.itemHeight), 0), this.count - 1));
|
|
},
|
|
change () {
|
|
this.$emit('change', this.column[this.selectIndex]);
|
|
},
|
|
mousewheel (e) {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
this.ulStyle.transitionDuration = `0ms`;
|
|
this.ulStyle.transitionProperty = `none`;
|
|
const { deltaX, deltaY } = e;
|
|
if (Math.abs(deltaX) < Math.abs(deltaY)) {
|
|
this.startTop = this.startTop - deltaY;
|
|
let b = this.bottom - this.itemHeight;
|
|
let t = this.top + this.itemHeight;
|
|
let shouldMove = true;
|
|
if (this.startTop > b ) {
|
|
this.startTop = b;
|
|
shouldMove = false;
|
|
} else if (this.startTop < t) {
|
|
this.startTop = t;
|
|
shouldMove = false;
|
|
}
|
|
this.ulStyle.transform = `translate3d(0px, ${this.startTop}px, 0px)`;
|
|
if (shouldMove) {
|
|
clearInterval(this.wheelTimer);
|
|
this.wheelTimer = setTimeout(this.setTranfromTop, 100);
|
|
}
|
|
}
|
|
}
|
|
},
|
|
mounted () {
|
|
this.init();
|
|
// 监听开始事件
|
|
this.$el.addEventListener(START_EVENT, this.handleStart, false);
|
|
if (IS_PC) {
|
|
this.$el.addEventListener('wheel', this.mousewheel, false);
|
|
} else {
|
|
this.$el.addEventListener(MOVE_EVENT, this.handleMove, false);
|
|
this.$el.addEventListener(END_EVENT, this.handleEnd, false);
|
|
}
|
|
},
|
|
watch: {
|
|
column () {
|
|
this.init();
|
|
},
|
|
defaultIndex () {
|
|
this.setTop(this.defaultIndex);
|
|
}
|
|
},
|
|
beforeDestroy () {
|
|
this.$el.removeEventListener(START_EVENT, this.handleStart, false);
|
|
if (IS_PC) {
|
|
this.$el.removeEventListener('wheel', this.mousewheel, false);
|
|
this.$el.removeEventListener(MOVE_EVENT, this.handleMove, false);
|
|
this.$el.removeEventListener(END_EVENT, this.handleEnd, false);
|
|
}
|
|
}
|
|
};
|
|
|
|
/* script */
|
|
const __vue_script__$1 = script$1;
|
|
|
|
/* template */
|
|
var __vue_render__$1 = function() {
|
|
var _vm = this;
|
|
var _h = _vm.$createElement;
|
|
var _c = _vm._self._c || _h;
|
|
return _c("div", { ref: "list", staticClass: "list" }, [
|
|
_c(
|
|
"ul",
|
|
{ style: _vm.ulStyle },
|
|
_vm._l(_vm.column, function(item, index) {
|
|
return _c("li", { key: "item" + index }, [_vm._v(_vm._s(item.label))])
|
|
}),
|
|
0
|
|
)
|
|
])
|
|
};
|
|
var __vue_staticRenderFns__$1 = [];
|
|
__vue_render__$1._withStripped = true;
|
|
|
|
/* style */
|
|
const __vue_inject_styles__$1 = function (inject) {
|
|
if (!inject) return
|
|
inject("data-v-ec129ff4_0", { source: ".list[data-v-ec129ff4] {\n margin: 0;\n padding: 0;\n -webkit-box-flex: 1;\n flex: 1;\n width: 100%;\n height: 100%;\n overflow: hidden;\n}\n.list ul[data-v-ec129ff4] {\n margin: 0;\n padding: 0;\n -webkit-transition-timing-function: cubic-bezier(0.23, 1, 0.68, 1);\n transition-timing-function: cubic-bezier(0.23, 1, 0.68, 1);\n line-height: 44px;\n}\n.list li[data-v-ec129ff4] {\n margin: 0;\n padding: 0;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n padding: 0 5px;\n color: #000;\n}\n\n/*# sourceMappingURL=list.vue.map */", map: {"version":3,"sources":["/Users/naice/my-project/vue-picker/src/list.vue","list.vue"],"names":[],"mappings":"AA4MA;EACA,SAAA;EACA,UAAA;EACA,mBAAA;UAAA,OAAA;EACA,WAAA;EACA,YAAA;EACA,gBAAA;AC3MA;AD4MA;EACA,SAAA;EACA,UAAA;EACA,kEAAA;UAAA,0DAAA;EACA,iBAAA;AC1MA;AD4MA;EACA,SAAA;EACA,UAAA;EACA,gBAAA;EACA,mBAAA;EACA,uBAAA;EACA,cAAA;EACA,WAAA;AC1MA;;AAEA,mCAAmC","file":"list.vue","sourcesContent":["<template>\n <div class=\"list\" ref=\"list\">\n <ul :style=\"ulStyle\">\n <li v-for=\"(item, index) in column\" :key=\"'item' + index\">{{item.label}}</li>\n </ul>\n </div>\n</template>\n\n<script>\n import { getClient, START_EVENT, MOVE_EVENT, END_EVENT, isPC } from './utils.js'\n const DEFAULT_DURATION = 200\n // 惯性滑动思路:\n // 在手指离开屏幕时，如果和上一次 move 时的间隔小于 `LIMIT_TIME` 且 move\n // 距离大于 `LIMIT_DISTANCE` 时，执行惯性滑动\n const LIMIT_TIME = 300\n const LIMIT_DISTANCE = 15\n const IS_PC = isPC()\n export default {\n props: {\n defaultIndex: {\n type: Number,\n default: 0\n },\n column: {\n type: Array,\n default: () => ([])\n },\n boxHeight: Number,\n itemHeight: Number,\n rowNumber: Number\n },\n data() {\n return {\n ulStyle: {\n transform: `translate3d(0px, 0px, 0px)`,\n transitionDuration: `0ms`,\n transitionProperty: `none`,\n lineHeight: `${this.itemHeight}px`\n }\n }\n },\n computed: {\n count() {\n return this.column.length\n },\n getRoNumber() {\n return Math.floor(this.rowNumber / 2)\n }\n },\n methods: {\n init () {\n this.setTop(this.defaultIndex)\n const halfBox = (this.boxHeight - this.itemHeight) / 2\n this.bottom = halfBox + this.itemHeight\n this.top = halfBox - this.count * this.itemHeight\n },\n // 根据index 设置滚动位置\n setTop (index = 0) {\n const { boxHeight, itemHeight } = this\n this.startTop = ((boxHeight - itemHeight) / 2) - (index * itemHeight)\n this.ulStyle.transform = `translate3d(0px, ${this.startTop}px, 0px)`\n this.selectIndex = index\n this.change()\n },\n handleStart (e) {\n this.distStartTop = getClient(e).y\n this.touchStartTime = Date.now()\n // ----\n this.startY = getClient(e).y\n this.momentumTop = this.startTop\n\n this.ulStyle.transitionDuration = `0ms`\n this.ulStyle.transitionProperty = `none`\n if (IS_PC) {\n document.addEventListener(MOVE_EVENT, this.handleMove, false)\n document.addEventListener(END_EVENT, this.handleEnd, false)\n }\n },\n handleMove (e) {\n e.preventDefault()\n e.stopPropagation()\n this.disY = getClient(e).y - this.startY\n this.startY = getClient(e).y\n if (this.startTop >= this.bottom) {\n this.startTop = this.bottom\n } else if (this.startTop <= this.top) {\n this.startTop = this.top\n } else {\n this.startTop += this.disY\n }\n this.ulStyle.transform = `translate3d(0px, ${this.startTop}px, 0px)`\n const now = Date.now()\n\n if (now - this.touchStartTime > LIMIT_TIME) {\n this.touchStartTime = now\n this.momentumTop = this.startTop\n }\n },\n handleEnd () {\n if (IS_PC) {\n document.removeEventListener(MOVE_EVENT, this.handleMove, false)\n document.removeEventListener(END_EVENT, this.handleEnd, false)\n }\n const distance = this.startTop - this.momentumTop\n const duration = Date.now() - this.touchStartTime\n const allowMomentum = duration < LIMIT_TIME && Math.abs(distance) > LIMIT_DISTANCE\n if (allowMomentum) {\n this.toMove(distance, duration)\n } else {\n this.setTranfromTop()\n }\n },\n setTranfromTop () {\n this.ulStyle.transitionProperty = `all`\n this.ulStyle.transitionDuration = `${DEFAULT_DURATION}ms`\n if (this.startTop >= this.bottom - this.itemHeight) {\n this.setTop()\n } else if (this.startTop <= this.top + this.itemHeight) {\n this.setTop(this.count - 1)\n } else {\n let index = Math.round((this.startTop) / this.itemHeight)\n this.startTop = index * this.itemHeight\n if (this.startTop > this.bottom) {\n this.startTop = this.bottom - this.itemHeight\n index = -this.getRoNumber\n } else if (this.startTop < this.top) {\n this.startTop = this.top + this.itemHeight\n index = this.count + 1\n }\n this.ulStyle.transform = `translate3d(0px, ${this.startTop}px, 0px)`\n index = this.getRoNumber - index\n if (this.selectIndex !== index) {\n this.selectIndex = index\n this.change()\n }\n }\n },\n toMove (distance, duration) {\n const speed = Math.abs(distance / duration)\n distance = this.startTop + (speed / 0.002) * (distance < 0 ? -1 : 1)\n this.ulStyle.transitionProperty = `all`\n this.ulStyle.transitionDuration = `1000ms`\n this.setTop(Math.min(Math.max(Math.round(-distance / this.itemHeight), 0), this.count - 1))\n },\n change () {\n this.$emit('change', this.column[this.selectIndex])\n },\n mousewheel (e) {\n e.preventDefault()\n e.stopPropagation()\n this.ulStyle.transitionDuration = `0ms`\n this.ulStyle.transitionProperty = `none`\n const { deltaX, deltaY } = e\n if (Math.abs(deltaX) < Math.abs(deltaY)) {\n this.startTop = this.startTop - deltaY\n let b = this.bottom - this.itemHeight\n let t = this.top + this.itemHeight\n let shouldMove = true\n if (this.startTop > b ) {\n this.startTop = b\n shouldMove = false\n } else if (this.startTop < t) {\n this.startTop = t\n shouldMove = false\n }\n this.ulStyle.transform = `translate3d(0px, ${this.startTop}px, 0px)`\n if (shouldMove) {\n clearInterval(this.wheelTimer)\n this.wheelTimer = setTimeout(this.setTranfromTop, 100)\n }\n }\n }\n },\n mounted () {\n this.init()\n // 监听开始事件\n this.$el.addEventListener(START_EVENT, this.handleStart, false)\n if (IS_PC) {\n this.$el.addEventListener('wheel', this.mousewheel, false)\n } else {\n this.$el.addEventListener(MOVE_EVENT, this.handleMove, false)\n this.$el.addEventListener(END_EVENT, this.handleEnd, false)\n }\n },\n watch: {\n column () {\n this.init()\n },\n defaultIndex () {\n this.setTop(this.defaultIndex)\n }\n },\n beforeDestroy () {\n this.$el.removeEventListener(START_EVENT, this.handleStart, false)\n if (IS_PC) {\n this.$el.removeEventListener('wheel', this.mousewheel, false)\n this.$el.removeEventListener(MOVE_EVENT, this.handleMove, false)\n this.$el.removeEventListener(END_EVENT, this.handleEnd, false)\n }\n }\n }\n</script>\n\n<style lang=\"scss\" scoped>\n .list {\n margin: 0;\n padding: 0;\n flex: 1;\n width: 100%;\n height: 100%;\n overflow: hidden;\n ul {\n margin: 0;\n padding: 0;\n transition-timing-function: cubic-bezier(0.23, 1, 0.68, 1);\n line-height: 44px;\n }\n li {\n margin: 0;\n padding: 0;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n padding: 0 5px;\n color: #000;\n }\n }\n</style>\n",".list {\n margin: 0;\n padding: 0;\n flex: 1;\n width: 100%;\n height: 100%;\n overflow: hidden;\n}\n.list ul {\n margin: 0;\n padding: 0;\n transition-timing-function: cubic-bezier(0.23, 1, 0.68, 1);\n line-height: 44px;\n}\n.list li {\n margin: 0;\n padding: 0;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n padding: 0 5px;\n color: #000;\n}\n\n/*# sourceMappingURL=list.vue.map */"]}, media: undefined });
|
|
|
|
};
|
|
/* scoped */
|
|
const __vue_scope_id__$1 = "data-v-ec129ff4";
|
|
/* module identifier */
|
|
const __vue_module_identifier__$1 = undefined;
|
|
/* functional template */
|
|
const __vue_is_functional_template__$1 = false;
|
|
/* style inject SSR */
|
|
|
|
/* style inject shadow dom */
|
|
|
|
|
|
|
|
var List = normalizeComponent(
|
|
{ render: __vue_render__$1, staticRenderFns: __vue_staticRenderFns__$1 },
|
|
__vue_inject_styles__$1,
|
|
__vue_script__$1,
|
|
__vue_scope_id__$1,
|
|
__vue_is_functional_template__$1,
|
|
__vue_module_identifier__$1,
|
|
false,
|
|
createInjector,
|
|
undefined,
|
|
undefined
|
|
);
|
|
|
|
//
|
|
var script$2 = {
|
|
name: 'VuePicker',
|
|
props: {
|
|
visible: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
data: {
|
|
type: Array,
|
|
default: () => []
|
|
},
|
|
layer: {
|
|
type: Number,
|
|
default: 0
|
|
},
|
|
itemHeight: {
|
|
type: [Number, String],
|
|
default: DEFTAULT_ITEM_HEIGHT
|
|
},
|
|
defaultIndex: {
|
|
type: [Number, Array],
|
|
default: 0
|
|
},
|
|
cancelText: {
|
|
type: String,
|
|
default: '取消'
|
|
},
|
|
confirmText: {
|
|
type: String,
|
|
default: '确认'
|
|
},
|
|
title: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
showToolbar: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
maskClick: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
rowNumber: {
|
|
type: Number,
|
|
default: 5
|
|
},
|
|
appendToBody: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
},
|
|
components: {
|
|
Header,
|
|
List
|
|
},
|
|
data () {
|
|
return {
|
|
column1: [],
|
|
column2: [],
|
|
column3: [],
|
|
column4: [],
|
|
dIndex1: 0,
|
|
dIndex2: 0,
|
|
dIndex3: 0,
|
|
dIndex4: 0
|
|
}
|
|
},
|
|
computed: {
|
|
boxHeight () {
|
|
let itemHeight = parseInt(this.itemHeight);
|
|
itemHeight = itemHeight ? itemHeight : DEFTAULT_ITEM_HEIGHT;
|
|
return itemHeight * this.getRowNumber
|
|
},
|
|
getRowNumber () {
|
|
if (this.rowNumber < 3) {
|
|
return 3
|
|
}
|
|
return this.rowNumber % 2 === 0 ? this.rowNumber + 1 : this.rowNumber
|
|
},
|
|
maskStyle() {
|
|
let style = { backgroundSize: '100% 88px' };
|
|
if (this.getRowNumber === 3) {
|
|
style = { backgroundSize: '100% 44px' };
|
|
}
|
|
return style
|
|
}
|
|
},
|
|
methods: {
|
|
clickMask () {
|
|
if (this.maskClick) {
|
|
this.looseBody();
|
|
this.$emit('update:visible', false);
|
|
}
|
|
},
|
|
formateData () {
|
|
if (this.layer > 1) {
|
|
this.setLinkColumn();
|
|
} else {
|
|
this.column1 = this.data[0] || [];
|
|
this.column2 = this.data[1] || [];
|
|
this.column3 = this.data[2] || [];
|
|
this.column4 = this.data[3] || [];
|
|
this.setNormalIndex();
|
|
}
|
|
},
|
|
setLinkColumn () {
|
|
if (this.layer === 2) {
|
|
this.setLinkLayer2();
|
|
} else if (this.layer === 3) {
|
|
this.setLinkLayer2();
|
|
this.setLinkLayer3();
|
|
} else if (this.layer === 4) {
|
|
this.setLinkLayer2();
|
|
this.setLinkLayer3();
|
|
this.setLinkLayer4();
|
|
}
|
|
},
|
|
setLinkLayer2 () {
|
|
const { defaultIndex } = this;
|
|
this.column1 = this.data || [];
|
|
if (typeof defaultIndex === 'number') {
|
|
this.dIndex1 = defaultIndex;
|
|
this.dIndex2 = 0;
|
|
if (this.data.length > 1 && this.data[0].children) {
|
|
this.column2 = this.data[0].children || [];
|
|
}
|
|
} else if (Array.isArray(defaultIndex) && defaultIndex.length > 0){
|
|
this.dIndex1 = defaultIndex[0] || 0;
|
|
this.column2 = this.data[this.dIndex1].children || [];
|
|
this.$nextTick(() => {
|
|
if (this.column2.length - 1 < defaultIndex[1]) {
|
|
this.dIndex2 = this.column2.length - 1;
|
|
} else {
|
|
this.dIndex2 = defaultIndex[1] || 0;
|
|
}
|
|
});
|
|
}
|
|
},
|
|
setLinkLayer3 () {
|
|
const { defaultIndex } = this;
|
|
if (typeof defaultIndex === 'number') {
|
|
this.dIndex3 = 0;
|
|
if (this.column2.length > 1 && this.column2[0].children) {
|
|
this.column3 = this.column2[0].children || [];
|
|
}
|
|
} else if (Array.isArray(defaultIndex) && defaultIndex.length > 1){
|
|
this.$nextTick(() => {
|
|
this.column3 = this.column2[this.dIndex2].children || [];
|
|
this.$nextTick(() => {
|
|
if (this.column3.length - 1 < defaultIndex[2]) {
|
|
this.dIndex3 = this.column3.length - 1;
|
|
} else {
|
|
this.dIndex3 = defaultIndex[2] || 0;
|
|
}
|
|
});
|
|
});
|
|
}
|
|
},
|
|
setLinkLayer4 () {
|
|
const { defaultIndex } = this;
|
|
if (typeof defaultIndex === 'number') {
|
|
this.dIndex4 = 0;
|
|
if (this.column3.length > 1 && this.column3[0].children) {
|
|
this.column4 = this.column3[0].children || [];
|
|
}
|
|
} else if (Array.isArray(defaultIndex) && defaultIndex.length > 2){
|
|
setTimeout(() => {
|
|
this.column4 = this.column3[this.dIndex3].children || [];
|
|
this.$nextTick(() => {
|
|
if (this.column4.length - 1 < defaultIndex[3]) {
|
|
this.dIndex4 = this.column4.length - 1;
|
|
} else {
|
|
this.dIndex4 = defaultIndex[3] || 0;
|
|
}
|
|
});
|
|
});
|
|
}
|
|
},
|
|
setNormalIndex () {
|
|
this.$nextTick(() => {
|
|
const { defaultIndex } = this;
|
|
if (Array.isArray(defaultIndex)) {
|
|
this.setDefaultIndex();
|
|
} else {
|
|
this.dIndex1 = Number(defaultIndex) || 0;
|
|
}
|
|
});
|
|
},
|
|
setDefaultIndex () {
|
|
const { indexArr } = this;
|
|
const self = this;
|
|
function next() {
|
|
let promise = Promise.resolve();
|
|
let index = 0;
|
|
while (index < self.data.length) {
|
|
promise = promise.then(indexArr[index]);
|
|
index++;
|
|
}
|
|
}
|
|
next();
|
|
},
|
|
change (index, res) {
|
|
this.result[index] = res;
|
|
this.$emit('change', this.result);
|
|
},
|
|
change1 (res) {
|
|
if (res) {
|
|
this.change(0, res);
|
|
if (this.layer > 1) {
|
|
this.dIndex2 = 0;
|
|
this.changeLink('column2', res);
|
|
}
|
|
}
|
|
},
|
|
change2 (res) {
|
|
if (res) {
|
|
this.change(1, res);
|
|
if (this.layer > 2) {
|
|
this.dIndex3 = 0;
|
|
this.changeLink('column3', res);
|
|
}
|
|
}
|
|
},
|
|
change3 (res) {
|
|
if (res) {
|
|
this.change(2, res);
|
|
if (this.layer > 3) {
|
|
this.dIndex4 = 0;
|
|
this.changeLink('column4', res);
|
|
}
|
|
}
|
|
},
|
|
change4 (res) {
|
|
if (res) {
|
|
this.change(3, res);
|
|
}
|
|
},
|
|
changeLink (key, res) {
|
|
if (this.layer) {
|
|
// clearTimeout(this.linktimer)
|
|
this.linktimer = setTimeout(() => {
|
|
this[key] = res.children || [];
|
|
}, 1000 / 60);
|
|
}
|
|
},
|
|
cancel () {
|
|
this.looseBody();
|
|
this.$emit('cancel');
|
|
this.$emit('update:visible', false);
|
|
},
|
|
confirm () {
|
|
this.looseBody();
|
|
this.$emit('confirm', this.result);
|
|
this.$emit('update:visible', false);
|
|
},
|
|
stopPropagation (e) {
|
|
e.stopPropagation();
|
|
},
|
|
fixedBody() {
|
|
const scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
|
|
this.prevBodyCss = document.body.style.cssText;
|
|
document.body.style.cssText += 'position:fixed;width:100%;top:-' + scrollTop + 'px;';
|
|
},
|
|
looseBody() {
|
|
const body = document.body;
|
|
const top = body.style.top;
|
|
body.style.cssText = this.prevBodyCss;
|
|
body.scrollTop = document.documentElement.scrollTop = -parseInt(top);
|
|
body.style.top = '';
|
|
},
|
|
init() {
|
|
this.result = [];
|
|
this.indexArr = [
|
|
() => this.dIndex1 = this.defaultIndex[0] || 0,
|
|
() => this.dIndex2 = this.defaultIndex[1] || 0,
|
|
() => this.dIndex3 = this.defaultIndex[2] || 0,
|
|
() => this.dIndex4 = this.defaultIndex[3] || 0
|
|
];
|
|
this.formateData();
|
|
}
|
|
},
|
|
created () {
|
|
this.init();
|
|
},
|
|
mounted () {
|
|
this.$refs.picker.addEventListener('click', this.stopPropagation);
|
|
if (this.appendToBody) {
|
|
document.body.appendChild(this.$el);
|
|
}
|
|
},
|
|
watch: {
|
|
visible (v) {
|
|
if (v) {
|
|
this.fixedBody();
|
|
}
|
|
},
|
|
defaultIndex () {
|
|
this.init();
|
|
},
|
|
data() {
|
|
this.init();
|
|
}
|
|
},
|
|
beforeDestroy () {
|
|
this.$refs.picker.removeEventListener('click', this.stopPropagation);
|
|
}
|
|
};
|
|
|
|
/* script */
|
|
const __vue_script__$2 = script$2;
|
|
|
|
/* template */
|
|
var __vue_render__$2 = function() {
|
|
var _vm = this;
|
|
var _h = _vm.$createElement;
|
|
var _c = _vm._self._c || _h;
|
|
return _c("transition", { attrs: { name: "fade" } }, [
|
|
_c(
|
|
"div",
|
|
{
|
|
directives: [
|
|
{
|
|
name: "show",
|
|
rawName: "v-show",
|
|
value: _vm.visible,
|
|
expression: "visible"
|
|
}
|
|
],
|
|
staticClass: "pickerbox",
|
|
on: { click: _vm.clickMask }
|
|
},
|
|
[
|
|
_c("transition", { attrs: { name: "toup" } }, [
|
|
_c(
|
|
"div",
|
|
{
|
|
directives: [
|
|
{
|
|
name: "show",
|
|
rawName: "v-show",
|
|
value: _vm.visible,
|
|
expression: "visible"
|
|
}
|
|
],
|
|
ref: "picker",
|
|
staticClass: "vue-picker"
|
|
},
|
|
[
|
|
_vm.showToolbar
|
|
? _c("Header", {
|
|
attrs: {
|
|
cancelText: _vm.cancelText,
|
|
confirmText: _vm.confirmText,
|
|
title: _vm.title
|
|
},
|
|
on: { cancel: _vm.cancel, confirm: _vm.confirm }
|
|
})
|
|
: _vm._e(),
|
|
_vm._v(" "),
|
|
_c(
|
|
"div",
|
|
{
|
|
staticClass: "content",
|
|
style: { height: _vm.boxHeight + "px" }
|
|
},
|
|
[
|
|
_c(
|
|
"div",
|
|
{ staticClass: "colums" },
|
|
[
|
|
_c("List", {
|
|
attrs: {
|
|
column: _vm.column1,
|
|
boxHeight: _vm.boxHeight,
|
|
itemHeight: _vm.itemHeight,
|
|
defaultIndex: _vm.dIndex1,
|
|
rowNumber: _vm.getRowNumber
|
|
},
|
|
on: { change: _vm.change1 }
|
|
}),
|
|
_vm._v(" "),
|
|
_vm.column2.length > 0
|
|
? _c("List", {
|
|
attrs: {
|
|
column: _vm.column2,
|
|
boxHeight: _vm.boxHeight,
|
|
itemHeight: _vm.itemHeight,
|
|
defaultIndex: _vm.dIndex2,
|
|
rowNumber: _vm.getRowNumber
|
|
},
|
|
on: { change: _vm.change2 }
|
|
})
|
|
: _vm._e(),
|
|
_vm._v(" "),
|
|
_vm.column3.length > 0
|
|
? _c("List", {
|
|
attrs: {
|
|
column: _vm.column3,
|
|
boxHeight: _vm.boxHeight,
|
|
itemHeight: _vm.itemHeight,
|
|
defaultIndex: _vm.dIndex3,
|
|
rowNumber: _vm.getRowNumber
|
|
},
|
|
on: { change: _vm.change3 }
|
|
})
|
|
: _vm._e(),
|
|
_vm._v(" "),
|
|
_vm.column4.length > 0
|
|
? _c("List", {
|
|
attrs: {
|
|
column: _vm.column4,
|
|
boxHeight: _vm.boxHeight,
|
|
itemHeight: _vm.itemHeight,
|
|
defaultIndex: _vm.dIndex4,
|
|
rowNumber: _vm.getRowNumber
|
|
},
|
|
on: { change: _vm.change4 }
|
|
})
|
|
: _vm._e()
|
|
],
|
|
1
|
|
),
|
|
_vm._v(" "),
|
|
_c("div", { staticClass: "mask", style: _vm.maskStyle }),
|
|
_vm._v(" "),
|
|
_c("div", { staticClass: "hairline" })
|
|
]
|
|
)
|
|
],
|
|
1
|
|
)
|
|
])
|
|
],
|
|
1
|
|
)
|
|
])
|
|
};
|
|
var __vue_staticRenderFns__$2 = [];
|
|
__vue_render__$2._withStripped = true;
|
|
|
|
/* style */
|
|
const __vue_inject_styles__$2 = function (inject) {
|
|
if (!inject) return
|
|
inject("data-v-200a1302_0", { source: ".pickerbox[data-v-200a1302] {\n position: fixed;\n width: 100vw;\n height: 100vh;\n left: 0;\n bottom: 0;\n background: rgba(0, 0, 0, 0.7);\n z-index: 9999;\n overflow: hidden;\n}\n.fade-enter-active[data-v-200a1302], .fade-leave-active[data-v-200a1302] {\n -webkit-transition: opacity 0.2s;\n transition: opacity 0.2s;\n}\n.fade-enter[data-v-200a1302], .fade-leave-to[data-v-200a1302] {\n opacity: 0;\n}\n.toup-enter-active[data-v-200a1302], .toup-leave-active[data-v-200a1302] {\n -webkit-transition: -webkit-transform 0.3s;\n transition: -webkit-transform 0.3s;\n transition: transform 0.3s;\n transition: transform 0.3s, -webkit-transform 0.3s;\n}\n.toup-enter[data-v-200a1302], .toup-leave-to[data-v-200a1302] {\n -webkit-transform: translate3d(0, 100px, 0);\n transform: translate3d(0, 100px, 0);\n}\n.vue-picker[data-v-200a1302] {\n position: absolute;\n left: 0;\n bottom: 0;\n width: 100%;\n background-color: #fff;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n -webkit-text-size-adjust: 100%;\n -webkit-tap-highlight-color: transparent;\n}\n.content[data-v-200a1302] {\n overflow: hidden;\n height: 220px;\n position: relative;\n display: -webkit-box;\n display: flex;\n}\n.colums[data-v-200a1302] {\n display: -webkit-box;\n display: flex;\n overflow: hidden;\n font-size: 16px;\n text-align: center;\n -webkit-box-flex: 1;\n flex: 1;\n}\n.mask[data-v-200a1302] {\n position: absolute;\n top: 0;\n left: 0;\n z-index: 2;\n width: 100%;\n height: 100%;\n background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.9)), to(rgba(255, 255, 255, 0.4))), -webkit-gradient(linear, left bottom, left top, from(rgba(255, 255, 255, 0.9)), to(rgba(255, 255, 255, 0.4)));\n background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.4)), linear-gradient(0deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.4));\n background-repeat: no-repeat;\n background-position: top, bottom;\n -webkit-backface-visibility: hidden;\n backface-visibility: hidden;\n pointer-events: none;\n background-size: 100% 88px;\n}\n.hairline[data-v-200a1302] {\n position: absolute;\n top: 50%;\n left: 0;\n z-index: 3;\n width: 100%;\n -webkit-transform: translateY(-50%);\n transform: translateY(-50%);\n pointer-events: none;\n height: 44px;\n}\n.hairline[data-v-200a1302]::after {\n position: absolute;\n box-sizing: border-box;\n content: \" \";\n pointer-events: none;\n top: -50%;\n right: -50%;\n bottom: -50%;\n left: -50%;\n border: 0 solid #ebedf0;\n -webkit-transform: scale(0.5);\n transform: scale(0.5);\n border-width: 1px 0;\n}\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["/Users/naice/my-project/vue-picker/src/index.vue","index.vue"],"names":[],"mappings":"AA2WA;EACA,eAAA;EACA,YAAA;EACA,aAAA;EACA,OAAA;EACA,SAAA;EACA,8BAAA;EACA,aAAA;EACA,gBAAA;AC1WA;AD4WA;EACA,gCAAA;EAAA,wBAAA;ACzWA;AD2WA;EACA,UAAA;ACxWA;AD0WA;EACA,0CAAA;EAAA,kCAAA;EAAA,0BAAA;EAAA,kDAAA;ACvWA;ADyWA;EACA,2CAAA;UAAA,mCAAA;ACtWA;ADyWA;EACA,kBAAA;EACA,OAAA;EACA,SAAA;EACA,WAAA;EACA,sBAAA;EACA,yBAAA;KAAA,sBAAA;MAAA,qBAAA;UAAA,iBAAA;EACA,8BAAA;EACA,wCAAA;ACtWA;ADwWA;EACA,gBAAA;EACA,aAAA;EACA,kBAAA;EACA,oBAAA;EAAA,aAAA;ACrWA;ADuWA;EACA,oBAAA;EAAA,aAAA;EACA,gBAAA;EACA,eAAA;EACA,kBAAA;EACA,mBAAA;UAAA,OAAA;ACpWA;ADsWA;EACA,kBAAA;EACA,MAAA;EACA,OAAA;EACA,UAAA;EACA,WAAA;EACA,YAAA;EACA,8OAAA;EAAA,wKAAA;EACA,4BAAA;EACA,gCAAA;EACA,mCAAA;UAAA,2BAAA;EACA,oBAAA;EACA,0BAAA;ACnWA;ADqWA;EACA,kBAAA;EACA,QAAA;EACA,OAAA;EACA,UAAA;EACA,WAAA;EACA,mCAAA;UAAA,2BAAA;EACA,oBAAA;EACA,YAAA;AClWA;ADmWA;EACA,kBAAA;EACA,sBAAA;EACA,YAAA;EACA,oBAAA;EACA,SAAA;EACA,WAAA;EACA,YAAA;EACA,UAAA;EACA,uBAAA;EACA,6BAAA;EACA,qBAAA;EACA,mBAAA;ACjWA;;AAEA,oCAAoC","file":"index.vue","sourcesContent":["<template>\n <transition name=\"fade\">\n <div class=\"pickerbox\" v-show=\"visible\" @click=\"clickMask\">\n <transition name=\"toup\">\n <div class=\"vue-picker\" ref=\"picker\" v-show=\"visible\">\n <Header v-if=\"showToolbar\"\n :cancelText=\"cancelText\"\n :confirmText=\"confirmText\"\n :title=\"title\"\n @cancel=\"cancel\"\n @confirm=\"confirm\" />\n <div class=\"content\" :style=\"{height: boxHeight + 'px'}\">\n <div class=\"colums\">\n <List :column=\"column1\"\n :boxHeight=\"boxHeight\"\n :itemHeight=\"itemHeight\"\n :defaultIndex=\"dIndex1\"\n :rowNumber=\"getRowNumber\"\n @change=\"change1\" />\n <List v-if=\"column2.length > 0\"\n :column=\"column2\"\n :boxHeight=\"boxHeight\"\n :itemHeight=\"itemHeight\"\n :defaultIndex=\"dIndex2\"\n :rowNumber=\"getRowNumber\"\n @change=\"change2\" />\n <List v-if=\"column3.length > 0\"\n :column=\"column3\"\n :boxHeight=\"boxHeight\"\n :itemHeight=\"itemHeight\"\n :defaultIndex=\"dIndex3\"\n :rowNumber=\"getRowNumber\"\n @change=\"change3\" />\n <List v-if=\"column4.length > 0\"\n :column=\"column4\"\n :boxHeight=\"boxHeight\"\n :itemHeight=\"itemHeight\"\n :defaultIndex=\"dIndex4\"\n :rowNumber=\"getRowNumber\"\n @change=\"change4\" />\n </div>\n <div class=\"mask\" :style=\"maskStyle\"></div>\n <div class=\"hairline\"></div>\n </div>\n </div>\n </transition>\n </div>\n </transition>\n</template>\n<script>\n import Header from './header.vue'\n import List from './list.vue'\n import { DEFTAULT_ITEM_HEIGHT } from './utils.js'\n export default {\n name: 'VuePicker',\n props: {\n visible: {\n type: Boolean,\n default: false\n },\n data: {\n type: Array,\n default: () => []\n },\n layer: {\n type: Number,\n default: 0\n },\n itemHeight: {\n type: [Number, String],\n default: DEFTAULT_ITEM_HEIGHT\n },\n defaultIndex: {\n type: [Number, Array],\n default: 0\n },\n cancelText: {\n type: String,\n default: '取消'\n },\n confirmText: {\n type: String,\n default: '确认'\n },\n title: {\n type: String,\n default: ''\n },\n showToolbar: {\n type: Boolean,\n default: false\n },\n maskClick: {\n type: Boolean,\n default: false\n },\n rowNumber: {\n type: Number,\n default: 5\n },\n appendToBody: {\n type: Boolean,\n default: false\n }\n },\n components: {\n Header,\n List\n },\n data () {\n return {\n column1: [],\n column2: [],\n column3: [],\n column4: [],\n dIndex1: 0,\n dIndex2: 0,\n dIndex3: 0,\n dIndex4: 0\n }\n },\n computed: {\n boxHeight () {\n let itemHeight = parseInt(this.itemHeight)\n itemHeight = itemHeight ? itemHeight : DEFTAULT_ITEM_HEIGHT\n return itemHeight * this.getRowNumber\n },\n getRowNumber () {\n if (this.rowNumber < 3) {\n return 3\n }\n return this.rowNumber % 2 === 0 ? this.rowNumber + 1 : this.rowNumber\n },\n maskStyle() {\n let style = { backgroundSize: '100% 88px' }\n if (this.getRowNumber === 3) {\n style = { backgroundSize: '100% 44px' }\n }\n return style\n }\n },\n methods: {\n clickMask () {\n if (this.maskClick) {\n this.looseBody()\n this.$emit('update:visible', false)\n }\n },\n formateData () {\n if (this.layer > 1) {\n this.setLinkColumn()\n } else {\n this.column1 = this.data[0] || []\n this.column2 = this.data[1] || []\n this.column3 = this.data[2] || []\n this.column4 = this.data[3] || []\n this.setNormalIndex()\n }\n },\n setLinkColumn () {\n if (this.layer === 2) {\n this.setLinkLayer2()\n } else if (this.layer === 3) {\n this.setLinkLayer2()\n this.setLinkLayer3()\n } else if (this.layer === 4) {\n this.setLinkLayer2()\n this.setLinkLayer3()\n this.setLinkLayer4()\n }\n },\n setLinkLayer2 () {\n const { defaultIndex } = this\n this.column1 = this.data || []\n if (typeof defaultIndex === 'number') {\n this.dIndex1 = defaultIndex\n this.dIndex2 = 0\n if (this.data.length > 1 && this.data[0].children) {\n this.column2 = this.data[0].children || []\n }\n } else if (Array.isArray(defaultIndex) && defaultIndex.length > 0){\n this.dIndex1 = defaultIndex[0] || 0\n this.column2 = this.data[this.dIndex1].children || []\n this.$nextTick(() => {\n if (this.column2.length - 1 < defaultIndex[1]) {\n this.dIndex2 = this.column2.length - 1\n } else {\n this.dIndex2 = defaultIndex[1] || 0\n }\n })\n }\n },\n setLinkLayer3 () {\n const { defaultIndex } = this\n if (typeof defaultIndex === 'number') {\n this.dIndex3 = 0\n if (this.column2.length > 1 && this.column2[0].children) {\n this.column3 = this.column2[0].children || []\n }\n } else if (Array.isArray(defaultIndex) && defaultIndex.length > 1){\n this.$nextTick(() => {\n this.column3 = this.column2[this.dIndex2].children || []\n this.$nextTick(() => {\n if (this.column3.length - 1 < defaultIndex[2]) {\n this.dIndex3 = this.column3.length - 1\n } else {\n this.dIndex3 = defaultIndex[2] || 0\n }\n })\n })\n }\n },\n setLinkLayer4 () {\n const { defaultIndex } = this\n if (typeof defaultIndex === 'number') {\n this.dIndex4 = 0\n if (this.column3.length > 1 && this.column3[0].children) {\n this.column4 = this.column3[0].children || []\n }\n } else if (Array.isArray(defaultIndex) && defaultIndex.length > 2){\n setTimeout(() => {\n this.column4 = this.column3[this.dIndex3].children || []\n this.$nextTick(() => {\n if (this.column4.length - 1 < defaultIndex[3]) {\n this.dIndex4 = this.column4.length - 1\n } else {\n this.dIndex4 = defaultIndex[3] || 0\n }\n })\n })\n }\n },\n setNormalIndex () {\n this.$nextTick(() => {\n const { defaultIndex } = this\n if (Array.isArray(defaultIndex)) {\n this.setDefaultIndex()\n } else {\n this.dIndex1 = Number(defaultIndex) || 0\n }\n })\n },\n setDefaultIndex () {\n const { indexArr } = this\n const self = this\n function next() {\n let promise = Promise.resolve()\n let index = 0\n while (index < self.data.length) {\n promise = promise.then(indexArr[index])\n index++\n }\n }\n next()\n },\n change (index, res) {\n this.result[index] = res\n this.$emit('change', this.result)\n },\n change1 (res) {\n if (res) {\n this.change(0, res)\n if (this.layer > 1) {\n this.dIndex2 = 0\n this.changeLink('column2', res)\n }\n }\n },\n change2 (res) {\n if (res) {\n this.change(1, res)\n if (this.layer > 2) {\n this.dIndex3 = 0\n this.changeLink('column3', res)\n }\n }\n },\n change3 (res) {\n if (res) {\n this.change(2, res)\n if (this.layer > 3) {\n this.dIndex4 = 0\n this.changeLink('column4', res)\n }\n }\n },\n change4 (res) {\n if (res) {\n this.change(3, res)\n }\n },\n changeLink (key, res) {\n if (this.layer) {\n // clearTimeout(this.linktimer)\n this.linktimer = setTimeout(() => {\n this[key] = res.children || []\n }, 1000 / 60)\n }\n },\n cancel () {\n this.looseBody()\n this.$emit('cancel')\n this.$emit('update:visible', false)\n },\n confirm () {\n this.looseBody()\n this.$emit('confirm', this.result)\n this.$emit('update:visible', false)\n },\n stopPropagation (e) {\n e.stopPropagation()\n },\n fixedBody() {\n const scrollTop = document.body.scrollTop || document.documentElement.scrollTop\n this.prevBodyCss = document.body.style.cssText\n document.body.style.cssText += 'position:fixed;width:100%;top:-' + scrollTop + 'px;'\n },\n looseBody() {\n const body = document.body\n const top = body.style.top\n body.style.cssText = this.prevBodyCss\n body.scrollTop = document.documentElement.scrollTop = -parseInt(top)\n body.style.top = ''\n },\n init() {\n this.result = []\n this.indexArr = [\n () => this.dIndex1 = this.defaultIndex[0] || 0,\n () => this.dIndex2 = this.defaultIndex[1] || 0,\n () => this.dIndex3 = this.defaultIndex[2] || 0,\n () => this.dIndex4 = this.defaultIndex[3] || 0\n ]\n this.formateData()\n }\n },\n created () {\n this.init()\n },\n mounted () {\n this.$refs.picker.addEventListener('click', this.stopPropagation)\n if (this.appendToBody) {\n document.body.appendChild(this.$el)\n }\n },\n watch: {\n visible (v) {\n if (v) {\n this.fixedBody()\n }\n },\n defaultIndex () {\n this.init()\n },\n data() {\n this.init()\n }\n },\n beforeDestroy () {\n this.$refs.picker.removeEventListener('click', this.stopPropagation)\n }\n }\n</script>\n<style lang=\"scss\" scoped>\n .pickerbox {\n position: fixed;\n width: 100vw;\n height: 100vh;\n left: 0;\n bottom: 0;\n background: rgba(0, 0, 0, 0.7);\n z-index: 9999;\n overflow: hidden;\n }\n .fade-enter-active, .fade-leave-active {\n transition: opacity .2s;\n }\n .fade-enter, .fade-leave-to {\n opacity: 0;\n }\n .toup-enter-active, .toup-leave-active {\n transition: transform .3s;\n }\n .toup-enter, .toup-leave-to {\n transform: translate3d(0, 100px, 0);\n }\n // ----\n .vue-picker {\n position: absolute;\n left: 0;\n bottom: 0;\n width: 100%;\n background-color: #fff;\n user-select: none;\n -webkit-text-size-adjust: 100%;\n -webkit-tap-highlight-color: transparent;\n }\n .content {\n overflow: hidden;\n height: 220px;\n position: relative;\n display: flex;\n }\n .colums {\n display: flex;\n overflow: hidden;\n font-size: 16px;\n text-align: center;\n flex: 1;\n }\n .mask {\n position: absolute;\n top: 0;\n left: 0;\n z-index: 2;\n width: 100%;\n height: 100%;\n 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));\n background-repeat: no-repeat;\n background-position: top, bottom;\n backface-visibility: hidden;\n pointer-events: none;\n background-size: 100% 88px;\n }\n .hairline {\n position: absolute;\n top: 50%;\n left: 0;\n z-index: 3;\n width: 100%;\n transform: translateY(-50%);\n pointer-events: none;\n height: 44px;\n &::after {\n position: absolute;\n box-sizing: border-box;\n content: ' ';\n pointer-events: none;\n top: -50%;\n right: -50%;\n bottom: -50%;\n left: -50%;\n border: 0 solid #ebedf0;\n -webkit-transform: scale(0.5);\n transform: scale(0.5);\n border-width: 1px 0;\n }\n }\n</style>\n",".pickerbox {\n position: fixed;\n width: 100vw;\n height: 100vh;\n left: 0;\n bottom: 0;\n background: rgba(0, 0, 0, 0.7);\n z-index: 9999;\n overflow: hidden;\n}\n\n.fade-enter-active, .fade-leave-active {\n transition: opacity 0.2s;\n}\n\n.fade-enter, .fade-leave-to {\n opacity: 0;\n}\n\n.toup-enter-active, .toup-leave-active {\n transition: transform 0.3s;\n}\n\n.toup-enter, .toup-leave-to {\n transform: translate3d(0, 100px, 0);\n}\n\n.vue-picker {\n position: absolute;\n left: 0;\n bottom: 0;\n width: 100%;\n background-color: #fff;\n user-select: none;\n -webkit-text-size-adjust: 100%;\n -webkit-tap-highlight-color: transparent;\n}\n\n.content {\n overflow: hidden;\n height: 220px;\n position: relative;\n display: flex;\n}\n\n.colums {\n display: flex;\n overflow: hidden;\n font-size: 16px;\n text-align: center;\n flex: 1;\n}\n\n.mask {\n position: absolute;\n top: 0;\n left: 0;\n z-index: 2;\n width: 100%;\n height: 100%;\n background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.4)), linear-gradient(0deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.4));\n background-repeat: no-repeat;\n background-position: top, bottom;\n backface-visibility: hidden;\n pointer-events: none;\n background-size: 100% 88px;\n}\n\n.hairline {\n position: absolute;\n top: 50%;\n left: 0;\n z-index: 3;\n width: 100%;\n transform: translateY(-50%);\n pointer-events: none;\n height: 44px;\n}\n.hairline::after {\n position: absolute;\n box-sizing: border-box;\n content: \" \";\n pointer-events: none;\n top: -50%;\n right: -50%;\n bottom: -50%;\n left: -50%;\n border: 0 solid #ebedf0;\n -webkit-transform: scale(0.5);\n transform: scale(0.5);\n border-width: 1px 0;\n}\n\n/*# sourceMappingURL=index.vue.map */"]}, media: undefined });
|
|
|
|
};
|
|
/* scoped */
|
|
const __vue_scope_id__$2 = "data-v-200a1302";
|
|
/* module identifier */
|
|
const __vue_module_identifier__$2 = undefined;
|
|
/* functional template */
|
|
const __vue_is_functional_template__$2 = false;
|
|
/* style inject SSR */
|
|
|
|
/* style inject shadow dom */
|
|
|
|
|
|
|
|
var index = normalizeComponent(
|
|
{ render: __vue_render__$2, staticRenderFns: __vue_staticRenderFns__$2 },
|
|
__vue_inject_styles__$2,
|
|
__vue_script__$2,
|
|
__vue_scope_id__$2,
|
|
__vue_is_functional_template__$2,
|
|
__vue_module_identifier__$2,
|
|
false,
|
|
createInjector,
|
|
undefined,
|
|
undefined
|
|
);
|
|
|
|
export default index;
|
|
|