forked from php-danfu.shenzhenbenwo.com

lefengyang
2025-09-10 9753a88eceb52a0f2e3084cf72f3474d2d7d7f1b
1
(window.webpackJsonp=window.webpackJsonp||[]).push([["chunk-8af7aa2e"],{"161e":function(n,t,e){n.exports=e("b825")},b825:function(n,t,e){function i(n){var t;return(o[n]||(t=o[n]={i:n,l:!1,exports:{}},s[n].call(t.exports,t,t.exports,i),t.l=!0,t)).exports}var s,o;window,n.exports=(s=[function(n,t,e){function i(n,t,e,i,s,o,a,r,l,h){"boolean"!=typeof a&&(l=r,r=a,a=!1);var 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){let n=d.render;d.render=function(t,e){return c.call(e),n(t,e)}}else{let n=d.beforeCreate;d.beforeCreate=n?[].concat(n,c):[c]}return e}e.r(t);let s="undefined"!=typeof navigator&&/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());function o(n){return(n,t)=>{var e=n,i=t;n=s?i.media||"default":e;if(!(n=l[n]||(l[n]={ids:new Set,styles:[]})).ids.has(e)){n.ids.add(e);let t=i.source;if(i.map&&(t=(t+="\n/*# sourceURL="+i.map.sources[0]+" */")+"\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(i.map))))+" */"),n.element||(n.element=document.createElement("style"),n.element.type="text/css",i.media&&n.element.setAttribute("media",i.media),(r=void 0===r?document.head||document.getElementsByTagName("head")[0]:r).appendChild(n.element)),"styleSheet"in n.element)n.styles.push(t),n.element.styleSheet.cssText=n.styles.filter(Boolean).join("\n");else{let e=n.ids.size-1,i=document.createTextNode(t),s=n.element.childNodes;s[e]&&n.element.removeChild(s[e]),s.length?n.element.insertBefore(i,s[e]):n.element.appendChild(i)}}}}function a(){var n=this,t=n.$createElement;return(t=n._self._c||t)("div",{staticClass:"header"},[t("div",{staticClass:"left"},[t("span",{staticClass:"btn",on:{click:n.cancel}},[n._v(n._s(n.cancelText))])]),n._v(" "),t("div",{staticClass:"title"},[n._v(n._s(n.title))]),n._v(" "),t("div",{staticClass:"right"},[t("span",{staticClass:"btn",on:{click:n.confirm}},[n._v(n._s(n.confirmText))])])])}let r,l={},h={props:{cancelText:{type:String},confirmText:{type:String},title:{type:String}},methods:{cancel:function(){this.$emit("cancel")},confirm:function(){this.$emit("confirm")}}};function d(n){return{x:(u?n.changedTouches[0]:n).clientX,y:(u?n.changedTouches[0]:n).clientY}}function c(){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)])}function A(){var n=this,t=n.$createElement;return(t=n._self._c||t)("transition",{attrs:{name:"fade"}},[t("div",{directives:[{name:"show",rawName:"v-show",value:n.visible,expression:"visible"}],staticClass:"pickerbox",on:{click:n.clickMask}},[t("transition",{attrs:{name:"toup"}},[t("div",{directives:[{name:"show",rawName:"v-show",value:n.visible,expression:"visible"}],ref:"picker",staticClass:"vue-picker"},[n.showToolbar?t("Header",{attrs:{cancelText:n.cancelText,confirmText:n.confirmText,title:n.title},on:{cancel:n.cancel,confirm:n.confirm}}):n._e(),n._v(" "),t("div",{staticClass:"content",style:{height:n.boxHeight+"px"}},[t("div",{staticClass:"colums"},[t("List",{attrs:{column:n.column1,boxHeight:n.boxHeight,itemHeight:n.itemHeight,defaultIndex:n.dIndex1,rowNumber:n.getRowNumber},on:{change:n.change1}}),n._v(" "),0<n.column2.length?t("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(" "),0<n.column3.length?t("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(" "),0<n.column4.length?t("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(" "),t("div",{staticClass:"mask",style:n.maskStyle}),n._v(" "),t("div",{staticClass:"hairline"})])],1)])],1)])}a._withStripped=!0;e=i({render:a,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})}),h,"data-v-6ffe26b0",!1,void 0,!1,o,void 0,void 0);var u="ontouchstart"in window,m=u?"touchstart":"mousedown",p=u?"touchmove":"mousemove",f=u?"touchend":"mouseup",x=(()=>{for(var n=navigator.userAgent,t=["Android","iPhone","SymbianOS","Windows Phone","iPad","iPod"],e=!0,i=0;i<t.length;i++)if(0<n.indexOf(t[i])){e=!1;break}return e})(),g={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=0<arguments.length&&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=d(n).y,this.touchStartTime=Date.now(),this.startY=d(n).y,this.momentumTop=this.startTop,this.ulStyle.transitionDuration="0ms",this.ulStyle.transitionProperty="none",x&&(document.addEventListener(p,this.handleMove,!1),document.addEventListener(f,this.handleEnd,!1))},handleMove:function(n){n.preventDefault(),n.stopPropagation(),this.disY=d(n).y-this.startY,this.startY=d(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)"),n=Date.now(),300<n-this.touchStartTime&&(this.touchStartTime=n,this.momentumTop=this.startTop)},handleEnd:function(){x&&(document.removeEventListener(p,this.handleMove,!1),document.removeEventListener(f,this.handleEnd,!1));var n=this.startTop-this.momentumTop,t=Date.now()-this.touchStartTime;t<300&&15<Math.abs(n)?this.toMove(n,t):this.setTranfromTop()},setTranfromTop:function(){var n;this.ulStyle.transitionProperty="all",this.ulStyle.transitionDuration="".concat(200,"ms"),this.startTop>=this.bottom-this.itemHeight?this.setTop():this.startTop<=this.top+this.itemHeight?this.setTop(this.count-1):(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){t=Math.abs(n/t),n=this.startTop+t/.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,e=n.deltaX;n=n.deltaY;Math.abs(e)<Math.abs(n)&&(this.startTop=this.startTop-n,e=this.bottom-this.itemHeight,n=this.top+this.itemHeight,t=!0,this.startTop>e?(this.startTop=e,t=!1):this.startTop<n&&(this.startTop=n,t=!1),this.ulStyle.transform="translate3d(0px, ".concat(this.startTop,"px, 0px)"),t)&&(clearInterval(this.wheelTimer),this.wheelTimer=setTimeout(this.setTranfromTop,100))}},mounted:function(){this.init(),this.$el.addEventListener(m,this.handleStart,!1),x?this.$el.addEventListener("wheel",this.mousewheel,!1):(this.$el.addEventListener(p,this.handleMove,!1),this.$el.addEventListener(f,this.handleEnd,!1))},watch:{column:function(){this.init()},defaultIndex:function(){this.setTop(this.defaultIndex)}},beforeDestroy:function(){this.$el.removeEventListener(m,this.handleStart,!1),x&&(this.$el.removeEventListener("wheel",this.mousewheel,!1),this.$el.removeEventListener(p,this.handleMove,!1),this.$el.removeEventListener(f,this.handleEnd,!1))}},b=(g=(c._withStripped=!0,i({render:c,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})}),g,"data-v-ec129ff4",!1,void 0,!1,o,void 0,void 0)),e={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:e,List:g},data:function(){return{column1:[],column2:[],column3:[],column4:[],dIndex1:0,dIndex2:0,dIndex3:0,dIndex4:0}},computed:{boxHeight:function(){return(parseInt(this.itemHeight)||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?{backgroundSize:"100% 44px"}:n}},methods:{clickMask:function(){this.maskClick&&(this.looseBody(),this.$emit("update:visible",!1))},formateData:function(){1<this.layer?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,1<this.data.length&&this.data[0].children&&(this.column2=this.data[0].children||[])):Array.isArray(t)&&0<t.length&&(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,1<this.column2.length&&this.column2[0].children&&(this.column3=this.column2[0].children||[])):Array.isArray(t)&&1<t.length&&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,1<this.column3.length&&this.column3[0].children&&(this.column4=this.column3[0].children||[])):Array.isArray(t)&&2<t.length&&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(){for(var n=this.indexArr,t=this,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),1<this.layer)&&(this.dIndex2=0,this.changeLink("column2",n))},change2:function(n){n&&(this.change(1,n),2<this.layer)&&(this.dIndex3=0,this.changeLink("column3",n))},change3:function(n){n&&(this.change(2,n),3<this.layer)&&(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)}},A._withStripped=!0,i({render:A,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})}),e,"data-v-200a1302",!1,void 0,!1,o,void 0,void 0));"undefined"!=typeof window&&window.Vue&&window.Vue.component("vue-picker",b),b.install=function(n){n.component(b.name,b)},t.default=b}],o={},i.m=s,i.c=o,i.d=function(n,t,e){i.o(n,t)||Object.defineProperty(n,t,{enumerable:!0,get:e})},i.r=function(n){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(n,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(n,"__esModule",{value:!0})},i.t=function(n,t){if(1&t&&(n=i(n)),8&t)return n;if(4&t&&"object"==typeof n&&n&&n.__esModule)return n;var e=Object.create(null);if(i.r(e),Object.defineProperty(e,"default",{enumerable:!0,value:n}),2&t&&"string"!=typeof n)for(var s in n)i.d(e,s,function(t){return n[t]}.bind(null,s));return e},i.n=function(n){var t=n&&n.__esModule?function(){return n.default}:function(){return n};return i.d(t,"a",t),t},i.o=function(n,t){return Object.prototype.hasOwnProperty.call(n,t)},i.p="/lib/",i(i.s=0))}}]);