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.
1 lines
45 KiB
1 lines
45 KiB
(window.webpackJsonp=window.webpackJsonp||[]).push([["chunk-8af7aa2e"],{"161e":function(n,t,e){n.exports=e("b825")},b825:function(n,t,e){window,n.exports=function(n){var t={};function e(i){if(t[i])return t[i].exports;var s=t[i]={i:i,l:!1,exports:{}};return n[i].call(s.exports,s,s.exports,e),s.l=!0,s.exports}return e.m=n,e.c=t,e.d=function(n,t,i){e.o(n,t)||Object.defineProperty(n,t,{enumerable:!0,get:i})},e.r=function(n){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(n,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(n,"__esModule",{value:!0})},e.t=function(n,t){if(1&t&&(n=e(n)),8&t)return n;if(4&t&&"object"==typeof n&&n&&n.__esModule)return n;var i=Object.create(null);if(e.r(i),Object.defineProperty(i,"default",{enumerable:!0,value:n}),2&t&&"string"!=typeof n)for(var s in n)e.d(i,s,function(t){return n[t]}.bind(null,s));return i},e.n=function(n){var t=n&&n.__esModule?function(){return n.default}:function(){return n};return e.d(t,"a",t),t},e.o=function(n,t){return Object.prototype.hasOwnProperty.call(n,t)},e.p="/lib/",e(e.s=0)}([function(n,t,e){"use strict";function i(n,t,e,i,s,o,a,r,l,h){"boolean"!=typeof a&&(l=r,r=a,a=!1);const d="function"==typeof e?e.options:e;let c;if(n&&n.render&&(d.render=n.render,d.staticRenderFns=n.staticRenderFns,d._compiled=!0,s&&(d.functional=!0)),i&&(d._scopeId=i),o?(c=function(n){(n=n||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(n=__VUE_SSR_CONTEXT__),t&&t.call(this,l(n)),n&&n._registeredComponents&&n._registeredComponents.add(o)},d._ssrRegister=c):t&&(c=a?function(n){t.call(this,h(n,this.$root.$options.shadowRoot))}:function(n){t.call(this,r(n))}),c)if(d.functional){const n=d.render;d.render=function(t,e){return c.call(e),n(t,e)}}else{const n=d.beforeCreate;d.beforeCreate=n?[].concat(n,c):[c]}return e}e.r(t);const s="undefined"!=typeof navigator&&/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());function o(n){return(n,t)=>function(n,t){const e=s?t.media||"default":n,i=r[e]||(r[e]={ids:new Set,styles:[]});if(!i.ids.has(n)){i.ids.add(n);let e=t.source;if(t.map&&(e+="\n/*# sourceURL="+t.map.sources[0]+" */",e+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(t.map))))+" */"),i.element||(i.element=document.createElement("style"),i.element.type="text/css",t.media&&i.element.setAttribute("media",t.media),void 0===a&&(a=document.head||document.getElementsByTagName("head")[0]),a.appendChild(i.element)),"styleSheet"in i.element)i.styles.push(e),i.element.styleSheet.cssText=i.styles.filter(Boolean).join("\n");else{const n=i.ids.size-1,t=document.createTextNode(e),s=i.element.childNodes;s[n]&&i.element.removeChild(s[n]),s.length?i.element.insertBefore(t,s[n]):i.element.appendChild(t)}}}(n,t)}let a;const r={};var l={props:{cancelText:{type:String},confirmText:{type:String},title:{type:String}},methods:{cancel:function(){this.$emit("cancel")},confirm:function(){this.$emit("confirm")}}},h=function(){var n=this,t=n.$createElement,e=n._self._c||t;return e("div",{staticClass:"header"},[e("div",{staticClass:"left"},[e("span",{staticClass:"btn",on:{click:n.cancel}},[n._v(n._s(n.cancelText))])]),n._v(" "),e("div",{staticClass:"title"},[n._v(n._s(n.title))]),n._v(" "),e("div",{staticClass:"right"},[e("span",{staticClass:"btn",on:{click:n.confirm}},[n._v(n._s(n.confirmText))])])])};h._withStripped=!0;var d=i({render:h,staticRenderFns:[]},(function(n){n&&n("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:void 0})}),l,"data-v-6ffe26b0",!1,void 0,!1,o,void 0,void 0),c="ontouchstart"in window,A=c?"touchstart":"mousedown",u=c?"touchmove":"mousemove",m=c?"touchend":"mouseup",p=function(n){return{x:c?n.changedTouches[0].clientX:n.clientX,y:c?n.changedTouches[0].clientY:n.clientY}},f=function(){for(var n=navigator.userAgent,t=["Android","iPhone","SymbianOS","Windows Phone","iPad","iPod"],e=!0,i=0;i<t.length;i++)if(n.indexOf(t[i])>0){e=!1;break}return e}(),x={props:{defaultIndex:{type:Number,default:0},column:{type:Array,default:function(){return[]}},boxHeight:Number,itemHeight:Number,rowNumber:Number},data:function(){return{ulStyle:{transform:"translate3d(0px, 0px, 0px)",transitionDuration:"0ms",transitionProperty:"none",lineHeight:"".concat(this.itemHeight,"px")}}},computed:{count:function(){return this.column.length},getRoNumber:function(){return Math.floor(this.rowNumber/2)}},methods:{init:function(){this.setTop(this.defaultIndex);var n=(this.boxHeight-this.itemHeight)/2;this.bottom=n+this.itemHeight,this.top=n-this.count*this.itemHeight},setTop:function(){var n=arguments.length>0&&void 0!==arguments[0]?arguments[0]:0,t=this.boxHeight,e=this.itemHeight;this.startTop=(t-e)/2-n*e,this.ulStyle.transform="translate3d(0px, ".concat(this.startTop,"px, 0px)"),this.selectIndex=n,this.change()},handleStart:function(n){this.distStartTop=p(n).y,this.touchStartTime=Date.now(),this.startY=p(n).y,this.momentumTop=this.startTop,this.ulStyle.transitionDuration="0ms",this.ulStyle.transitionProperty="none",f&&(document.addEventListener(u,this.handleMove,!1),document.addEventListener(m,this.handleEnd,!1))},handleMove:function(n){n.preventDefault(),n.stopPropagation(),this.disY=p(n).y-this.startY,this.startY=p(n).y,this.startTop>=this.bottom?this.startTop=this.bottom:this.startTop<=this.top?this.startTop=this.top:this.startTop+=this.disY,this.ulStyle.transform="translate3d(0px, ".concat(this.startTop,"px, 0px)");var t=Date.now();t-this.touchStartTime>300&&(this.touchStartTime=t,this.momentumTop=this.startTop)},handleEnd:function(){f&&(document.removeEventListener(u,this.handleMove,!1),document.removeEventListener(m,this.handleEnd,!1));var n=this.startTop-this.momentumTop,t=Date.now()-this.touchStartTime;t<300&&Math.abs(n)>15?this.toMove(n,t):this.setTranfromTop()},setTranfromTop:function(){if(this.ulStyle.transitionProperty="all",this.ulStyle.transitionDuration="".concat(200,"ms"),this.startTop>=this.bottom-this.itemHeight)this.setTop();else if(this.startTop<=this.top+this.itemHeight)this.setTop(this.count-1);else{var n=Math.round(this.startTop/this.itemHeight);this.startTop=n*this.itemHeight,this.startTop>this.bottom?(this.startTop=this.bottom-this.itemHeight,n=-this.getRoNumber):this.startTop<this.top&&(this.startTop=this.top+this.itemHeight,n=this.count+1),this.ulStyle.transform="translate3d(0px, ".concat(this.startTop,"px, 0px)"),n=this.getRoNumber-n,this.selectIndex!==n&&(this.selectIndex=n,this.change())}},toMove:function(n,t){var e=Math.abs(n/t);n=this.startTop+e/.002*(n<0?-1:1),this.ulStyle.transitionProperty="all",this.ulStyle.transitionDuration="1000ms",this.setTop(Math.min(Math.max(Math.round(-n/this.itemHeight),0),this.count-1))},change:function(){this.$emit("change",this.column[this.selectIndex])},mousewheel:function(n){n.preventDefault(),n.stopPropagation(),this.ulStyle.transitionDuration="0ms",this.ulStyle.transitionProperty="none";var t=n.deltaX,e=n.deltaY;if(Math.abs(t)<Math.abs(e)){this.startTop=this.startTop-e;var i=this.bottom-this.itemHeight,s=this.top+this.itemHeight,o=!0;this.startTop>i?(this.startTop=i,o=!1):this.startTop<s&&(this.startTop=s,o=!1),this.ulStyle.transform="translate3d(0px, ".concat(this.startTop,"px, 0px)"),o&&(clearInterval(this.wheelTimer),this.wheelTimer=setTimeout(this.setTranfromTop,100))}}},mounted:function(){this.init(),this.$el.addEventListener(A,this.handleStart,!1),f?this.$el.addEventListener("wheel",this.mousewheel,!1):(this.$el.addEventListener(u,this.handleMove,!1),this.$el.addEventListener(m,this.handleEnd,!1))},watch:{column:function(){this.init()},defaultIndex:function(){this.setTop(this.defaultIndex)}},beforeDestroy:function(){this.$el.removeEventListener(A,this.handleStart,!1),f&&(this.$el.removeEventListener("wheel",this.mousewheel,!1),this.$el.removeEventListener(u,this.handleMove,!1),this.$el.removeEventListener(m,this.handleEnd,!1))}},g=function(){var n=this,t=n.$createElement,e=n._self._c||t;return e("div",{ref:"list",staticClass:"list"},[e("ul",{style:n.ulStyle},n._l(n.column,(function(t,i){return e("li",{key:"item"+i},[n._v(n._s(t.label))])})),0)])};g._withStripped=!0;var b=i({render:g,staticRenderFns:[]},(function(n){n&&n("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:void 0})}),x,"data-v-ec129ff4",!1,void 0,!1,o,void 0,void 0),v={name:"VuePicker",props:{visible:{type:Boolean,default:!1},data:{type:Array,default:function(){return[]}},layer:{type:Number,default:0},itemHeight:{type:[Number,String],default:44},defaultIndex:{type:[Number,Array],default:0},cancelText:{type:String,default:"取消"},confirmText:{type:String,default:"确认"},title:{type:String,default:""},showToolbar:{type:Boolean,default:!1},maskClick:{type:Boolean,default:!1},rowNumber:{type:Number,default:5},appendToBody:{type:Boolean,default:!1}},components:{Header:d,List:b},data:function(){return{column1:[],column2:[],column3:[],column4:[],dIndex1:0,dIndex2:0,dIndex3:0,dIndex4:0}},computed:{boxHeight:function(){var n=parseInt(this.itemHeight);return(n=n||44)*this.getRowNumber},getRowNumber:function(){return this.rowNumber<3?3:this.rowNumber%2==0?this.rowNumber+1:this.rowNumber},maskStyle:function(){var n={backgroundSize:"100% 88px"};return 3===this.getRowNumber&&(n={backgroundSize:"100% 44px"}),n}},methods:{clickMask:function(){this.maskClick&&(this.looseBody(),this.$emit("update:visible",!1))},formateData:function(){this.layer>1?this.setLinkColumn():(this.column1=this.data[0]||[],this.column2=this.data[1]||[],this.column3=this.data[2]||[],this.column4=this.data[3]||[],this.setNormalIndex())},setLinkColumn:function(){2===this.layer?this.setLinkLayer2():3===this.layer?(this.setLinkLayer2(),this.setLinkLayer3()):4===this.layer&&(this.setLinkLayer2(),this.setLinkLayer3(),this.setLinkLayer4())},setLinkLayer2:function(){var n=this,t=this.defaultIndex;this.column1=this.data||[],"number"==typeof t?(this.dIndex1=t,this.dIndex2=0,this.data.length>1&&this.data[0].children&&(this.column2=this.data[0].children||[])):Array.isArray(t)&&t.length>0&&(this.dIndex1=t[0]||0,this.column2=this.data[this.dIndex1].children||[],this.$nextTick((function(){n.column2.length-1<t[1]?n.dIndex2=n.column2.length-1:n.dIndex2=t[1]||0})))},setLinkLayer3:function(){var n=this,t=this.defaultIndex;"number"==typeof t?(this.dIndex3=0,this.column2.length>1&&this.column2[0].children&&(this.column3=this.column2[0].children||[])):Array.isArray(t)&&t.length>1&&this.$nextTick((function(){n.column3=n.column2[n.dIndex2].children||[],n.$nextTick((function(){n.column3.length-1<t[2]?n.dIndex3=n.column3.length-1:n.dIndex3=t[2]||0}))}))},setLinkLayer4:function(){var n=this,t=this.defaultIndex;"number"==typeof t?(this.dIndex4=0,this.column3.length>1&&this.column3[0].children&&(this.column4=this.column3[0].children||[])):Array.isArray(t)&&t.length>2&&setTimeout((function(){n.column4=n.column3[n.dIndex3].children||[],n.$nextTick((function(){n.column4.length-1<t[3]?n.dIndex4=n.column4.length-1:n.dIndex4=t[3]||0}))}))},setNormalIndex:function(){var n=this;this.$nextTick((function(){var t=n.defaultIndex;Array.isArray(t)?n.setDefaultIndex():n.dIndex1=Number(t)||0}))},setDefaultIndex:function(){var n=this.indexArr,t=this;!function(){for(var e=Promise.resolve(),i=0;i<t.data.length;)e=e.then(n[i]),i++}()},change:function(n,t){this.result[n]=t,this.$emit("change",this.result)},change1:function(n){n&&(this.change(0,n),this.layer>1&&(this.dIndex2=0,this.changeLink("column2",n)))},change2:function(n){n&&(this.change(1,n),this.layer>2&&(this.dIndex3=0,this.changeLink("column3",n)))},change3:function(n){n&&(this.change(2,n),this.layer>3&&(this.dIndex4=0,this.changeLink("column4",n)))},change4:function(n){n&&this.change(3,n)},changeLink:function(n,t){var e=this;this.layer&&(this.linktimer=setTimeout((function(){e[n]=t.children||[]}),1e3/60))},cancel:function(){this.looseBody(),this.$emit("cancel"),this.$emit("update:visible",!1)},confirm:function(){this.looseBody(),this.$emit("confirm",this.result),this.$emit("update:visible",!1)},stopPropagation:function(n){n.stopPropagation()},fixedBody:function(){var n=document.body.scrollTop||document.documentElement.scrollTop;this.prevBodyCss=document.body.style.cssText,document.body.style.cssText+="position:fixed;width:100%;top:-"+n+"px;"},looseBody:function(){var n=document.body,t=n.style.top;n.style.cssText=this.prevBodyCss,n.scrollTop=document.documentElement.scrollTop=-parseInt(t),n.style.top=""},init:function(){var n=this;this.result=[],this.indexArr=[function(){return n.dIndex1=n.defaultIndex[0]||0},function(){return n.dIndex2=n.defaultIndex[1]||0},function(){return n.dIndex3=n.defaultIndex[2]||0},function(){return n.dIndex4=n.defaultIndex[3]||0}],this.formateData()}},created:function(){this.init()},mounted:function(){this.$refs.picker.addEventListener("click",this.stopPropagation),this.appendToBody&&document.body.appendChild(this.$el)},watch:{visible:function(n){n&&this.fixedBody()},defaultIndex:function(){this.init()},data:function(){this.init()}},beforeDestroy:function(){this.$refs.picker.removeEventListener("click",this.stopPropagation)}},y=function(){var n=this,t=n.$createElement,e=n._self._c||t;return e("transition",{attrs:{name:"fade"}},[e("div",{directives:[{name:"show",rawName:"v-show",value:n.visible,expression:"visible"}],staticClass:"pickerbox",on:{click:n.clickMask}},[e("transition",{attrs:{name:"toup"}},[e("div",{directives:[{name:"show",rawName:"v-show",value:n.visible,expression:"visible"}],ref:"picker",staticClass:"vue-picker"},[n.showToolbar?e("Header",{attrs:{cancelText:n.cancelText,confirmText:n.confirmText,title:n.title},on:{cancel:n.cancel,confirm:n.confirm}}):n._e(),n._v(" "),e("div",{staticClass:"content",style:{height:n.boxHeight+"px"}},[e("div",{staticClass:"colums"},[e("List",{attrs:{column:n.column1,boxHeight:n.boxHeight,itemHeight:n.itemHeight,defaultIndex:n.dIndex1,rowNumber:n.getRowNumber},on:{change:n.change1}}),n._v(" "),n.column2.length>0?e("List",{attrs:{column:n.column2,boxHeight:n.boxHeight,itemHeight:n.itemHeight,defaultIndex:n.dIndex2,rowNumber:n.getRowNumber},on:{change:n.change2}}):n._e(),n._v(" "),n.column3.length>0?e("List",{attrs:{column:n.column3,boxHeight:n.boxHeight,itemHeight:n.itemHeight,defaultIndex:n.dIndex3,rowNumber:n.getRowNumber},on:{change:n.change3}}):n._e(),n._v(" "),n.column4.length>0?e("List",{attrs:{column:n.column4,boxHeight:n.boxHeight,itemHeight:n.itemHeight,defaultIndex:n.dIndex4,rowNumber:n.getRowNumber},on:{change:n.change4}}):n._e()],1),n._v(" "),e("div",{staticClass:"mask",style:n.maskStyle}),n._v(" "),e("div",{staticClass:"hairline"})])],1)])],1)])};y._withStripped=!0;var E=i({render:y,staticRenderFns:[]},(function(n){n&&n("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:void 0})}),v,"data-v-200a1302",!1,void 0,!1,o,void 0,void 0);"undefined"!=typeof window&&window.Vue&&window.Vue.component("vue-picker",E),E.install=function(n){n.component(E.name,E)},t.default=E}])}}]); |