├── .DS_Store
├── .gitignore
├── LICENSE
├── README-en.md
├── README.md
├── city-data.js
├── dist
    ├── index.js
    └── picker.esm.js
├── example
    ├── .DS_Store
    ├── css
    │   └── app.279fbbfe.css
    ├── favicon.ico
    ├── index.html
    └── js
    │   ├── app.5d01ef29.js
    │   └── chunk-vendors.0ee7c3c1.js
├── index.js
├── lib
    └── vue-picker.js
├── package.json
├── rollup.config.js
├── src
    ├── city-data.js
    ├── header.vue
    ├── index.js
    ├── index.vue
    ├── list.vue
    ├── picker.vue
    ├── render.js
    └── utils.js
├── webpack.config.js
└── yarn.lock


/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/naihe138/vue-picker/2aed086132dc327206cd19a9f67d1de8f1532500/.DS_Store


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | .DS_Store
3 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) [2017] [naihe138]
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.


--------------------------------------------------------------------------------
/README-en.md:
--------------------------------------------------------------------------------
 1 | English | [中文](https://github.com/naihe138/vue-picker)
 2 | 
 3 | A picker componemt for vue2.0
 4 | ------
 5 | ![vue-pick.gif][1]
 6 | 
 7 | 
 8 | ## Demo
 9 | 
10 | [https://naihe138.github.io/vue-picker/index.html][3]
11 | 
12 | 
13 | ## Install
14 | 
15 | `npm install vue-pickers --save` or `yarn add vue-pickers`
16 | 
17 | ## Use
18 | 
19 | ````javascript
20 | <template>
21 |   <div>
22 |     <button @click="show">show picker</button>
23 |     <VuePicker :data="pickData"
24 |       :showToolbar="true"
25 |       @cancel="cancel"
26 |       @confirm="confirm"
27 |       :visible.sync="pickerVisible"
28 |     />
29 |   </div>
30 | </template>
31 | 
32 | <script>
33 |   import VuePicker from 'vue-pickers'
34 |   var tdata = []
35 |   for (let i = 0; i < 20; i++) {
36 |     tdata.push({
37 |       label: 'The' + i + 'row',
38 |       value: i
39 |     })
40 |   }
41 |   export default {
42 |     components: {
43 |       VuePicker
44 |     },
45 |     data () {
46 |       return {
47 |         pickerVisible: false,
48 |         pickData: [
49 |           tdata
50 |         ],
51 |         result: ''
52 |       }
53 |     },
54 |     methods: {
55 |       show () {
56 |         this.pickerVisible = true
57 |       },
58 |       cancel () {
59 |         this.result = 'click cancel result: null'
60 |       },
61 |       confirm (res) {
62 |         this.result = JSON.stringify(res)
63 |       }
64 |     }
65 |   }
66 | </script>
67 | ````
68 | 
69 | ## Attributes
70 | 
71 | Attribute | Description | require | Type | Default
72 | ---- | --- | --- | --- | ---
73 | visible | show/hide picker | yes | Boolean | false
74 | data | pickerData，colums[data1, data2]  | yes | Array | []
75 | layer | linkage column  | no | Number | 0
76 | defaultIndex | default index  | no | Number/Array(for more colums) | 无
77 | cancelText | cancel text  | no | String | '取消'
78 | confirmText | confirm text  | no | String | '确认'
79 | title | picker title  | no | String | ''
80 | showToolbar | show toolbar  | no | Boolean | false
81 | maskClick | click mask  | no | Boolean | false
82 | itemHeight | height of each row | no | Number, String | '44px'
83 | rowNumber | how many lines to display (singular number recommended) | no | Number | 5
84 | appendToBody | Insert into body | no | Boolean | false
85 | 
86 | ## Events
87 | 
88 | Event Name | Description | require | Type | Default
89 | ---- | --- | --- | --- | ---
90 | change | select change | no | function(val) | -
91 | cancel | cancel button click | no | function | -
92 | confirm | confirm button click  | no | function(val) | -
93 | 
94 | 
95 | [1]: http://ypimg.naice.me/vue-picker.gif
96 | [3]: https://naihe138.github.io/vue-picker/index.html
97 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | 中文 | [English](https://github.com/naihe138/vue-picker/blob/master/README-en.md)
  2 | 
  3 | 
  4 | `vue-picker`的组件，囊括了（`普通选择`、`联动选择`、`中国地址选择`）等等常见的picker，兼容PC、移动端，通过简单配置就可以出现一个强大的picker，感受下效果图。
  5 | 
  6 | 
  7 | ![vue-pick.gif][1]
  8 | 
  9 | 
 10 | ## Demo(快点去复制代码体验一波吧)
 11 | 
 12 | [https://naihe138.github.io/vue-picker/index.html][3]
 13 | 
 14 | 
 15 | ## Install
 16 | 
 17 | `npm install vue-pickers --save` or `yarn add vue-pickers`
 18 | 
 19 | 
 20 | ## 使用
 21 | 
 22 | > 普通网页开发直接复制lib/vue-picker.js文件夹到项目即可直接使用
 23 | 
 24 | ````javascript
 25 | <template>
 26 |   <div>
 27 |     <button @click="show">show picker</button>
 28 |     <VuePicker :data="pickData"
 29 |       :showToolbar="true"
 30 |       @cancel="cancel"
 31 |       @confirm="confirm"
 32 |       :visible.sync="pickerVisible"
 33 |     />
 34 |   </div>
 35 | </template>
 36 | 
 37 | <script>
 38 |   import VuePicker from 'vue-pickers'
 39 |   var tdata = []
 40 |   for (let i = 0; i < 20; i++) {
 41 |     tdata.push({
 42 |       label: '第' + i + '行',
 43 |       value: i
 44 |     })
 45 |   }
 46 |   export default {
 47 |     components: {
 48 |       VuePicker
 49 |     },
 50 |     data () {
 51 |       return {
 52 |         pickerVisible: false,
 53 |         pickData: [
 54 |           tdata
 55 |         ],
 56 |         result: ''
 57 |       }
 58 |     },
 59 |     methods: {
 60 |       show () {
 61 |         this.pickerVisible = true
 62 |       },
 63 |       cancel () {
 64 |         this.result = 'click cancel result: null'
 65 |       },
 66 |       confirm (res) {
 67 |         this.result = JSON.stringify(res)
 68 |       }
 69 |     }
 70 |   }
 71 | </script>
 72 | ````
 73 | 
 74 | ## 属性参数说明
 75 | 
 76 | 参数 | 说明 | 是否必须 | 类型 |默认值
 77 | ---- | --- | --- | --- | ---
 78 | visible | 显示/隐藏picker | 是 | Boolean | false
 79 | data | pickerData，多列[data1, data2]  | 是 | Array | []
 80 | layer | 联动显示列数  | 否 | Number | 0
 81 | defaultIndex | 默认显示的index  | 否 | Number/Array(多列用数组) | 无
 82 | cancelText | 取消按钮文字  | 否 | String | '取消'
 83 | confirmText | 去确认按钮文字  | 否 | String | '确认'
 84 | title | picker标题  | 否 | String | ''
 85 | showToolbar | 显示头部  | 否 | Boolean | false
 86 | maskClick | 遮罩层是否可以点击关闭  | 否 | Boolean | false
 87 | itemHeight | 每一行的高度 | 否 | Number, String | '44px'
 88 | rowNumber | 显示多少行(建议单数) | 否 | Number | 5
 89 | appendToBody | 是否插入到body中 | 否 | Boolean | false
 90 | 
 91 | ## 事件说明
 92 | 
 93 | 参数 | 说明 | 是否必须 | 类型 |默认值
 94 | ---- | --- | --- | --- | ---
 95 | change | 数据变化事件 | 否 | function(val) | 无
 96 | cancel | 取消选择 | 否 | function | 无
 97 | confirm | 确认选择  | 否 | function(val) | 无
 98 | 
 99 | 
100 | [1]: http://ypimg.naice.me/vue-picker.gif
101 | [3]: https://naihe138.github.io/vue-picker/index.html
102 | 


--------------------------------------------------------------------------------
/dist/index.js:
--------------------------------------------------------------------------------
 1 | 'use strict'
 2 | import Picker from './picker.esm.js'
 3 | 
 4 | if (typeof window !== 'undefined' && window.Vue) {
 5 |   window.Vue.component('vue-picker', Picker)
 6 | }
 7 | 
 8 | Picker.install = function(Vue){
 9 |   Vue.component(Picker.name, Picker)
10 | }
11 | 
12 | export default Picker
13 | 


--------------------------------------------------------------------------------
/dist/picker.esm.js:
--------------------------------------------------------------------------------
  1 | import { normalizeComponent, createInjector } from 'vue-runtime-helpers';
  2 | 
  3 | //
  4 | //
  5 | //
  6 | //
  7 | //
  8 | //
  9 | //
 10 | //
 11 | //
 12 | //
 13 | //
 14 | //
 15 | 
 16 | // TODO： 支持自定义的render渲染
 17 | // import textRender from './render'
 18 | var script = {
 19 |   props: {
 20 |     cancelText: {
 21 |       type: String
 22 |     },
 23 |     confirmText: {
 24 |       type: String
 25 |     },
 26 |     title: {
 27 |       type: String
 28 |     }
 29 |   },
 30 |   methods: {
 31 |     cancel () {
 32 |       this.$emit('cancel');
 33 |     },
 34 |     confirm () {
 35 |       this.$emit('confirm');
 36 |     }
 37 |   }
 38 | };
 39 | 
 40 | /* script */
 41 | const __vue_script__ = script;
 42 | 
 43 | /* template */
 44 | var __vue_render__ = function() {
 45 |   var _vm = this;
 46 |   var _h = _vm.$createElement;
 47 |   var _c = _vm._self._c || _h;
 48 |   return _c("div", { staticClass: "header" }, [
 49 |     _c("div", { staticClass: "left" }, [
 50 |       _c("span", { staticClass: "btn", on: { click: _vm.cancel } }, [
 51 |         _vm._v(_vm._s(_vm.cancelText))
 52 |       ])
 53 |     ]),
 54 |     _vm._v(" "),
 55 |     _c("div", { staticClass: "title" }, [_vm._v(_vm._s(_vm.title))]),
 56 |     _vm._v(" "),
 57 |     _c("div", { staticClass: "right" }, [
 58 |       _c("span", { staticClass: "btn", on: { click: _vm.confirm } }, [
 59 |         _vm._v(_vm._s(_vm.confirmText))
 60 |       ])
 61 |     ])
 62 |   ])
 63 | };
 64 | var __vue_staticRenderFns__ = [];
 65 | __vue_render__._withStripped = true;
 66 | 
 67 |   /* style */
 68 |   const __vue_inject_styles__ = function (inject) {
 69 |     if (!inject) return
 70 |     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 });
 71 | 
 72 |   };
 73 |   /* scoped */
 74 |   const __vue_scope_id__ = "data-v-6ffe26b0";
 75 |   /* module identifier */
 76 |   const __vue_module_identifier__ = undefined;
 77 |   /* functional template */
 78 |   const __vue_is_functional_template__ = false;
 79 |   /* style inject SSR */
 80 |   
 81 |   /* style inject shadow dom */
 82 |   
 83 | 
 84 |   
 85 |   var Header = normalizeComponent(
 86 |     { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
 87 |     __vue_inject_styles__,
 88 |     __vue_script__,
 89 |     __vue_scope_id__,
 90 |     __vue_is_functional_template__,
 91 |     __vue_module_identifier__,
 92 |     false,
 93 |     createInjector,
 94 |     undefined,
 95 |     undefined
 96 |   );
 97 | 
 98 | const DEFTAULT_ITEM_HEIGHT = 44;
 99 | 
100 | // 兼容pc 移动端
101 | const HAS_TOUCH = 'ontouchstart' in window;
102 | const START_EVENT = HAS_TOUCH ? 'touchstart' : 'mousedown';
103 | const MOVE_EVENT = HAS_TOUCH ? 'touchmove' : 'mousemove';
104 | const END_EVENT = HAS_TOUCH ? 'touchend' : 'mouseup';
105 | 
106 | const getClient = e => {
107 |   let clientX = HAS_TOUCH ? e.changedTouches[0].clientX : e.clientX;
108 |   let clientY = HAS_TOUCH ? e.changedTouches[0].clientY : e.clientY;
109 |   return {
110 |     x: clientX,
111 |     y: clientY
112 |   }
113 | };
114 | const isPC = () => {
115 |   const userAgentInfo = navigator.userAgent;
116 |   const Agents = ['Android', 'iPhone', 'SymbianOS', 'Windows Phone', 'iPad', 'iPod'];
117 |   let flag = true;
118 |   for (var v = 0; v < Agents.length; v++) {
119 |     if (userAgentInfo.indexOf(Agents[v]) > 0) {
120 |       flag = false;
121 |       break
122 |     }
123 |   }
124 |   return flag
125 | };
126 | 
127 | //
128 | const DEFAULT_DURATION = 200;
129 | // 惯性滑动思路:
130 | // 在手指离开屏幕时，如果和上一次 move 时的间隔小于 `LIMIT_TIME` 且 move
131 | // 距离大于 `LIMIT_DISTANCE` 时，执行惯性滑动
132 | const LIMIT_TIME = 300;
133 | const LIMIT_DISTANCE = 15;
134 | const IS_PC = isPC();
135 | var script$1 = {
136 |   props: {
137 |     defaultIndex: {
138 |       type: Number,
139 |       default: 0
140 |     },
141 |     column: {
142 |       type: Array,
143 |       default: () => ([])
144 |     },
145 |     boxHeight: Number,
146 |     itemHeight: Number,
147 |     rowNumber: Number
148 |   },
149 |   data() {
150 |     return {
151 |       ulStyle: {
152 |         transform: `translate3d(0px, 0px, 0px)`,
153 |         transitionDuration: `0ms`,
154 |         transitionProperty: `none`,
155 |         lineHeight: `${this.itemHeight}px`
156 |       }
157 |     }
158 |   },
159 |   computed: {
160 |     count() {
161 |       return this.column.length
162 |     },
163 |     getRoNumber() {
164 |       return Math.floor(this.rowNumber / 2)
165 |     }
166 |   },
167 |   methods: {
168 |     init () {
169 |       this.setTop(this.defaultIndex);
170 |       const halfBox = (this.boxHeight - this.itemHeight) / 2;
171 |       this.bottom = halfBox + this.itemHeight;
172 |       this.top = halfBox - this.count * this.itemHeight;
173 |     },
174 |     // 根据index 设置滚动位置
175 |     setTop (index = 0) {
176 |       const { boxHeight, itemHeight } = this;
177 |       this.startTop = ((boxHeight - itemHeight) / 2) - (index * itemHeight);
178 |       this.ulStyle.transform = `translate3d(0px, ${this.startTop}px, 0px)`;
179 |       this.selectIndex = index;
180 |       this.change();
181 |     },
182 |     handleStart (e) {
183 |       this.distStartTop = getClient(e).y;
184 |       this.touchStartTime = Date.now();
185 |       // ----
186 |       this.startY = getClient(e).y;
187 |       this.momentumTop = this.startTop;
188 | 
189 |       this.ulStyle.transitionDuration = `0ms`;
190 |       this.ulStyle.transitionProperty = `none`;
191 |       if (IS_PC) {
192 |         document.addEventListener(MOVE_EVENT, this.handleMove, false);
193 |         document.addEventListener(END_EVENT, this.handleEnd, false);
194 |       }
195 |     },
196 |     handleMove (e) {
197 |       e.preventDefault();
198 |       e.stopPropagation();
199 |       this.disY = getClient(e).y - this.startY;
200 |       this.startY = getClient(e).y;
201 |       if (this.startTop >= this.bottom) {
202 |         this.startTop = this.bottom;
203 |       } else if (this.startTop <= this.top) {
204 |         this.startTop = this.top;
205 |       } else {
206 |         this.startTop += this.disY;
207 |       }
208 |       this.ulStyle.transform = `translate3d(0px, ${this.startTop}px, 0px)`;
209 |       const now = Date.now();
210 | 
211 |       if (now - this.touchStartTime > LIMIT_TIME) {
212 |         this.touchStartTime = now;
213 |         this.momentumTop = this.startTop;
214 |       }
215 |     },
216 |     handleEnd () {
217 |       if (IS_PC) {
218 |         document.removeEventListener(MOVE_EVENT, this.handleMove, false);
219 |         document.removeEventListener(END_EVENT, this.handleEnd, false);
220 |       }
221 |       const distance = this.startTop - this.momentumTop;
222 |       const duration = Date.now() - this.touchStartTime;
223 |       const allowMomentum = duration < LIMIT_TIME && Math.abs(distance) > LIMIT_DISTANCE;
224 |       if (allowMomentum) {
225 |         this.toMove(distance, duration);
226 |       } else {
227 |         this.setTranfromTop();
228 |       }
229 |     },
230 |     setTranfromTop () {
231 |       this.ulStyle.transitionProperty = `all`;
232 |       this.ulStyle.transitionDuration = `${DEFAULT_DURATION}ms`;
233 |       if (this.startTop >= this.bottom - this.itemHeight) {
234 |         this.setTop();
235 |       } else if (this.startTop <= this.top + this.itemHeight) {
236 |         this.setTop(this.count - 1);
237 |       } else {
238 |         let index = Math.round((this.startTop) / this.itemHeight);
239 |         this.startTop = index * this.itemHeight;
240 |         if (this.startTop > this.bottom) {
241 |           this.startTop = this.bottom - this.itemHeight;
242 |           index = -this.getRoNumber;
243 |         } else if (this.startTop < this.top) {
244 |           this.startTop = this.top + this.itemHeight;
245 |           index = this.count + 1;
246 |         }
247 |         this.ulStyle.transform = `translate3d(0px, ${this.startTop}px, 0px)`;
248 |         index = this.getRoNumber - index;
249 |         if (this.selectIndex !== index) {
250 |           this.selectIndex = index;
251 |           this.change();
252 |         }
253 |       }
254 |     },
255 |     toMove (distance, duration) {
256 |       const speed = Math.abs(distance / duration);
257 |       distance = this.startTop + (speed / 0.002) * (distance < 0 ? -1 : 1);
258 |       this.ulStyle.transitionProperty = `all`;
259 |       this.ulStyle.transitionDuration = `1000ms`;
260 |       this.setTop(Math.min(Math.max(Math.round(-distance / this.itemHeight), 0), this.count - 1));
261 |     },
262 |     change () {
263 |       this.$emit('change', this.column[this.selectIndex]);
264 |     },
265 |     mousewheel (e) {
266 |       e.preventDefault();
267 |       e.stopPropagation();
268 |       this.ulStyle.transitionDuration = `0ms`;
269 |       this.ulStyle.transitionProperty = `none`;
270 |       const { deltaX, deltaY } = e;
271 |       if (Math.abs(deltaX) < Math.abs(deltaY)) {
272 |         this.startTop = this.startTop - deltaY;
273 |         let b = this.bottom - this.itemHeight;
274 |         let t = this.top + this.itemHeight;
275 |         let shouldMove = true;
276 |         if (this.startTop > b ) {
277 |           this.startTop = b;
278 |           shouldMove = false;
279 |         } else if (this.startTop < t) {
280 |           this.startTop = t;
281 |           shouldMove = false;
282 |         }
283 |         this.ulStyle.transform = `translate3d(0px, ${this.startTop}px, 0px)`;
284 |         if (shouldMove) {
285 |           clearInterval(this.wheelTimer);
286 |           this.wheelTimer = setTimeout(this.setTranfromTop, 100);
287 |         }
288 |       }
289 |     }
290 |   },
291 |   mounted () {
292 |     this.init();
293 |     // 监听开始事件
294 |     this.$el.addEventListener(START_EVENT, this.handleStart, false);
295 |     if (IS_PC) {
296 |       this.$el.addEventListener('wheel', this.mousewheel, false);
297 |     } else {
298 |       this.$el.addEventListener(MOVE_EVENT, this.handleMove, false);
299 |       this.$el.addEventListener(END_EVENT, this.handleEnd, false);
300 |     }
301 |   },
302 |   watch: {
303 |     column () {
304 |       this.init();
305 |     },
306 |     defaultIndex () {
307 |       this.setTop(this.defaultIndex);
308 |     }
309 |   },
310 |   beforeDestroy () {
311 |     this.$el.removeEventListener(START_EVENT, this.handleStart, false);
312 |     if (IS_PC) {
313 |       this.$el.removeEventListener('wheel', this.mousewheel, false);
314 |       this.$el.removeEventListener(MOVE_EVENT, this.handleMove, false);
315 |       this.$el.removeEventListener(END_EVENT, this.handleEnd, false);
316 |     }
317 |   }
318 | };
319 | 
320 | /* script */
321 | const __vue_script__$1 = script$1;
322 | 
323 | /* template */
324 | var __vue_render__$1 = function() {
325 |   var _vm = this;
326 |   var _h = _vm.$createElement;
327 |   var _c = _vm._self._c || _h;
328 |   return _c("div", { ref: "list", staticClass: "list" }, [
329 |     _c(
330 |       "ul",
331 |       { style: _vm.ulStyle },
332 |       _vm._l(_vm.column, function(item, index) {
333 |         return _c("li", { key: "item" + index }, [_vm._v(_vm._s(item.label))])
334 |       }),
335 |       0
336 |     )
337 |   ])
338 | };
339 | var __vue_staticRenderFns__$1 = [];
340 | __vue_render__$1._withStripped = true;
341 | 
342 |   /* style */
343 |   const __vue_inject_styles__$1 = function (inject) {
344 |     if (!inject) return
345 |     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 });
346 | 
347 |   };
348 |   /* scoped */
349 |   const __vue_scope_id__$1 = "data-v-ec129ff4";
350 |   /* module identifier */
351 |   const __vue_module_identifier__$1 = undefined;
352 |   /* functional template */
353 |   const __vue_is_functional_template__$1 = false;
354 |   /* style inject SSR */
355 |   
356 |   /* style inject shadow dom */
357 |   
358 | 
359 |   
360 |   var List = normalizeComponent(
361 |     { render: __vue_render__$1, staticRenderFns: __vue_staticRenderFns__$1 },
362 |     __vue_inject_styles__$1,
363 |     __vue_script__$1,
364 |     __vue_scope_id__$1,
365 |     __vue_is_functional_template__$1,
366 |     __vue_module_identifier__$1,
367 |     false,
368 |     createInjector,
369 |     undefined,
370 |     undefined
371 |   );
372 | 
373 | //
374 | var script$2 = {
375 |   name: 'VuePicker',
376 |   props: {
377 |     visible: {
378 |       type: Boolean,
379 |       default: false
380 |     },
381 |     data: {
382 |       type: Array,
383 |       default: () => []
384 |     },
385 |     layer: {
386 |       type: Number,
387 |       default: 0
388 |     },
389 |     itemHeight: {
390 |       type: [Number, String],
391 |       default: DEFTAULT_ITEM_HEIGHT
392 |     },
393 |     defaultIndex: {
394 |       type: [Number, Array],
395 |       default: 0
396 |     },
397 |     cancelText: {
398 |       type: String,
399 |       default: '取消'
400 |     },
401 |     confirmText: {
402 |       type: String,
403 |       default: '确认'
404 |     },
405 |     title: {
406 |       type: String,
407 |       default: ''
408 |     },
409 |     showToolbar: {
410 |       type: Boolean,
411 |       default: false
412 |     },
413 |     maskClick: {
414 |       type: Boolean,
415 |       default: false
416 |     },
417 |     rowNumber: {
418 |       type: Number,
419 |       default: 5
420 |     },
421 |     appendToBody: {
422 |       type: Boolean,
423 |       default: false
424 |     }
425 |   },
426 |   components: {
427 |     Header,
428 |     List
429 |   },
430 |   data () {
431 |     return {
432 |       column1: [],
433 |       column2: [],
434 |       column3: [],
435 |       column4: [],
436 |       dIndex1: 0,
437 |       dIndex2: 0,
438 |       dIndex3: 0,
439 |       dIndex4: 0
440 |     }
441 |   },
442 |   computed: {
443 |     boxHeight () {
444 |       let itemHeight = parseInt(this.itemHeight);
445 |       itemHeight = itemHeight ? itemHeight : DEFTAULT_ITEM_HEIGHT;
446 |       return itemHeight * this.getRowNumber
447 |     },
448 |     getRowNumber () {
449 |       if (this.rowNumber < 3) {
450 |         return 3
451 |       }
452 |       return this.rowNumber % 2 === 0 ? this.rowNumber + 1 : this.rowNumber
453 |     },
454 |     maskStyle() {
455 |       let style = { backgroundSize: '100% 88px' };
456 |       if (this.getRowNumber === 3) {
457 |         style = { backgroundSize: '100% 44px' };
458 |       }
459 |       return style
460 |     }
461 |   },
462 |   methods: {
463 |     clickMask () {
464 |       if (this.maskClick) {
465 |         this.looseBody();
466 |         this.$emit('update:visible', false);
467 |       }
468 |     },
469 |     formateData () {
470 |       if (this.layer > 1) {
471 |         this.setLinkColumn();
472 |       } else {
473 |         this.column1 = this.data[0] || [];
474 |         this.column2 = this.data[1] || [];
475 |         this.column3 = this.data[2] || [];
476 |         this.column4 = this.data[3] || [];
477 |         this.setNormalIndex();
478 |       }
479 |     },
480 |     setLinkColumn () {
481 |       if (this.layer === 2) {
482 |         this.setLinkLayer2();
483 |       } else if (this.layer === 3) {
484 |         this.setLinkLayer2();
485 |         this.setLinkLayer3();
486 |       } else if (this.layer === 4) {
487 |         this.setLinkLayer2();
488 |         this.setLinkLayer3();
489 |         this.setLinkLayer4();
490 |       }
491 |     },
492 |     setLinkLayer2 () {
493 |       const { defaultIndex } = this;
494 |       this.column1 = this.data || [];
495 |       if (typeof defaultIndex === 'number') {
496 |         this.dIndex1 = defaultIndex;
497 |         this.dIndex2 = 0;
498 |         if (this.data.length > 1 && this.data[0].children) {
499 |           this.column2 = this.data[0].children || [];
500 |         }
501 |       } else if (Array.isArray(defaultIndex) && defaultIndex.length > 0){
502 |         this.dIndex1 = defaultIndex[0] || 0;
503 |         this.column2 = this.data[this.dIndex1].children || [];
504 |         this.$nextTick(() => {
505 |           if (this.column2.length - 1 < defaultIndex[1]) {
506 |             this.dIndex2 = this.column2.length - 1;
507 |           } else {
508 |             this.dIndex2 = defaultIndex[1] || 0;
509 |           }
510 |         });
511 |       }
512 |     },
513 |     setLinkLayer3 () {
514 |       const { defaultIndex } = this;
515 |       if (typeof defaultIndex === 'number') {
516 |         this.dIndex3 = 0;
517 |         if (this.column2.length > 1 && this.column2[0].children) {
518 |           this.column3 = this.column2[0].children || [];
519 |         }
520 |       } else if (Array.isArray(defaultIndex) && defaultIndex.length > 1){
521 |         this.$nextTick(() => {
522 |           this.column3 = this.column2[this.dIndex2].children || [];
523 |           this.$nextTick(() => {
524 |             if (this.column3.length - 1 < defaultIndex[2]) {
525 |               this.dIndex3 = this.column3.length - 1;
526 |             } else {
527 |               this.dIndex3 = defaultIndex[2] || 0;
528 |             }
529 |           });
530 |         });
531 |       }
532 |     },
533 |     setLinkLayer4 () {
534 |       const { defaultIndex } = this;
535 |       if (typeof defaultIndex === 'number') {
536 |         this.dIndex4 = 0;
537 |         if (this.column3.length > 1 && this.column3[0].children) {
538 |           this.column4 = this.column3[0].children || [];
539 |         }
540 |       } else if (Array.isArray(defaultIndex) && defaultIndex.length > 2){
541 |         setTimeout(() => {
542 |           this.column4 = this.column3[this.dIndex3].children || [];
543 |           this.$nextTick(() => {
544 |             if (this.column4.length - 1 < defaultIndex[3]) {
545 |               this.dIndex4 = this.column4.length - 1;
546 |             } else {
547 |               this.dIndex4 = defaultIndex[3] || 0;
548 |             }
549 |           });
550 |         });
551 |       }
552 |     },
553 |     setNormalIndex () {
554 |       this.$nextTick(() => {
555 |         const { defaultIndex } = this;
556 |         if (Array.isArray(defaultIndex)) {
557 |           this.setDefaultIndex();
558 |         } else {
559 |           this.dIndex1 = Number(defaultIndex) || 0;
560 |         }
561 |       });
562 |     },
563 |     setDefaultIndex () {
564 |       const { indexArr } = this;
565 |       const self = this;
566 |       function next() {
567 |         let promise = Promise.resolve();
568 |         let index = 0;
569 |         while (index < self.data.length) {
570 |           promise = promise.then(indexArr[index]);
571 |           index++;
572 |         }
573 |       }
574 |       next();
575 |     },
576 |     change (index, res) {
577 |       this.result[index] = res;
578 |       this.$emit('change', this.result);
579 |     },
580 |     change1 (res) {
581 |       if (res) {
582 |         this.change(0, res);
583 |         if (this.layer > 1) {
584 |           this.dIndex2 = 0;
585 |           this.changeLink('column2', res);
586 |         }
587 |       }
588 |     },
589 |     change2 (res) {
590 |       if (res) {
591 |         this.change(1, res);
592 |         if (this.layer > 2) {
593 |           this.dIndex3 = 0;
594 |           this.changeLink('column3', res);
595 |         }
596 |       }
597 |     },
598 |     change3 (res) {
599 |       if (res) {
600 |         this.change(2, res);
601 |         if (this.layer > 3) {
602 |           this.dIndex4 = 0;
603 |           this.changeLink('column4', res);
604 |         }
605 |       }
606 |     },
607 |     change4 (res) {
608 |       if (res) {
609 |         this.change(3, res);
610 |       }
611 |     },
612 |     changeLink (key, res) {
613 |       if (this.layer) {
614 |         // clearTimeout(this.linktimer)
615 |         this.linktimer = setTimeout(() => {
616 |           this[key] = res.children || [];
617 |         }, 1000 / 60);
618 |       }
619 |     },
620 |     cancel () {
621 |       this.looseBody();
622 |       this.$emit('cancel');
623 |       this.$emit('update:visible', false);
624 |     },
625 |     confirm () {
626 |       this.looseBody();
627 |       this.$emit('confirm', this.result);
628 |       this.$emit('update:visible', false);
629 |     },
630 |     stopPropagation (e) {
631 |       e.stopPropagation();
632 |     },
633 |     fixedBody() {
634 |       const scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
635 |       this.prevBodyCss = document.body.style.cssText;
636 |       document.body.style.cssText += 'position:fixed;width:100%;top:-' + scrollTop + 'px;';
637 |     },
638 |     looseBody() {
639 |       const body = document.body;
640 |       const top = body.style.top;
641 |       body.style.cssText = this.prevBodyCss;
642 |       body.scrollTop = document.documentElement.scrollTop = -parseInt(top);
643 |       body.style.top = '';
644 |     },
645 |     init() {
646 |       this.result = [];
647 |       this.indexArr = [
648 |         () => this.dIndex1 = this.defaultIndex[0] || 0,
649 |         () => this.dIndex2 = this.defaultIndex[1] || 0,
650 |         () => this.dIndex3 = this.defaultIndex[2] || 0,
651 |         () => this.dIndex4 = this.defaultIndex[3] || 0
652 |       ];
653 |       this.formateData();
654 |     }
655 |   },
656 |   created () {
657 |     this.init();
658 |   },
659 |   mounted () {
660 |     this.$refs.picker.addEventListener('click', this.stopPropagation);
661 |     if (this.appendToBody) {
662 |       document.body.appendChild(this.$el);
663 |     }
664 |   },
665 |   watch: {
666 |     visible (v) {
667 |       if (v) {
668 |         this.fixedBody();
669 |       }
670 |     },
671 |     defaultIndex () {
672 |       this.init();
673 |     },
674 |     data() {
675 |       this.init();
676 |     }
677 |   },
678 |   beforeDestroy () {
679 |     this.$refs.picker.removeEventListener('click', this.stopPropagation);
680 |   }
681 | };
682 | 
683 | /* script */
684 | const __vue_script__$2 = script$2;
685 | 
686 | /* template */
687 | var __vue_render__$2 = function() {
688 |   var _vm = this;
689 |   var _h = _vm.$createElement;
690 |   var _c = _vm._self._c || _h;
691 |   return _c("transition", { attrs: { name: "fade" } }, [
692 |     _c(
693 |       "div",
694 |       {
695 |         directives: [
696 |           {
697 |             name: "show",
698 |             rawName: "v-show",
699 |             value: _vm.visible,
700 |             expression: "visible"
701 |           }
702 |         ],
703 |         staticClass: "pickerbox",
704 |         on: { click: _vm.clickMask }
705 |       },
706 |       [
707 |         _c("transition", { attrs: { name: "toup" } }, [
708 |           _c(
709 |             "div",
710 |             {
711 |               directives: [
712 |                 {
713 |                   name: "show",
714 |                   rawName: "v-show",
715 |                   value: _vm.visible,
716 |                   expression: "visible"
717 |                 }
718 |               ],
719 |               ref: "picker",
720 |               staticClass: "vue-picker"
721 |             },
722 |             [
723 |               _vm.showToolbar
724 |                 ? _c("Header", {
725 |                     attrs: {
726 |                       cancelText: _vm.cancelText,
727 |                       confirmText: _vm.confirmText,
728 |                       title: _vm.title
729 |                     },
730 |                     on: { cancel: _vm.cancel, confirm: _vm.confirm }
731 |                   })
732 |                 : _vm._e(),
733 |               _vm._v(" "),
734 |               _c(
735 |                 "div",
736 |                 {
737 |                   staticClass: "content",
738 |                   style: { height: _vm.boxHeight + "px" }
739 |                 },
740 |                 [
741 |                   _c(
742 |                     "div",
743 |                     { staticClass: "colums" },
744 |                     [
745 |                       _c("List", {
746 |                         attrs: {
747 |                           column: _vm.column1,
748 |                           boxHeight: _vm.boxHeight,
749 |                           itemHeight: _vm.itemHeight,
750 |                           defaultIndex: _vm.dIndex1,
751 |                           rowNumber: _vm.getRowNumber
752 |                         },
753 |                         on: { change: _vm.change1 }
754 |                       }),
755 |                       _vm._v(" "),
756 |                       _vm.column2.length > 0
757 |                         ? _c("List", {
758 |                             attrs: {
759 |                               column: _vm.column2,
760 |                               boxHeight: _vm.boxHeight,
761 |                               itemHeight: _vm.itemHeight,
762 |                               defaultIndex: _vm.dIndex2,
763 |                               rowNumber: _vm.getRowNumber
764 |                             },
765 |                             on: { change: _vm.change2 }
766 |                           })
767 |                         : _vm._e(),
768 |                       _vm._v(" "),
769 |                       _vm.column3.length > 0
770 |                         ? _c("List", {
771 |                             attrs: {
772 |                               column: _vm.column3,
773 |                               boxHeight: _vm.boxHeight,
774 |                               itemHeight: _vm.itemHeight,
775 |                               defaultIndex: _vm.dIndex3,
776 |                               rowNumber: _vm.getRowNumber
777 |                             },
778 |                             on: { change: _vm.change3 }
779 |                           })
780 |                         : _vm._e(),
781 |                       _vm._v(" "),
782 |                       _vm.column4.length > 0
783 |                         ? _c("List", {
784 |                             attrs: {
785 |                               column: _vm.column4,
786 |                               boxHeight: _vm.boxHeight,
787 |                               itemHeight: _vm.itemHeight,
788 |                               defaultIndex: _vm.dIndex4,
789 |                               rowNumber: _vm.getRowNumber
790 |                             },
791 |                             on: { change: _vm.change4 }
792 |                           })
793 |                         : _vm._e()
794 |                     ],
795 |                     1
796 |                   ),
797 |                   _vm._v(" "),
798 |                   _c("div", { staticClass: "mask", style: _vm.maskStyle }),
799 |                   _vm._v(" "),
800 |                   _c("div", { staticClass: "hairline" })
801 |                 ]
802 |               )
803 |             ],
804 |             1
805 |           )
806 |         ])
807 |       ],
808 |       1
809 |     )
810 |   ])
811 | };
812 | var __vue_staticRenderFns__$2 = [];
813 | __vue_render__$2._withStripped = true;
814 | 
815 |   /* style */
816 |   const __vue_inject_styles__$2 = function (inject) {
817 |     if (!inject) return
818 |     inject("data-v-176a7813_0", { source: ".pickerbox[data-v-176a7813] {\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-176a7813], .fade-leave-active[data-v-176a7813] {\n  -webkit-transition: opacity 0.2s;\n  transition: opacity 0.2s;\n}\n.fade-enter[data-v-176a7813], .fade-leave-to[data-v-176a7813] {\n  opacity: 0;\n}\n.toup-enter-active[data-v-176a7813], .toup-leave-active[data-v-176a7813] {\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-176a7813], .toup-leave-to[data-v-176a7813] {\n  -webkit-transform: translate3d(0, 100px, 0);\n          transform: translate3d(0, 100px, 0);\n}\n.vue-picker[data-v-176a7813] {\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  display: block;\n}\n.content[data-v-176a7813] {\n  overflow: hidden;\n  height: 220px;\n  position: relative;\n  display: -webkit-box;\n  display: flex;\n}\n.colums[data-v-176a7813] {\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-176a7813] {\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-176a7813] {\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-176a7813]::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;EACA,cAAA;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    display: block;\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  display: block;\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 });
819 | 
820 |   };
821 |   /* scoped */
822 |   const __vue_scope_id__$2 = "data-v-176a7813";
823 |   /* module identifier */
824 |   const __vue_module_identifier__$2 = undefined;
825 |   /* functional template */
826 |   const __vue_is_functional_template__$2 = false;
827 |   /* style inject SSR */
828 |   
829 |   /* style inject shadow dom */
830 |   
831 | 
832 |   
833 |   var index = normalizeComponent(
834 |     { render: __vue_render__$2, staticRenderFns: __vue_staticRenderFns__$2 },
835 |     __vue_inject_styles__$2,
836 |     __vue_script__$2,
837 |     __vue_scope_id__$2,
838 |     __vue_is_functional_template__$2,
839 |     __vue_module_identifier__$2,
840 |     false,
841 |     createInjector,
842 |     undefined,
843 |     undefined
844 |   );
845 | 
846 | export default index;
847 | 


--------------------------------------------------------------------------------
/example/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/naihe138/vue-picker/2aed086132dc327206cd19a9f67d1de8f1532500/example/.DS_Store


--------------------------------------------------------------------------------
/example/css/app.279fbbfe.css:
--------------------------------------------------------------------------------
1 | .header[data-v-70603ee2]{height:120px;background:#2fc6ff;color:#fff;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:30px;font-weight:500}.header[data-v-70603ee2],.nav[data-v-70603ee2]{display:-webkit-box;display:-ms-flexbox;display:flex}.nav[data-v-70603ee2]{-ms-flex-pack:distribute;justify-content:space-around;overflow:hidden;padding:10px;-ms-flex-wrap:wrap;flex-wrap:wrap}.nav span[data-v-70603ee2]{display:inline-block;text-decoration:none;border:1px solid #2fc6ff;padding:5px 10px;font-size:14px;margin-bottom:10px}.nav .active[data-v-70603ee2]{background:#2fc6ff;color:#fff}.tips[data-v-70603ee2]{background:rgba(0,0,0,.5);position:fixed;width:100px;height:26px;line-height:26px;text-align:center;font-size:14px;border-radius:4px;color:#fff;left:50%;top:50%;margin:-13px 0 0 -50px}.slide-fade-enter-active[data-v-70603ee2]{-webkit-transition:all .3s ease;transition:all .3s ease}.slide-fade-leave-active[data-v-70603ee2]{-webkit-transition:all .3s cubic-bezier(1,.5,.8,1);transition:all .3s cubic-bezier(1,.5,.8,1)}.slide-fade-enter[data-v-70603ee2],.slide-fade-leave-to[data-v-70603ee2]{-webkit-transform:translateY(-30px);transform:translateY(-30px);opacity:0}.btnbox{margin-top:10px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.btnbox .btn{background:#2e68fa;color:#fff;padding:5px 10px;display:inline-block;margin:0 10px;font-size:14px;border-radius:4px}.result{font-size:14px;text-align:center}.result p:nth-of-type(2){padding:0 10px;color:#004af5;line-height:2}body{margin:0;padding:0;background-color:#f8f8f8;font-family:PingFang SC,Helvetica,STHeiti STXihei,Microsoft YaHei,Tohoma,Arial,sans-serif;line-height:1;-webkit-font-smoothing:antialiased}


--------------------------------------------------------------------------------
/example/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/naihe138/vue-picker/2aed086132dc327206cd19a9f67d1de8f1532500/example/favicon.ico


--------------------------------------------------------------------------------
/example/index.html:
--------------------------------------------------------------------------------
1 | <!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1"><link rel=icon href=/favicon.ico><title>vue-picker-mayun</title><link href=/css/app.279fbbfe.css rel=preload as=style><link href=/js/app.5d01ef29.js rel=preload as=script><link href=/js/chunk-vendors.0ee7c3c1.js rel=preload as=script><link href=/css/app.279fbbfe.css rel=stylesheet></head><body><noscript><strong>We're sorry but vue-picker-mayun doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><script>document.body.addEventListener('touchmove', function (e) {
2 |         e.preventDefault(); //阻止默认的处理方式(阻止下拉滑动的效果)
3 |       }, {passive: false}); //passive 参数不能省略，用来兼容ios和android</script><script src=iscroll-lite.js></script><div id=app></div><a target=_blank href=https://github.com/naihe138/vue-picker aria-label="View source on Github" class=github-corner><svg width=80 height=80 viewBox="0 0 250 250" aria-hidden=true style="fill: rgb(21, 21, 19); color: rgb(255, 255, 255); position: absolute; top: 0px; border: 0px; right: 0px;"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill=currentColor class=octo-arm style="transform-origin: 130px 106px 0px;"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill=currentColor class=octo-body></path></svg></a><script src=/js/chunk-vendors.0ee7c3c1.js></script><script src=/js/app.5d01ef29.js></script></body></html>


--------------------------------------------------------------------------------
/example/js/app.5d01ef29.js:
--------------------------------------------------------------------------------
1 | (function(n){function l(l){for(var a,c,u=l[0],s=l[1],r=l[2],v=0,o=[];v<u.length;v++)c=u[v],Object.prototype.hasOwnProperty.call(t,c)&&t[c]&&o.push(t[c][0]),t[c]=0;for(a in s)Object.prototype.hasOwnProperty.call(s,a)&&(n[a]=s[a]);b&&b(l);while(o.length)o.shift()();return i.push.apply(i,r||[]),e()}function e(){for(var n,l=0;l<i.length;l++){for(var e=i[l],a=!0,u=1;u<e.length;u++){var s=e[u];0!==t[s]&&(a=!1)}a&&(i.splice(l--,1),n=c(c.s=e[0]))}return n}var a={},t={app:0},i=[];function c(l){if(a[l])return a[l].exports;var e=a[l]={i:l,l:!1,exports:{}};return n[l].call(e.exports,e,e.exports,c),e.l=!0,e.exports}c.m=n,c.c=a,c.d=function(n,l,e){c.o(n,l)||Object.defineProperty(n,l,{enumerable:!0,get:e})},c.r=function(n){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(n,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(n,"__esModule",{value:!0})},c.t=function(n,l){if(1&l&&(n=c(n)),8&l)return n;if(4&l&&"object"===typeof n&&n&&n.__esModule)return n;var e=Object.create(null);if(c.r(e),Object.defineProperty(e,"default",{enumerable:!0,value:n}),2&l&&"string"!=typeof n)for(var a in n)c.d(e,a,function(l){return n[l]}.bind(null,a));return e},c.n=function(n){var l=n&&n.__esModule?function(){return n["default"]}:function(){return n};return c.d(l,"a",l),l},c.o=function(n,l){return Object.prototype.hasOwnProperty.call(n,l)},c.p="/";var u=window["webpackJsonp"]=window["webpackJsonp"]||[],s=u.push.bind(u);u.push=l,u=u.slice();for(var r=0;r<u.length;r++)l(u[r]);var b=s;i.push([0,"chunk-vendors"]),e()})({0:function(n,l,e){n.exports=e("56d7")},"1d8e":function(n,l,e){},"20c0":function(n,l,e){"use strict";var a=e("5758"),t=e.n(a);t.a},"56d7":function(n,l,e){"use strict";e.r(l);e("e260"),e("e6cf"),e("cca6"),e("a79d");for(var a=e("2b0e"),t=function(){var n=this,l=n.$createElement,e=n._self._c||l;return e("div",[e("Home")],1)},i=[],c=function(){var n=this,l=n.$createElement,e=n._self._c||l;return e("div",[n._m(0),e("div",{staticClass:"body"},[e("div",{staticClass:"nav"},n._l(n.typeArr,(function(l,a){return e("span",{key:a,class:a===n.activeIndex?"active":"",on:{click:function(e){return n.clickItem(l,a)}}},[n._v(n._s(l.text))])})),0),e(n.currentView,{tag:"component",on:{tips:n.toTips}})],1),e("transition",{attrs:{name:"slide-fade"}},[e("div",{directives:[{name:"show",rawName:"v-show",value:n.showTips,expression:"showTips"}],staticClass:"tips"},[n._v("已复制")])])],1)},u=[function(){var n=this,l=n.$createElement,e=n._self._c||l;return e("div",{staticClass:"header"},[e("div",{staticClass:"title"},[n._v("vue-picker")])])}],s=function(){var n=this,l=n.$createElement,e=n._self._c||l;return e("div",[e("div",{staticClass:"btnbox"},[e("div",{staticClass:"btn",on:{click:function(l){n.pickerVisible=!0}}},[n._v("打开picker")]),e("div",{staticClass:"btn",on:{click:n.toCopy}},[n._v("复制demo代码")])]),e("div",{staticClass:"result"},[e("p",[n._v("----选择结果----")]),e("p",[n._v(n._s(n.result))])]),e("VuePicker",{attrs:{data:n.pickData,showToolbar:!0,visible:n.pickerVisible},on:{cancel:n.cancel,confirm:n.confirm,"update:visible":function(l){n.pickerVisible=l}}})],1)},r=[],b=e("161e"),v=e.n(b),o=e("f904"),d=e.n(o),p="\n<template>\n  <div>\n    <VuePicker :data=\"pickData\"\n      :showToolbar=\"true\"\n      @cancel=\"cancel\"\n      @confirm=\"confirm\"\n      :visible.sync=\"pickerVisible\"\n    />\n  </div>\n</template>\n\n<script>\nimport VuePicker from 'vue-pickers'\nvar tdata = []\nfor (let i = 0; i < 20; i++) {\n  tdata.push({\n    label: '第' + i + '行',\n    value: i\n  })\n}\nexport default {\n  components: {\n    VuePicker\n  },\n  data () {\n    return {\n      pickerVisible: false,\n      pickData: [\n        tdata\n      ],\n      result: ''\n    }\n  },\n  methods: {\n    cancel () {\n      this.result = 'click cancel result: null'\n    },\n    confirm (res) {\n      this.result = JSON.stringify(res)\n    }\n  }\n}\n<\/script>\n",f=[],h=0;h<20;h++)f.push({label:"第".concat(h,"行"),value:h});for(var m={name:"app",components:{VuePicker:v.a},data:function(){return{pickerVisible:!1,pickData:[f],result:""}},methods:{cancel:function(){console.log("cancel"),this.result="click cancel result: null"},confirm:function(n){this.result=JSON.stringify(n),console.log(n)},toCopy:function(){d()(p),this.$emit("tips")}}},k=m,y=e("2877"),g=Object(y["a"])(k,s,r,!1,null,null,null),x=g.exports,V=function(){var n=this,l=n.$createElement,e=n._self._c||l;return e("div",[e("div",{staticClass:"btnbox"},[e("div",{staticClass:"btn",on:{click:function(l){n.pickerVisible=!0}}},[n._v("打开picker")]),e("div",{staticClass:"btn",on:{click:n.toCopy}},[n._v("复制demo代码")]),e("div",{staticClass:"btn",on:{click:n.toCopy1}},[n._v("改变index")])]),e("div",{staticClass:"result"},[e("p",[n._v("----选择结果----")]),e("p",[n._v(n._s(n.result))])]),e("VuePicker",{attrs:{data:n.pickData,showToolbar:!0,defaultIndex:n.defaultIndex,visible:n.pickerVisible},on:{cancel:n.cancel,confirm:n.confirm,"update:visible":function(l){n.pickerVisible=l}}})],1)},w=[],j="\n\n<template>\n  <div>\n    <VuePicker :data=\"pickData\"\n      :showToolbar=\"true\"\n      @cancel=\"cancel\"\n      @confirm=\"confirm\"\n      :visible.sync=\"pickerVisible\"\n    />\n  </div>\n</template>\n\n<script>\n  import VuePicker from 'vue-pickers'\n  const tdata = [\n    {\n      label: '坦克',\n      value: 1\n    },\n    {\n      label: '刺客',\n      value: 2\n    },\n    {\n      label: '法师',\n      value: 2\n    },\n    {\n      label: '辅助',\n      value: 3\n    },\n    {\n      label: '战士',\n      value: 4\n    },\n    {\n      label: '射手',\n      value: 5\n    }\n  ]\n  var tdata2 = [\n    {\n      label: '李白',\n      value: 1\n    },\n    {\n      label: '曹操',\n      value: 2\n    },\n    {\n      label: '公孙离',\n      value: 3\n    },\n    {\n      label: '蔡文姬',\n      value: 4\n    },\n    {\n      label: '李元芳',\n      value: 5\n    },\n    {\n      label: '荆轲',\n      value: 6\n    },\n    {\n      label: '廉颇',\n      value: 7\n    },\n    {\n      label: '黄忠',\n      value: 8\n    }\n  ]\n\n  export default {\n    components: { VuePicker },\n    data () {\n      return {\n        pickerVisible: false,\n        pickData: [\n          tdata,\n          tdata2\n        ],\n        result: ''\n      }\n    },\n    methods: {\n      cancel () {\n        this.result = 'click cancel result: null'\n      },\n      confirm (res) {\n        this.result = JSON.stringify(res)\n      }\n    }\n  }\n<\/script>\n\n\n",_=[{label:"坦克",value:1},{label:"刺客",value:2},{label:"法师",value:2},{label:"辅助",value:3},{label:"战士",value:4},{label:"射手",value:5}],C=[{label:"李白",value:1},{label:"曹操",value:2},{label:"公孙离",value:3},{label:"蔡文姬",value:4},{label:"李元芳",value:5},{label:"荆轲",value:6},{label:"廉颇",value:7},{label:"黄忠",value:8}],z={name:"app",components:{VuePicker:v.a},data:function(){return{pickerVisible:!1,pickData:[_,C],result:"",defaultIndex:[1,2]}},methods:{cancel:function(){console.log("cancel"),this.result="click cancel result: null"},confirm:function(n){this.result=JSON.stringify(n),console.log(n)},toCopy:function(){d()(j),this.$emit("tips")},toCopy1:function(){this.defaultIndex=[3,4]}}},P=z,O=Object(y["a"])(P,V,w,!1,null,null,null),T=O.exports,D=function(){var n=this,l=n.$createElement,e=n._self._c||l;return e("div",[e("div",{staticClass:"btnbox"},[e("div",{staticClass:"btn",on:{click:function(l){n.pickerVisible=!0}}},[n._v("打开picker")]),e("div",{staticClass:"btn",on:{click:n.toCopy}},[n._v("复制demo代码")])]),e("div",{staticClass:"result"},[e("p",[n._v("----选择结果----")]),e("p",[n._v(n._s(n.result))])]),e("VuePicker",{attrs:{data:n.pickData,layer:2,defaultIndex:n.defaultIndex,showToolbar:!0,visible:n.pickerVisible},on:{cancel:n.cancel,confirm:n.confirm,"update:visible":function(l){n.pickerVisible=l}}})],1)},S=[],N=[{label:"深圳",value:"sz",children:[{label:"南山",value:"ns",children:[{label:"四海公园",value:"shgy"},{label:"中山公园",value:"zsgy"},{label:"荔香公园",value:"lxgy"},{label:"大南山公园",value:"dngy"},{label:"深圳湾公园",value:"shwgy"}]},{label:"福田",value:"ft",children:[{label:"中心公园",value:"zxgy"},{label:"荔枝公园",value:"lzgy"},{label:"莲花山公园",value:"lhgy"},{label:"笔架山公园",value:"bjsgy"},{label:"梅林公园",value:"mlgy"},{label:"皇岗公园",value:"wggy"},{label:"红树林公园",value:"hslgy"},{label:"园博园",value:"ybygy"}]},{label:"宝安",value:"ft",children:[{label:"凤凰山公园",value:"fhsgy"},{label:"凤岩古庙",value:"fygm"},{label:"凤凰禅寺",value:"fhcs"},{label:"文公祠",value:"wgc"},{label:"文昌塔",value:"wct"}]},{label:"罗湖",value:"lh",children:[{label:"地王大厦",value:"dwds"},{label:"梧桐山",value:"wgs"},{label:"洪湖公园",value:"hhgy"},{label:"弘法寺",value:"hfs"},{label:"荔枝公园",value:"lzgy"}]},{label:"盐田",value:"yt",children:[{label:"沙头角",value:"stj"},{label:"海山",value:"hs"},{label:"盐田田",value:"ytt"},{label:"梅沙",value:"ms"},{label:"荔枝公园",value:"lzgy"}]}]},{label:"广州",value:"gz",children:[{label:"越秀",value:"yx",children:[{label:"五羊石像",value:"wysx"},{label:"镇海楼",value:"zhl"},{label:"千年古道",value:"qngd"},{label:"北京路",value:"bjl"},{label:"中山纪念堂",value:"zsjng"}]},{label:"荔湾",value:"lw",children:[{label:"荔枝湾",value:"lzw"},{label:"上下九步行街",value:"sxjbxj"},{label:"沙面岛",value:"smd"},{label:"陈家祠",value:"cjc"},{label:"西关大屋",value:"xgdw"},{label:"华林寺",value:"hls"}]},{label:"海珠",value:"zh",children:[{label:"海珠湖",value:"lzw"},{label:"邓世昌纪念馆",value:"sxjbxj"},{label:"纯阳观",value:"smd"},{label:"海珠湿地",value:"cjc"},{label:"双塔辉映",value:"xgdw"}]},{label:"天河",value:"th",children:[{label:"花城广场",value:"hcgc"},{label:"海心沙",value:"hxc"},{label:"天河体育中心",value:"thtyzx"},{label:"华南植物园",value:"hnzwy"}]},{label:"白云",value:"by",children:[{label:"白云山",value:"byc"},{label:"云台花园",value:"ythy"},{label:"广州体育馆",value:"gztyg"},{label:"三元里",value:"syl"},{label:"帽峰山",value:"mfs"}]}]},{label:"上海",value:"sh",children:[{label:"黄浦",value:"hp",children:[{label:"外滩",value:"wt"},{label:"新天地",value:"xtd"},{label:"南京东路",value:"njdl"},{label:"淮海中路",value:"hhzl"},{label:"豫园",value:"yy"}]},{label:"徐汇",value:"xh",children:[{label:"上海植物园",value:"shzwy"},{label:"桂林公园",value:"glgy"},{label:"龙华寺",value:"lhs"},{label:"徐光启墓",value:"xgqm"}]},{label:"长宁",value:"cn",children:[{label:"宋庆龄陵园",value:"sqly"},{label:"刘海粟美术馆",value:"lhlmsg"},{label:"上海动物园",value:"shdwg"},{label:"国际展览中心",value:"gjzlzx"}]},{label:"虹口",value:"hk",children:[{label:"鲁迅公园",value:"lxgy"},{label:"上海大厦",value:"lsds"},{label:"梅园",value:"my"}]}]},{label:"北京",value:"bj",children:[{label:"东城",value:"dc",children:[{label:"景山前街",value:"jsqj"},{label:"五四大街",value:"wsdj"},{label:"南池子",value:"ncz"},{label:"雍和宫",value:"rhg"}]},{label:"西城",value:"xc",children:[{label:"醇王府",value:"chf"},{label:"齐白石故居",value:"qbsgj"},{label:"梅兰芳故居",value:"mlfgj"},{label:"郭沫若故居",value:"gmrgj"}]},{label:"海淀",value:"hd",children:[{label:"颐和园",value:"yhy"},{label:"圆明园遗址",value:"ymyyz"},{label:"香山公园",value:"xsgy"},{label:"玉泉山",value:"yqs"},{label:"大钟寺",value:"dzs"}]},{label:"朝阳",value:"cy",children:[{label:"朝阳-1",value:"1"},{label:"朝阳-2",value:"2"},{label:"朝阳-3",value:"3"},{label:"朝阳-4",value:"4"}]},{label:"丰台",value:"ft",children:[{label:"丰台-1",value:"1"},{label:"丰台-2",value:"2"},{label:"丰台-3",value:"3"},{label:"丰台-4",value:"4"}]},{label:"门头沟",value:"mtg",children:[{label:"门头沟-1",value:"1"},{label:"门头沟-2",value:"2"},{label:"门头沟-3",value:"3"},{label:"门头沟-4",value:"4"}]},{label:"昌平",value:"cp",children:[{label:"昌平-1",value:"1"},{label:"昌平-2",value:"2"},{label:"昌平-3",value:"3"},{label:"昌平-4",value:"4"}]},{label:"大兴",value:"dx",children:[{label:"大兴-1",value:"1"},{label:"大兴-2",value:"2"},{label:"大兴-3",value:"3"},{label:"大兴-4",value:"4"}]},{label:"顺义",value:"sy",children:[{label:"顺义-1",value:"1"},{label:"顺义-2",value:"2"},{label:"顺义-3",value:"3"},{label:"顺义-4",value:"4"}]}]}],J="\n\n<template>\n  <div>\n    <VuePicker :data=\"pickData\"\n      :layer=\"2\"\n      :defaultIndex=\"defaultIndex\"\n      :showToolbar=\"true\"\n      @cancel=\"cancel\"\n      @confirm=\"confirm\"\n      :visible.sync=\"pickerVisible\"\n    />\n  </div>\n</template>\n\n<script>\n  import VuePicker from 'vue-pickers'\n  import tdata from './link-cols'\n  export default {\n    name: 'app',\n    components: {\n      VuePicker\n    },\n    data () {\n      return {\n        showToolbar: true,\n        pickerVisible: false,\n        defaultIndex: [1, 2],\n        pickData: tdata,\n        result: ''\n      }\n    },\n    methods: {\n      cancel () {\n        console.log('cancel')\n      },\n      confirm (res) {\n        console.log(res)\n      }\n    }\n  }\n  // link-cols.js\n  var tdata = [\n    {\n      label: '深圳',\n      value: 'sz',\n      children: [\n        {\n          label: '南山',\n          value: 'ns',\n        },\n        {\n          label: '福田',\n          value: 'ft',\n        },\n        {\n          label: '宝安',\n          value: 'ft',\n        },\n        {\n          label: '罗湖',\n          value: 'lh',\n        },\n        {\n          label: '盐田',\n          value: 'yt',\n        }\n      ]\n    },\n    {\n      label: '广州',\n      value: 'gz',\n      children: [\n        {\n          label: '越秀',\n          value: 'yx',\n        },\n        {\n          label: '荔湾',\n          value: 'lw',\n        },\n        {\n          label: '海珠',\n          value: 'zh',\n        },\n        {\n          label: '天河',\n          value: 'th',\n        },\n        {\n          label: '白云',\n          value: 'by',\n        }\n      ]\n    },\n    {\n      label: '上海',\n      value: 'sh',\n      children: [\n        {\n          label: '黄浦',\n          value: 'hp',\n        },\n        {\n          label: '徐汇',\n          value: 'xh',\n        },\n        {\n          label: '长宁',\n          value: 'cn',\n        },\n        {\n          label: '虹口',\n          value: 'hk',\n        }\n      ]\n    },\n    {\n      label: '北京',\n      value: 'bj',\n      children: [\n        {\n          label: '东城',\n          value: 'dc',\n        },\n        {\n          label: '西城',\n          value: 'xc',\n        },\n        {\n          label: '海淀',\n          value: 'hd',\n        },\n        {\n          label: '朝阳',\n          value: 'cy',\n        },\n        {\n          label: '丰台',\n          value: 'ft',\n        },\n        {\n          label: '门头沟',\n          value: 'mtg',\n        },\n        {\n          label: '昌平',\n          value: 'cp',\n        },\n        {\n          label: '大兴',\n          value: 'dx',\n        },\n        {\n          label: '顺义',\n          value: 'sy',\n        }\n      ]\n    }\n  ]  \n<\/script>\n\n",$={name:"app",components:{VuePicker:v.a},data:function(){return{showToolbar:!0,pickerVisible:!1,defaultIndex:[1,2],pickData:N,result:""}},methods:{cancel:function(){console.log("cancel"),this.result="click cancel result: null"},confirm:function(n){var l=JSON.parse(JSON.stringify(n));l[0].children&&delete l[0].children,l[1].children&&delete l[1].children,this.result=JSON.stringify(l),console.log(n)},toCopy:function(){d()(J),this.$emit("tips")}}},I=$,E=Object(y["a"])(I,D,S,!1,null,null,null),q=E.exports,H=function(){var n=this,l=n.$createElement,e=n._self._c||l;return e("div",[e("div",{staticClass:"btnbox"},[e("div",{staticClass:"btn",on:{click:function(l){n.pickerVisible=!0}}},[n._v("打开picker")]),e("div",{staticClass:"btn",on:{click:n.toCopy}},[n._v("复制demo代码")])]),e("div",{staticClass:"result"},[e("p",[n._v("----选择结果----")]),e("p",[n._v(n._s(n.result))])]),e("VuePicker",{attrs:{data:n.pickData,showToolbar:!0,visible:n.pickerVisible},on:{cancel:n.cancel,confirm:n.confirm,"update:visible":function(l){n.pickerVisible=l}}})],1)},F=[],A="\n\n<template>\n  <div>\n    <VuePicker :data=\"pickData\"\n      :showToolbar=\"true\"\n      @cancel=\"cancel\"\n      @confirm=\"confirm\"\n      :visible.sync=\"pickerVisible\"\n    />\n  </div>\n</template>\n\n<script>\n  import VuePicker from 'vue-pickers'\n  const tdata = [\n    {\n      label: '坦克',\n      value: 1\n    },\n    {\n      label: '刺客',\n      value: 2\n    },\n    {\n      label: '法师',\n      value: 2\n    },\n    {\n      label: '辅助',\n      value: 3\n    },\n    {\n      label: '战士',\n      value: 4\n    },\n    {\n      label: '射手',\n      value: 5\n    }\n  ]\n  var tdata2 = [\n    {\n      label: '李白',\n      value: 1\n    },\n    {\n      label: '曹操',\n      value: 2\n    },\n    {\n      label: '公孙离',\n      value: 3\n    },\n    {\n      label: '蔡文姬',\n      value: 4\n    },\n    {\n      label: '李元芳',\n      value: 5\n    },\n    {\n      label: '荆轲',\n      value: 6\n    },\n    {\n      label: '廉颇',\n      value: 7\n    },\n    {\n      label: '黄忠',\n      value: 8\n    }\n  ]\n  let tdata3 = [\n    {\n      label: '东城',\n      value: 'dc',\n    },\n    {\n      label: '西城',\n      value: 'xc',\n    },\n    {\n      label: '海淀',\n      value: 'hd',\n    },\n    {\n      label: '朝阳',\n      value: 'cy',\n    },\n    {\n      label: '丰台',\n      value: 'ft'\n    },\n    {\n      label: '门头沟',\n      value: 'mtg'\n    },\n    {\n      label: '昌平',\n      value: 'cp'\n    },\n    {\n      label: '大兴',\n      value: 'dx'\n    },\n    {\n      label: '顺义',\n      value: 'sy'\n    }\n  ]\n  export default {\n    components: { VuePicker },\n    data () {\n      return {\n        pickerVisible: false,\n        pickData: [\n          tdata,\n          tdata2,\n          tdata3\n        ],\n        result: ''\n      }\n    },\n    methods: {\n      cancel () {\n        this.result = 'click cancel result: null'\n      },\n      confirm (res) {\n        this.result = JSON.stringify(res)\n      }\n    }\n  }\n<\/script>\n\n",L=[{label:"坦克",value:1},{label:"刺客",value:2},{label:"法师",value:2},{label:"辅助",value:3},{label:"战士",value:4},{label:"射手",value:5}],M=[{label:"李白",value:1},{label:"曹操",value:2},{label:"公孙离",value:3},{label:"蔡文姬",value:4},{label:"李元芳",value:5},{label:"荆轲",value:6},{label:"廉颇",value:7},{label:"黄忠",value:8}],B=[{label:"东城",value:"dc"},{label:"西城",value:"xc"},{label:"海淀",value:"hd"},{label:"朝阳",value:"cy"},{label:"丰台",value:"ft"},{label:"门头沟",value:"mtg"},{label:"昌平",value:"cp"},{label:"大兴",value:"dx"},{label:"顺义",value:"sy"}],G={name:"app",components:{VuePicker:v.a},data:function(){return{pickerVisible:!1,pickData:[L,M,B],result:""}},methods:{cancel:function(){console.log("cancel"),this.result="click cancel result: null"},confirm:function(n){this.result=JSON.stringify(n),console.log(n)},toCopy:function(){d()(A),this.$emit("tips")}}},K=G,Q=Object(y["a"])(K,H,F,!1,null,null,null),R=Q.exports,U=function(){var n=this,l=n.$createElement,e=n._self._c||l;return e("div",[e("div",{staticClass:"btnbox"},[e("div",{staticClass:"btn",on:{click:function(l){n.pickerVisible=!0}}},[n._v("打开picker")]),e("div",{staticClass:"btn",on:{click:n.toCopy}},[n._v("复制demo代码")])]),e("div",{staticClass:"result"},[e("p",[n._v("----选择结果----")]),e("p",[n._v(n._s(n.result))])]),e("VuePicker",{attrs:{data:n.pickData,layer:3,defaultIndex:n.defaultIndex,showToolbar:!0,visible:n.pickerVisible},on:{cancel:n.cancel,confirm:n.confirm,"update:visible":function(l){n.pickerVisible=l}}})],1)},W=[],X="\n\n<template>\n  <div>\n    <VuePicker :data=\"pickData\"\n      :layer=\"3\"\n      :defaultIndex=\"defaultIndex\"\n      :showToolbar=\"true\"\n      @cancel=\"cancel\"\n      @confirm=\"confirm\"\n      :visible.sync=\"pickerVisible\"\n    />\n  </div>\n</template>\n\n<script>\n  import VuePicker from 'vue-pickers'\n  import tdata from './link-cols'\n  export default {\n    name: 'app',\n    components: {\n      VuePicker\n    },\n    data () {\n      return {\n        showToolbar: true,\n        pickerVisible: false,\n        defaultIndex: [1, 2],\n        pickData: tdata,\n        result: ''\n      }\n    },\n    methods: {\n      cancel () {\n        console.log('cancel')\n      },\n      confirm (res) {\n        console.log(res)\n      }\n    }\n  }\n  // link-cols.js\n  var tdata = [\n    {\n      label: '深圳',\n      value: 'sz',\n      children: [\n        {\n          label: '南山',\n          value: 'ns',\n          children: [\n            {\n              label: '四海公园',\n              value: 'shgy',\n            },\n            {\n              label: '中山公园',\n              value: 'zsgy',\n            },\n            {\n              label: '荔香公园',\n              value: 'lxgy',\n            },\n            {\n              label: '大南山公园',\n              value: 'dngy',\n            },\n            {\n              label: '深圳湾公园',\n              value: 'shwgy',\n            }\n          ]\n        },\n        {\n          label: '福田',\n          value: 'ft',\n          children: [\n            {\n              label: '中心公园',\n              value: 'zxgy',\n            },\n            {\n              label: '荔枝公园',\n              value: 'lzgy',\n            },\n            {\n              label: '莲花山公园',\n              value: 'lhgy',\n            },\n            {\n              label: '笔架山公园',\n              value: 'bjsgy',\n            },\n            {\n              label: '梅林公园',\n              value: 'mlgy',\n            },\n            {\n              label: '皇岗公园',\n              value: 'wggy',\n            },\n            {\n              label: '红树林公园',\n              value: 'hslgy',\n            },\n            {\n              label: '园博园',\n              value: 'ybygy'\n            }\n          ]\n        },\n        {\n          label: '宝安',\n          value: 'ft',\n          children: [\n            {\n              label: '凤凰山公园',\n              value: 'fhsgy',\n            },\n            {\n              label: '凤岩古庙',\n              value: 'fygm',\n            },\n            {\n              label: '凤凰禅寺',\n              value: 'fhcs',\n            },\n            {\n              label: '文公祠',\n              value: 'wgc',\n            },\n            {\n              label: '文昌塔',\n              value: 'wct',\n            }\n          ]\n        },\n        {\n          label: '罗湖',\n          value: 'lh',\n          children: [\n            {\n              label: '地王大厦',\n              value: 'dwds',\n            },\n            {\n              label: '梧桐山',\n              value: 'wgs',\n            },\n            {\n              label: '洪湖公园',\n              value: 'hhgy',\n            },\n            {\n              label: '弘法寺',\n              value: 'hfs',\n            },\n            {\n              label: '荔枝公园',\n              value: 'lzgy',\n            }\n          ]\n        },\n        {\n          label: '盐田',\n          value: 'yt',\n          children: [\n            {\n              label: '沙头角',\n              value: 'stj',\n            },\n            {\n              label: '海山',\n              value: 'hs',\n            },\n            {\n              label: '盐田田',\n              value: 'ytt',\n            },\n            {\n              label: '梅沙',\n              value: 'ms',\n            },\n            {\n              label: '荔枝公园',\n              value: 'lzgy',\n            }\n          ]\n        }\n      ]\n    },\n    {\n      label: '广州',\n      value: 'gz',\n      children: [\n        {\n          label: '越秀',\n          value: 'yx',\n          children: [\n            {\n              label: '五羊石像',\n              value: 'wysx',\n            },\n            {\n              label: '镇海楼',\n              value: 'zhl',\n            },\n            {\n              label: '千年古道',\n              value: 'qngd',\n            },\n            {\n              label: '北京路',\n              value: 'bjl',\n            },\n            {\n              label: '中山纪念堂',\n              value: 'zsjng',\n            }\n          ]\n        },\n        {\n          label: '荔湾',\n          value: 'lw',\n          children: [\n            {\n              label: '荔枝湾',\n              value: 'lzw',\n            },\n            {\n              label: '上下九步行街',\n              value: 'sxjbxj',\n            },\n            {\n              label: '沙面岛',\n              value: 'smd',\n            },\n            {\n              label: '陈家祠',\n              value: 'cjc',\n            },\n            {\n              label: '西关大屋',\n              value: 'xgdw',\n            },\n            {\n              label: '华林寺',\n              value: 'hls',\n            }\n          ]\n        },\n        {\n          label: '海珠',\n          value: 'zh',\n          children: [\n            {\n              label: '海珠湖',\n              value: 'lzw',\n            },\n            {\n              label: '邓世昌纪念馆',\n              value: 'sxjbxj',\n            },\n            {\n              label: '纯阳观',\n              value: 'smd',\n            },\n            {\n              label: '海珠湿地',\n              value: 'cjc',\n            },\n            {\n              label: '双塔辉映',\n              value: 'xgdw',\n            }\n          ]\n        },\n        {\n          label: '天河',\n          value: 'th',\n          children: [\n            {\n              label: '花城广场',\n              value: 'hcgc',\n            },\n            {\n              label: '海心沙',\n              value: 'hxc',\n            },\n            {\n              label: '天河体育中心',\n              value: 'thtyzx',\n            },\n            {\n              label: '华南植物园',\n              value: 'hnzwy',\n            }\n          ]\n        },\n        {\n          label: '白云',\n          value: 'by',\n          children: [\n            {\n              label: '白云山',\n              value: 'byc',\n            },\n            {\n              label: '云台花园',\n              value: 'ythy',\n            },\n            {\n              label: '广州体育馆',\n              value: 'gztyg',\n            },\n            {\n              label: '三元里',\n              value: 'syl',\n            },\n            {\n              label: '帽峰山',\n              value: 'mfs',\n            }\n          ]\n        }\n      ]\n    },\n    {\n      label: '上海',\n      value: 'sh',\n      children: [\n        {\n          label: '黄浦',\n          value: 'hp',\n          children: [\n            {\n              label: '外滩',\n              value: 'wt',\n            },\n            {\n              label: '新天地',\n              value: 'xtd',\n            },\n            {\n              label: '南京东路',\n              value: 'njdl',\n            },\n            {\n              label: '淮海中路',\n              value: 'hhzl',\n            },\n            {\n              label: '豫园',\n              value: 'yy',\n            }\n          ]\n        },\n        {\n          label: '徐汇',\n          value: 'xh',\n          children: [\n            {\n              label: '上海植物园',\n              value: 'shzwy',\n            },\n            {\n              label: '桂林公园',\n              value: 'glgy',\n            },\n            {\n              label: '龙华寺',\n              value: 'lhs',\n            },\n            {\n              label: '徐光启墓',\n              value: 'xgqm',\n            },\n          ]\n        },\n        {\n          label: '长宁',\n          value: 'cn',\n          children: [\n            {\n              label: '宋庆龄陵园',\n              value: 'sqly',\n            },\n            {\n              label: '刘海粟美术馆',\n              value: 'lhlmsg',\n            },\n            {\n              label: '上海动物园',\n              value: 'shdwg',\n            },\n            {\n              label: '国际展览中心',\n              value: 'gjzlzx',\n            },\n          ]\n        },\n        {\n          label: '虹口',\n          value: 'hk',\n          children: [\n            {\n              label: '鲁迅公园',\n              value: 'lxgy',\n            },\n            {\n              label: '上海大厦',\n              value: 'lsds',\n            },\n            {\n              label: '梅园',\n              value: 'my',\n            }\n          ]\n        }\n      ]\n    },\n    {\n      label: '北京',\n      value: 'bj',\n      children: [\n        {\n          label: '东城',\n          value: 'dc',\n          children: [\n            {\n              label: '景山前街',\n              value: 'jsqj',\n            },\n            {\n              label: '五四大街',\n              value: 'wsdj',\n            },\n            {\n              label: '南池子',\n              value: 'ncz',\n            },\n            {\n              label: '雍和宫',\n              value: 'rhg',\n            }\n          ]\n        },\n        {\n          label: '西城',\n          value: 'xc',\n          children: [\n            {\n              label: '醇王府',\n              value: 'chf',\n            },\n            {\n              label: '齐白石故居',\n              value: 'qbsgj',\n            },\n            {\n              label: '梅兰芳故居',\n              value: 'mlfgj',\n            },\n            {\n              label: '郭沫若故居',\n              value: 'gmrgj',\n            }\n          ]\n        },\n        {\n          label: '海淀',\n          value: 'hd',\n          children: [\n            {\n              label: '颐和园',\n              value: 'yhy',\n            },\n            {\n              label: '圆明园遗址',\n              value: 'ymyyz',\n            },\n            {\n              label: '香山公园',\n              value: 'xsgy',\n            },\n            {\n              label: '玉泉山',\n              value: 'yqs',\n            },\n            {\n              label: '大钟寺',\n              value: 'dzs',\n            }\n          ]\n        },\n        {\n          label: '朝阳',\n          value: 'cy',\n          children: [\n            {\n              label: '朝阳-1',\n              value: '1',\n            },\n            {\n              label: '朝阳-2',\n              value: '2',\n            },\n            {\n              label: '朝阳-3',\n              value: '3',\n            },\n            {\n              label: '朝阳-4',\n              value: '4',\n            }\n          ]\n        },\n        {\n          label: '丰台',\n          value: 'ft',\n          children: [\n            {\n              label: '丰台-1',\n              value: '1',\n            },\n            {\n              label: '丰台-2',\n              value: '2',\n            },\n            {\n              label: '丰台-3',\n              value: '3',\n            },\n            {\n              label: '丰台-4',\n              value: '4',\n            }\n          ]\n        },\n        {\n          label: '门头沟',\n          value: 'mtg',\n          children: [\n            {\n              label: '门头沟-1',\n              value: '1',\n            },\n            {\n              label: '门头沟-2',\n              value: '2',\n            },\n            {\n              label: '门头沟-3',\n              value: '3',\n            },\n            {\n              label: '门头沟-4',\n              value: '4',\n            }\n          ]\n        },\n        {\n          label: '昌平',\n          value: 'cp',\n          children: [\n            {\n              label: '昌平-1',\n              value: '1',\n            },\n            {\n              label: '昌平-2',\n              value: '2',\n            },\n            {\n              label: '昌平-3',\n              value: '3',\n            },\n            {\n              label: '昌平-4',\n              value: '4',\n            }\n          ]\n        },\n        {\n          label: '大兴',\n          value: 'dx',\n          children: [\n            {\n              label: '大兴-1',\n              value: '1',\n            },\n            {\n              label: '大兴-2',\n              value: '2',\n            },\n            {\n              label: '大兴-3',\n              value: '3',\n            },\n            {\n              label: '大兴-4',\n              value: '4',\n            }\n          ]\n        },\n        {\n          label: '顺义',\n          value: 'sy',\n          children: [\n            {\n              label: '顺义-1',\n              value: '1',\n            },\n            {\n              label: '顺义-2',\n              value: '2',\n            },\n            {\n              label: '顺义-3',\n              value: '3',\n            },\n            {\n              label: '顺义-4',\n              value: '4',\n            }\n          ]\n        }\n      ]\n    }\n  ]  \n<\/script>\n\n",Y={name:"app",components:{VuePicker:v.a},data:function(){return{showToolbar:!0,pickerVisible:!1,defaultIndex:[1,2],pickData:N,result:""}},methods:{cancel:function(){console.log("cancel"),this.result="click cancel result: null"},confirm:function(n){var l=JSON.parse(JSON.stringify(n));l[0].children&&delete l[0].children,l[1].children&&delete l[1].children,l[2].children&&delete l[2].children,this.result=JSON.stringify(l),console.log(n)},toCopy:function(){d()(X),this.$emit("tips")}}},Z=Y,nn=Object(y["a"])(Z,U,W,!1,null,null,null),ln=nn.exports,en=function(){var n=this,l=n.$createElement,e=n._self._c||l;return e("div",[e("div",{staticClass:"btnbox"},[e("div",{staticClass:"btn",on:{click:function(l){n.pickerVisible=!0}}},[n._v("打开picker")]),e("div",{staticClass:"btn",on:{click:n.toCopy}},[n._v("复制demo代码")])]),e("div",{staticClass:"result"},[e("p",[n._v("----选择结果----")]),e("p",[n._v(n._s(n.result))])]),e("VuePicker",{attrs:{data:n.pickData,showToolbar:!0,visible:n.pickerVisible},on:{cancel:n.cancel,confirm:n.confirm,"update:visible":function(l){n.pickerVisible=l}}})],1)},an=[],tn="\n\n<template>\n  <div>\n    <VuePicker :data=\"pickData\"\n      :showToolbar=\"true\"\n      @cancel=\"cancel\"\n      @confirm=\"confirm\"\n      :visible.sync=\"pickerVisible\"\n    />\n  </div>\n</template>\n\n<script>\n  import VuePicker from 'vue-pickers'\n  const tdata = [\n    {\n      label: '坦克',\n      value: 1\n    },\n    {\n      label: '刺客',\n      value: 2\n    },\n    {\n      label: '法师',\n      value: 2\n    },\n    {\n      label: '辅助',\n      value: 3\n    },\n    {\n      label: '战士',\n      value: 4\n    },\n    {\n      label: '射手',\n      value: 5\n    }\n  ]\n  const tdata2 = [\n    {\n      label: '李白',\n      value: 1\n    },\n    {\n      label: '曹操',\n      value: 2\n    },\n    {\n      label: '公孙离',\n      value: 3\n    },\n    {\n      label: '蔡文姬',\n      value: 4\n    },\n    {\n      label: '李元芳',\n      value: 5\n    },\n    {\n      label: '荆轲',\n      value: 6\n    },\n    {\n      label: '廉颇',\n      value: 7\n    },\n    {\n      label: '黄忠',\n      value: 8\n    }\n  ]\n  const tdata3 = [\n    {\n      label: '东城',\n      value: 'dc',\n    },\n    {\n      label: '西城',\n      value: 'xc',\n    },\n    {\n      label: '海淀',\n      value: 'hd',\n    },\n    {\n      label: '朝阳',\n      value: 'cy',\n    },\n    {\n      label: '丰台',\n      value: 'ft'\n    },\n    {\n      label: '门头沟',\n      value: 'mtg'\n    },\n    {\n      label: '昌平',\n      value: 'cp'\n    },\n    {\n      label: '大兴',\n      value: 'dx'\n    },\n    {\n      label: '顺义',\n      value: 'sy'\n    }\n  ]\n  const tdata4 = [\n    {\n      label: '荔枝湾',\n      value: 'lzw',\n    },\n    {\n      label: '上下九步行街',\n      value: 'sxjbxj',\n    },\n    {\n      label: '沙面岛',\n      value: 'smd',\n    },\n    {\n      label: '陈家祠',\n      value: 'cjc',\n    },\n    {\n      label: '西关大屋',\n      value: 'xgdw',\n    },\n    {\n      label: '华林寺',\n      value: 'hls',\n    }\n  ]\n  export default {\n    components: { VuePicker },\n    data () {\n      return {\n        pickerVisible: false,\n        pickData: [\n          tdata,\n          tdata2,\n          tdata3,\n          tdata4\n        ],\n        result: ''\n      }\n    },\n    methods: {\n      cancel () {\n        this.result = 'click cancel result: null'\n      },\n      confirm (res) {\n        this.result = JSON.stringify(res)\n      }\n    }\n  }\n<\/script>\n\n",cn=[{label:"坦克",value:1},{label:"刺客",value:2},{label:"法师",value:2},{label:"辅助",value:3},{label:"战士",value:4},{label:"射手",value:5}],un=[{label:"李白",value:1},{label:"曹操",value:2},{label:"公孙离",value:3},{label:"蔡文姬",value:4},{label:"李元芳",value:5},{label:"荆轲",value:6},{label:"廉颇",value:7},{label:"黄忠",value:8}],sn=[{label:"东城",value:"dc"},{label:"西城",value:"xc"},{label:"海淀",value:"hd"},{label:"朝阳",value:"cy"},{label:"丰台",value:"ft"},{label:"门头沟",value:"mtg"},{label:"昌平",value:"cp"},{label:"大兴",value:"dx"},{label:"顺义",value:"sy"}],rn=[{label:"荔枝湾",value:"lzw"},{label:"上下九步行街",value:"sxjbxj"},{label:"沙面岛",value:"smd"},{label:"陈家祠",value:"cjc"},{label:"西关大屋",value:"xgdw"},{label:"华林寺",value:"hls"}],bn={name:"app",components:{VuePicker:v.a},data:function(){return{pickerVisible:!1,pickData:[cn,un,sn,rn],result:""}},methods:{cancel:function(){console.log("cancel"),this.result="click cancel result: null"},confirm:function(n){this.result=JSON.stringify(n),console.log(n)},toCopy:function(){d()(tn),this.$emit("tips")}}},vn=bn,on=Object(y["a"])(vn,en,an,!1,null,null,null),dn=on.exports,pn=function(){var n=this,l=n.$createElement,e=n._self._c||l;return e("div",[e("div",{staticClass:"btnbox"},[e("div",{staticClass:"btn",on:{click:function(l){n.pickerVisible=!0}}},[n._v("打开picker")]),e("div",{staticClass:"btn",on:{click:n.toCopy}},[n._v("复制demo代码")])]),e("div",{staticClass:"result"},[e("p",[n._v("----选择结果----")]),e("p",[n._v(n._s(n.result))])]),e("VuePicker",{attrs:{data:n.pickData,showToolbar:!1,maskClick:!0,visible:n.pickerVisible},on:{cancel:n.cancel,confirm:n.confirm,"update:visible":function(l){n.pickerVisible=l}}})],1)},fn=[],hn='\n\n<template>\n  <div>\n    <VuePicker :data="pickData"\n      @cancel="cancel"\n      @confirm="confirm"\n      :showToolbar="false"\n      :maskClick="true"\n      :visible.sync="pickerVisible"\n    />\n  </div>\n</template>\n\n<script>\n  import VuePicker from \'vue-pickers\'\n  var tdata = []\n  for (let i = 0; i < 20; i++) {\n    tdata.push({\n      label: \'第\' + i + \'行\',\n      value: i\n    })\n  }\n\n  export default {\n    components: { VuePicker },\n    data () {\n      return {\n        pickerVisible: false,\n        pickData: [ tdata ],\n        result: \'\'\n      }\n    },\n    methods: {\n      cancel () {\n        console.log(\'cancel\')\n      },\n      confirm (res) {\n        console.log(res)\n      }\n    },\n  }\n<\/script>\n\n',mn=[],kn=0;kn<20;kn++)mn.push({label:"第".concat(kn,"行"),value:kn});for(var yn={name:"app",components:{VuePicker:v.a},data:function(){return{pickerVisible:!1,pickData:[mn],result:""}},methods:{cancel:function(){console.log("cancel"),this.result="click cancel result: null"},confirm:function(n){this.result=JSON.stringify(n),console.log(n)},toCopy:function(){d()(hn),this.$emit("tips")}}},gn=yn,xn=Object(y["a"])(gn,pn,fn,!1,null,null,null),Vn=xn.exports,wn=function(){var n=this,l=n.$createElement,e=n._self._c||l;return e("div",[e("div",{staticClass:"btnbox"},[e("div",{staticClass:"btn",on:{click:function(l){n.pickerVisible=!0}}},[n._v("打开picker")]),e("div",{staticClass:"btn",on:{click:n.toCopy}},[n._v("复制demo代码")])]),e("div",{staticClass:"result"},[e("p",[n._v("----选择结果----")]),e("p",[n._v(n._s(n.result))])]),e("VuePicker",{attrs:{data:n.pickData,showToolbar:!0,title:"我是标题哦",cancelText:"取消哦",confirmText:"确认哦",visible:n.pickerVisible},on:{cancel:n.cancel,confirm:n.confirm,"update:visible":function(l){n.pickerVisible=l}}})],1)},jn=[],_n='\n\n<template>\n  <div>\n    <VuePicker :data="pickData"\n      :showToolbar="true"\n      title="我是标题哦"\n      cancelText="取消哦"\n      confirmText="确认哦"\n      @cancel="cancel"\n      @confirm="confirm"\n      :visible.sync="pickerVisible"\n    />\n  </div>\n</template>\n\n<script>\n  import VuePicker from \'vue-pickers\'\n  var tdata = []\n  for (let i = 0; i < 20; i++) {\n    tdata.push({\n      label: \'第\' + i + \'行\',\n      value: i\n    })\n  }\n\n  export default {\n    name: \'app\',\n    components: { VuePicker },\n    data () {\n      return {\n        pickerVisible: false,\n        pickData: [\n          tdata\n        ],\n        result: \'\'\n      }\n    },\n    methods: {\n      cancel () {\n        console.log(\'cancel\')\n      },\n      confirm (res) {\n        console.log(res)\n      }\n    },\n  }\n<\/script>\n\n',Cn=[],zn=0;zn<20;zn++)Cn.push({label:"第".concat(zn,"行"),value:zn});var Pn={name:"app",components:{VuePicker:v.a},data:function(){return{pickerVisible:!1,pickData:[Cn],result:""}},methods:{cancel:function(){console.log("cancel"),this.result="click cancel result: null"},confirm:function(n){this.result=JSON.stringify(n),console.log(n)},toCopy:function(){d()(_n),this.$emit("tips")}}},On=Pn,Tn=Object(y["a"])(On,wn,jn,!1,null,null,null),Dn=Tn.exports,Sn=function(){var n=this,l=n.$createElement,e=n._self._c||l;return e("div",[e("div",{staticClass:"btnbox"},[e("div",{staticClass:"btn",on:{click:function(l){n.pickerVisible=!0}}},[n._v("打开picker")]),e("div",{staticClass:"btn",on:{click:n.toCopy}},[n._v("复制demo代码")])]),e("div",{staticClass:"result"},[e("p",[n._v("----选择结果----")]),e("p",[n._v(n._s(n.result))])]),e("VuePicker",{attrs:{data:n.pickData,layer:3,showToolbar:!0,visible:n.pickerVisible},on:{cancel:n.cancel,confirm:n.confirm,"update:visible":function(l){n.pickerVisible=l}}})],1)},Nn=[],Jn=(e("4160"),e("dca8"),e("7039"),e("159b"),e("bf2d")),$n='\n\n<template>\n  <div>\n    <div class="btnbox">\n      <div class="btn" @click="pickerVisible = true">打开picker</div>\n      <div class="btn" @click="toCopy">复制demo代码</div>\n    </div>\n    <div class="result">\n      <p>----选择结果----</p>\n      <p>{{result}}</p>\n    </div>\n    <VuePicker :data="pickData"\n      :layer="3"\n      :showToolbar="true"\n      @cancel="cancel"\n      @confirm="confirm"\n      :visible.sync="pickerVisible"\n    />\n  </div>\n</template>\n\n<script>\n  import VuePicker from \'vue-pickers\'\n  import copy from \'copy-to-clipboard\'\n  import copyText from \'./copy/address.js\'\n  import cityData from \'vue-pickers/city-data.js\'\n  const deepFreeze = function(obj) {\n    var propNames = Object.getOwnPropertyNames(obj);\n    propNames.forEach(function(name) {\n      var prop = obj[name];\n      if (typeof prop == \'object\' && prop !== null) {\n        deepFreeze(prop);\n      }\n    })\n    return Object.freeze(obj)\n  }\n  // 冻结以提升性能\n  const freezeCityData = deepFreeze(cityData)\n  export default {\n    name: \'app\',\n    components: {\n      VuePicker\n    },\n    data () {\n      return {\n        showToolbar: true,\n        pickerVisible: false,\n        pickData: freezeCityData,\n        result: \'\'\n      }\n    },\n    methods: {\n      cancel () {\n        console.log(\'cancel\')\n        this.result = \'click cancel result: null\'\n      },\n      confirm (res) {\n        let obj = JSON.parse(JSON.stringify(res))\n        if (obj[0].children) {\n          delete obj[0].children\n        }\n        if (obj[1].children) {\n          delete obj[1].children\n        }\n        if (obj[2].children) {\n          delete obj[2].children\n        }\n        this.result = JSON.stringify(obj)\n        console.log(res)\n      },\n      toCopy () {\n        copy(copyText)\n        this.$emit(\'tips\')\n      }\n    }\n  }\n<\/script>\n\n\n',In=e("a720"),En=e.n(In),qn=function n(l){var e=Object.getOwnPropertyNames(l);return e.forEach((function(e){var a=l[e];"object"==Object(Jn["a"])(a)&&null!==a&&n(a)})),Object.freeze(l)},Hn=qn(En.a),Fn={name:"app",components:{VuePicker:v.a},data:function(){return{showToolbar:!0,pickerVisible:!1,pickData:Hn,result:""}},methods:{cancel:function(){console.log("cancel"),this.result="click cancel result: null"},confirm:function(n){var l=JSON.parse(JSON.stringify(n));l[0].children&&delete l[0].children,l[1].children&&delete l[1].children,l[2].children&&delete l[2].children,this.result=JSON.stringify(l),console.log(n)},toCopy:function(){d()($n),this.$emit("tips")}}},An=Fn,Ln=Object(y["a"])(An,Sn,Nn,!1,null,null,null),Mn=Ln.exports,Bn={components:{Single:x,Two:T,TwoLink:q,Three:R,ThreeLink:ln,Forth:dn,NoHeader:Vn,HeaderConfig:Dn,Address:Mn},data:function(){return{showTips:!1,currentView:"Single",activeIndex:0,typeArr:[{text:"单列",value:"Single"},{text:"双列",value:"Two"},{text:"双列联动",value:"TwoLink"},{text:"三列",value:"Three"},{text:"三列联动",value:"ThreeLink"},{text:"四列",value:"Forth"},{text:"无头部",value:"NoHeader"},{text:"头部配置",value:"HeaderConfig"},{text:"中国地址选择",value:"Address"}]}},methods:{clickItem:function(n,l){this.currentView=n.value,this.activeIndex=l},toTips:function(){var n=this;this.showTips||(this.showTips=!0,setTimeout((function(){n.showTips=!1}),2e3))}}},Gn=Bn,Kn=(e("20c0"),e("b481"),Object(y["a"])(Gn,c,u,!1,null,"70603ee2",null)),Qn=Kn.exports,Rn={components:{Home:Qn}},Un=Rn,Wn=Object(y["a"])(Un,t,i,!1,null,null,null),Xn=Wn.exports;e("db43");a["a"].config.productionTip=!1,new a["a"]({render:function(n){return n(Xn)}}).$mount("#app")},5758:function(n,l,e){},b481:function(n,l,e){"use strict";var a=e("1d8e"),t=e.n(a);t.a},db43:function(n,l,e){}});


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
1 | module.exports=require('./lib/vue-picker.js')


--------------------------------------------------------------------------------
/lib/vue-picker.js:
--------------------------------------------------------------------------------
1 | !function(n,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define("vue-picker",[],t):"object"==typeof exports?exports["vue-picker"]=t():n["vue-picker"]=t()}(window,(function(){return 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-176a7813_0",{source:'.pickerbox[data-v-176a7813] {\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-176a7813], .fade-leave-active[data-v-176a7813] {\n  -webkit-transition: opacity 0.2s;\n  transition: opacity 0.2s;\n}\n.fade-enter[data-v-176a7813], .fade-leave-to[data-v-176a7813] {\n  opacity: 0;\n}\n.toup-enter-active[data-v-176a7813], .toup-leave-active[data-v-176a7813] {\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-176a7813], .toup-leave-to[data-v-176a7813] {\n  -webkit-transform: translate3d(0, 100px, 0);\n          transform: translate3d(0, 100px, 0);\n}\n.vue-picker[data-v-176a7813] {\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  display: block;\n}\n.content[data-v-176a7813] {\n  overflow: hidden;\n  height: 220px;\n  position: relative;\n  display: -webkit-box;\n  display: flex;\n}\n.colums[data-v-176a7813] {\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-176a7813] {\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-176a7813] {\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-176a7813]::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;EACA,cAAA;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    display: block;\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  display: block;\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-176a7813",!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}])}));


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-pickers",
 3 |   "version": "2.5.4",
 4 |   "description": "A picker componemt for vue2.0",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "rollup": "rollup -c ./rollup.config.js",
 8 |     "build": "webpack",
 9 |     "dev": "webpack --config ./webpack.config-dev.js"
10 |   },
11 |   "repository": {
12 |     "type": "git",
13 |     "url": "git+https://github.com/naihe138/vue-picker.git"
14 |   },
15 |   "keywords": [
16 |     "vue2.0",
17 |     "vue-picker"
18 |   ],
19 |   "author": "naice",
20 |   "license": "ISC",
21 |   "bugs": {
22 |     "url": "https://github.com/naihe138/vue-picker/issues"
23 |   },
24 |   "homepage": "https://github.com/naihe138/vue-picker#readme",
25 |   "directories": {
26 |     "lib": "lib"
27 |   },
28 |   "devDependencies": {
29 |     "@babel/core": "^7.6.4",
30 |     "@babel/preset-env": "^7.6.3",
31 |     "autoprefixer": "^9.7.0",
32 |     "babel-loader": "^8.0.6",
33 |     "css-loader": "^3.2.0",
34 |     "precss": "^4.0.0",
35 |     "rollup": "^1.26.0",
36 |     "rollup-plugin-vue": "^5.1.2",
37 |     "sass-loader": "^8.0.0",
38 |     "terser-webpack-plugin": "^2.2.1",
39 |     "vue-loader": "^15.7.1",
40 |     "vue-runtime-helpers": "^1.1.2",
41 |     "vue-style-loader": "^4.1.2",
42 |     "vue-template-compiler": "^2.6.10",
43 |     "webpack": "^4.41.2",
44 |     "webpack-cli": "^3.3.9"
45 |   }
46 | }
47 | 


--------------------------------------------------------------------------------
/rollup.config.js:
--------------------------------------------------------------------------------
 1 | import vue from 'rollup-plugin-vue'
 2 | import autoprefixer from 'autoprefixer'
 3 | import precss from 'precss'
 4 | export default [
 5 |   {
 6 |     input: './src/index.vue',
 7 |     output: {
 8 |       format: 'esm',
 9 |       file: 'dist/picker.esm.js'
10 |     },
11 |     plugins: [
12 |       vue({
13 |         style: {
14 |           postcssPlugins: [
15 |             precss(),
16 |             autoprefixer()
17 |           ]
18 |         }
19 |       })
20 |     ]
21 |   }
22 | ]
23 | 


--------------------------------------------------------------------------------
/src/header.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="header">
 3 |     <div class="left">
 4 |       <span class="btn" @click="cancel">{{cancelText}}</span>
 5 |     </div>
 6 |     <div class="title">{{title}}</div>
 7 |     <div class="right">
 8 |       <span class="btn" @click="confirm">{{confirmText}}</span>
 9 |     </div>
10 |   </div>
11 | </template>
12 | 
13 | <script>
14 |   // TODO： 支持自定义的render渲染
15 |   // import textRender from './render'
16 |   export default {
17 |     props: {
18 |       cancelText: {
19 |         type: String
20 |       },
21 |       confirmText: {
22 |         type: String
23 |       },
24 |       title: {
25 |         type: String
26 |       }
27 |     },
28 |     methods: {
29 |       cancel () {
30 |         this.$emit('cancel')
31 |       },
32 |       confirm () {
33 |         this.$emit('confirm')
34 |       }
35 |     }
36 |   }
37 | </script>
38 | 
39 | <style lang="scss" scoped>
40 |   .header {
41 |     height: 44px;
42 |     line-height: 44px;
43 |     display: flex;
44 |     justify-content: space-between;
45 |     position: relative;
46 |     &::after {
47 |       position: absolute;
48 |       box-sizing: border-box;
49 |       content: ' ';
50 |       pointer-events: none;
51 |       top: -50%;
52 |       right: -50%;
53 |       bottom: -50%;
54 |       left: -50%;
55 |       border: 0 solid #ebedf0;
56 |       transform: scale(0.5);
57 |       border-width: 1px 0;
58 |     }
59 |   }
60 |   .title {
61 |     max-width: 50%;
62 |     font-weight: 500;
63 |     font-size: 16px;
64 |     text-align: center;
65 |     overflow: hidden;
66 |     text-overflow: ellipsis;
67 |     white-space: nowrap;
68 |   }
69 |   .btn {
70 |     padding: 0 16px;
71 |     color: #1989fa;
72 |     font-size: 14px;
73 |     background-color: transparent;
74 |   }
75 | </style>
76 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | 'use strict'
 2 | import Picker from './index.vue'
 3 | 
 4 | if (typeof window !== 'undefined' && window.Vue) {
 5 |   window.Vue.component('vue-picker', Picker)
 6 | }
 7 | 
 8 | Picker.install = function(Vue){
 9 |   Vue.component(Picker.name, Picker)
10 | }
11 | 
12 | export default Picker
13 | 


--------------------------------------------------------------------------------
/src/index.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <transition name="fade">
  3 |     <div class="pickerbox" v-show="visible" @click="clickMask">
  4 |       <transition name="toup">
  5 |         <div class="vue-picker" ref="picker" v-show="visible">
  6 |           <Header v-if="showToolbar"
  7 |             :cancelText="cancelText"
  8 |             :confirmText="confirmText"
  9 |             :title="title"
 10 |             @cancel="cancel"
 11 |             @confirm="confirm" />
 12 |           <div class="content" :style="{height: boxHeight + 'px'}">
 13 |             <div class="colums">
 14 |               <List :column="column1"
 15 |                 :boxHeight="boxHeight"
 16 |                 :itemHeight="itemHeight"
 17 |                 :defaultIndex="dIndex1"
 18 |                 :rowNumber="getRowNumber"
 19 |                 @change="change1" />
 20 |               <List v-if="column2.length > 0"
 21 |                 :column="column2"
 22 |                 :boxHeight="boxHeight"
 23 |                 :itemHeight="itemHeight"
 24 |                 :defaultIndex="dIndex2"
 25 |                 :rowNumber="getRowNumber"
 26 |                 @change="change2" />
 27 |               <List v-if="column3.length > 0"
 28 |                 :column="column3"
 29 |                 :boxHeight="boxHeight"
 30 |                 :itemHeight="itemHeight"
 31 |                 :defaultIndex="dIndex3"
 32 |                 :rowNumber="getRowNumber"
 33 |                 @change="change3" />
 34 |               <List v-if="column4.length > 0"
 35 |                 :column="column4"
 36 |                 :boxHeight="boxHeight"
 37 |                 :itemHeight="itemHeight"
 38 |                 :defaultIndex="dIndex4"
 39 |                 :rowNumber="getRowNumber"
 40 |                 @change="change4" />
 41 |             </div>
 42 |             <div class="mask" :style="maskStyle"></div>
 43 |             <div class="hairline"></div>
 44 |           </div>
 45 |         </div>
 46 |       </transition>
 47 |     </div>
 48 |   </transition>
 49 | </template>
 50 | <script>
 51 |   import Header from './header.vue'
 52 |   import List from './list.vue'
 53 |   import { DEFTAULT_ITEM_HEIGHT } from './utils.js'
 54 |   export default {
 55 |     name: 'VuePicker',
 56 |     props: {
 57 |       visible: {
 58 |         type: Boolean,
 59 |         default: false
 60 |       },
 61 |       data: {
 62 |         type: Array,
 63 |         default: () => []
 64 |       },
 65 |       layer: {
 66 |         type: Number,
 67 |         default: 0
 68 |       },
 69 |       itemHeight: {
 70 |         type: [Number, String],
 71 |         default: DEFTAULT_ITEM_HEIGHT
 72 |       },
 73 |       defaultIndex: {
 74 |         type: [Number, Array],
 75 |         default: 0
 76 |       },
 77 |       cancelText: {
 78 |         type: String,
 79 |         default: '取消'
 80 |       },
 81 |       confirmText: {
 82 |         type: String,
 83 |         default: '确认'
 84 |       },
 85 |       title: {
 86 |         type: String,
 87 |         default: ''
 88 |       },
 89 |       showToolbar: {
 90 |         type: Boolean,
 91 |         default: false
 92 |       },
 93 |       maskClick: {
 94 |         type: Boolean,
 95 |         default: false
 96 |       },
 97 |       rowNumber: {
 98 |         type: Number,
 99 |         default: 5
100 |       },
101 |       appendToBody: {
102 |         type: Boolean,
103 |         default: false
104 |       }
105 |     },
106 |     components: {
107 |       Header,
108 |       List
109 |     },
110 |     data () {
111 |       return {
112 |         column1: [],
113 |         column2: [],
114 |         column3: [],
115 |         column4: [],
116 |         dIndex1: 0,
117 |         dIndex2: 0,
118 |         dIndex3: 0,
119 |         dIndex4: 0
120 |       }
121 |     },
122 |     computed: {
123 |       boxHeight () {
124 |         let itemHeight = parseInt(this.itemHeight)
125 |         itemHeight = itemHeight ? itemHeight : DEFTAULT_ITEM_HEIGHT
126 |         return itemHeight * this.getRowNumber
127 |       },
128 |       getRowNumber () {
129 |         if (this.rowNumber < 3) {
130 |           return 3
131 |         }
132 |         return this.rowNumber % 2 === 0 ? this.rowNumber + 1 : this.rowNumber
133 |       },
134 |       maskStyle() {
135 |         let style = { backgroundSize: '100% 88px' }
136 |         if (this.getRowNumber === 3) {
137 |           style = { backgroundSize: '100% 44px' }
138 |         }
139 |         return style
140 |       }
141 |     },
142 |     methods: {
143 |       clickMask () {
144 |         if (this.maskClick) {
145 |           this.looseBody()
146 |           this.$emit('update:visible', false)
147 |         }
148 |       },
149 |       formateData () {
150 |         if (this.layer > 1) {
151 |           this.setLinkColumn()
152 |         } else {
153 |           this.column1 = this.data[0] || []
154 |           this.column2 = this.data[1] || []
155 |           this.column3 = this.data[2] || []
156 |           this.column4 = this.data[3] || []
157 |           this.setNormalIndex()
158 |         }
159 |       },
160 |       setLinkColumn () {
161 |         if (this.layer === 2) {
162 |           this.setLinkLayer2()
163 |         } else if (this.layer === 3) {
164 |           this.setLinkLayer2()
165 |           this.setLinkLayer3()
166 |         } else if (this.layer === 4) {
167 |           this.setLinkLayer2()
168 |           this.setLinkLayer3()
169 |           this.setLinkLayer4()
170 |         }
171 |       },
172 |       setLinkLayer2 () {
173 |         const { defaultIndex } = this
174 |         this.column1 = this.data || []
175 |         if (typeof defaultIndex === 'number') {
176 |           this.dIndex1 = defaultIndex
177 |           this.dIndex2 = 0
178 |           if (this.data.length > 1 && this.data[0].children) {
179 |             this.column2 = this.data[0].children || []
180 |           }
181 |         } else if (Array.isArray(defaultIndex) && defaultIndex.length > 0){
182 |           this.dIndex1 = defaultIndex[0] || 0
183 |           this.column2 = this.data[this.dIndex1].children || []
184 |           this.$nextTick(() => {
185 |             if (this.column2.length - 1 < defaultIndex[1]) {
186 |               this.dIndex2 = this.column2.length - 1
187 |             } else {
188 |               this.dIndex2 = defaultIndex[1] || 0
189 |             }
190 |           })
191 |         }
192 |       },
193 |       setLinkLayer3 () {
194 |         const { defaultIndex } = this
195 |         if (typeof defaultIndex === 'number') {
196 |           this.dIndex3 = 0
197 |           if (this.column2.length > 1 && this.column2[0].children) {
198 |             this.column3 = this.column2[0].children || []
199 |           }
200 |         } else if (Array.isArray(defaultIndex) && defaultIndex.length > 1){
201 |           this.$nextTick(() => {
202 |             this.column3 = this.column2[this.dIndex2].children || []
203 |             this.$nextTick(() => {
204 |               if (this.column3.length - 1 < defaultIndex[2]) {
205 |                 this.dIndex3 = this.column3.length - 1
206 |               } else {
207 |                 this.dIndex3 = defaultIndex[2] || 0
208 |               }
209 |             })
210 |           })
211 |         }
212 |       },
213 |       setLinkLayer4 () {
214 |         const { defaultIndex } = this
215 |         if (typeof defaultIndex === 'number') {
216 |           this.dIndex4 = 0
217 |           if (this.column3.length > 1 && this.column3[0].children) {
218 |             this.column4 = this.column3[0].children || []
219 |           }
220 |         } else if (Array.isArray(defaultIndex) && defaultIndex.length > 2){
221 |           setTimeout(() => {
222 |             this.column4 = this.column3[this.dIndex3].children || []
223 |             this.$nextTick(() => {
224 |               if (this.column4.length - 1 < defaultIndex[3]) {
225 |                 this.dIndex4 = this.column4.length - 1
226 |               } else {
227 |                 this.dIndex4 = defaultIndex[3] || 0
228 |               }
229 |             })
230 |           })
231 |         }
232 |       },
233 |       setNormalIndex () {
234 |         this.$nextTick(() => {
235 |           const { defaultIndex } = this
236 |           if (Array.isArray(defaultIndex)) {
237 |             this.setDefaultIndex()
238 |           } else {
239 |             this.dIndex1 = Number(defaultIndex) || 0
240 |           }
241 |         })
242 |       },
243 |       setDefaultIndex () {
244 |         const { indexArr } = this
245 |         const self = this
246 |         function next() {
247 |           let promise = Promise.resolve()
248 |           let index = 0
249 |           while (index < self.data.length) {
250 |             promise = promise.then(indexArr[index])
251 |             index++
252 |           }
253 |         }
254 |         next()
255 |       },
256 |       change (index, res) {
257 |         this.result[index] = res
258 |         this.$emit('change', this.result)
259 |       },
260 |       change1 (res) {
261 |         if (res) {
262 |           this.change(0, res)
263 |           if (this.layer > 1) {
264 |             this.dIndex2 = 0
265 |             this.changeLink('column2', res)
266 |           }
267 |         }
268 |       },
269 |       change2 (res) {
270 |         if (res) {
271 |           this.change(1, res)
272 |           if (this.layer > 2) {
273 |             this.dIndex3 = 0
274 |             this.changeLink('column3', res)
275 |           }
276 |         }
277 |       },
278 |       change3 (res) {
279 |         if (res) {
280 |           this.change(2, res)
281 |           if (this.layer > 3) {
282 |             this.dIndex4 = 0
283 |             this.changeLink('column4', res)
284 |           }
285 |         }
286 |       },
287 |       change4 (res) {
288 |         if (res) {
289 |           this.change(3, res)
290 |         }
291 |       },
292 |       changeLink (key, res) {
293 |         if (this.layer) {
294 |           // clearTimeout(this.linktimer)
295 |           this.linktimer = setTimeout(() => {
296 |             this[key] = res.children || []
297 |           }, 1000 / 60)
298 |         }
299 |       },
300 |       cancel () {
301 |         this.looseBody()
302 |         this.$emit('cancel')
303 |         this.$emit('update:visible', false)
304 |       },
305 |       confirm () {
306 |         this.looseBody()
307 |         this.$emit('confirm', this.result)
308 |         this.$emit('update:visible', false)
309 |       },
310 |       stopPropagation (e) {
311 |         e.stopPropagation()
312 |       },
313 |       fixedBody() {
314 |         const scrollTop = document.body.scrollTop || document.documentElement.scrollTop
315 |         this.prevBodyCss = document.body.style.cssText
316 |         document.body.style.cssText += 'position:fixed;width:100%;top:-' + scrollTop + 'px;'
317 |       },
318 |       looseBody() {
319 |         const body = document.body
320 |         const top = body.style.top
321 |         body.style.cssText = this.prevBodyCss
322 |         body.scrollTop = document.documentElement.scrollTop = -parseInt(top)
323 |         body.style.top = ''
324 |       },
325 |       init() {
326 |         this.result = []
327 |         this.indexArr = [
328 |           () => this.dIndex1 = this.defaultIndex[0] || 0,
329 |           () => this.dIndex2 = this.defaultIndex[1] || 0,
330 |           () => this.dIndex3 = this.defaultIndex[2] || 0,
331 |           () => this.dIndex4 = this.defaultIndex[3] || 0
332 |         ]
333 |         this.formateData()
334 |       }
335 |     },
336 |     created () {
337 |       this.init()
338 |     },
339 |     mounted () {
340 |       this.$refs.picker.addEventListener('click', this.stopPropagation)
341 |       if (this.appendToBody) {
342 |         document.body.appendChild(this.$el)
343 |       }
344 |     },
345 |     watch: {
346 |       visible (v) {
347 |         if (v) {
348 |           this.fixedBody()
349 |         }
350 |       },
351 |       defaultIndex () {
352 |         this.init()
353 |       },
354 |       data() {
355 |         this.init()
356 |       }
357 |     },
358 |     beforeDestroy () {
359 |       this.$refs.picker.removeEventListener('click', this.stopPropagation)
360 |     }
361 |   }
362 | </script>
363 | <style lang="scss" scoped>
364 |   .pickerbox {
365 |     position: fixed;
366 |     width: 100vw;
367 |     height: 100vh;
368 |     left: 0;
369 |     bottom: 0;
370 |     background: rgba(0, 0, 0, 0.7);
371 |     z-index: 9999;
372 |     overflow: hidden;
373 |   }
374 |   .fade-enter-active, .fade-leave-active {
375 |     transition: opacity .2s;
376 |   }
377 |   .fade-enter, .fade-leave-to {
378 |     opacity: 0;
379 |   }
380 |   .toup-enter-active, .toup-leave-active {
381 |     transition: transform .3s;
382 |   }
383 |   .toup-enter, .toup-leave-to {
384 |     transform: translate3d(0, 100px, 0);
385 |   }
386 |   // ----
387 |   .vue-picker {
388 |     position: absolute;
389 |     left: 0;
390 |     bottom: 0;
391 |     width: 100%;
392 |     background-color: #fff;
393 |     user-select: none;
394 |     -webkit-text-size-adjust: 100%;
395 |     -webkit-tap-highlight-color: transparent;
396 |     display: block;
397 |   }
398 |   .content {
399 |     overflow: hidden;
400 |     height: 220px;
401 |     position: relative;
402 |     display: flex;
403 |   }
404 |   .colums {
405 |     display: flex;
406 |     overflow: hidden;
407 |     font-size: 16px;
408 |     text-align: center;
409 |     flex: 1;
410 |   }
411 |   .mask {
412 |     position: absolute;
413 |     top: 0;
414 |     left: 0;
415 |     z-index: 2;
416 |     width: 100%;
417 |     height: 100%;
418 |     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));
419 |     background-repeat: no-repeat;
420 |     background-position: top, bottom;
421 |     backface-visibility: hidden;
422 |     pointer-events: none;
423 |     background-size: 100% 88px;
424 |   }
425 |   .hairline {
426 |     position: absolute;
427 |     top: 50%;
428 |     left: 0;
429 |     z-index: 3;
430 |     width: 100%;
431 |     transform: translateY(-50%);
432 |     pointer-events: none;
433 |     height: 44px;
434 |     &::after {
435 |       position: absolute;
436 |       box-sizing: border-box;
437 |       content: ' ';
438 |       pointer-events: none;
439 |       top: -50%;
440 |       right: -50%;
441 |       bottom: -50%;
442 |       left: -50%;
443 |       border: 0 solid #ebedf0;
444 |       -webkit-transform: scale(0.5);
445 |       transform: scale(0.5);
446 |       border-width: 1px 0;
447 |     }
448 |   }
449 | </style>
450 | 


--------------------------------------------------------------------------------
/src/list.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="list" ref="list">
  3 |     <ul :style="ulStyle">
  4 |       <li v-for="(item, index) in column" :key="'item' + index">{{item.label}}</li>
  5 |     </ul>
  6 |   </div>
  7 | </template>
  8 | 
  9 | <script>
 10 |   import { getClient, START_EVENT, MOVE_EVENT, END_EVENT, isPC } from './utils.js'
 11 |   const DEFAULT_DURATION = 200
 12 |   // 惯性滑动思路:
 13 |   // 在手指离开屏幕时，如果和上一次 move 时的间隔小于 `LIMIT_TIME` 且 move
 14 |   // 距离大于 `LIMIT_DISTANCE` 时，执行惯性滑动
 15 |   const LIMIT_TIME = 300
 16 |   const LIMIT_DISTANCE = 15
 17 |   const IS_PC = isPC()
 18 |   export default {
 19 |     props: {
 20 |       defaultIndex: {
 21 |         type: Number,
 22 |         default: 0
 23 |       },
 24 |       column: {
 25 |         type: Array,
 26 |         default: () => ([])
 27 |       },
 28 |       boxHeight: Number,
 29 |       itemHeight: Number,
 30 |       rowNumber: Number
 31 |     },
 32 |     data() {
 33 |       return {
 34 |         ulStyle: {
 35 |           transform: `translate3d(0px, 0px, 0px)`,
 36 |           transitionDuration: `0ms`,
 37 |           transitionProperty: `none`,
 38 |           lineHeight: `${this.itemHeight}px`
 39 |         }
 40 |       }
 41 |     },
 42 |     computed: {
 43 |       count() {
 44 |         return this.column.length
 45 |       },
 46 |       getRoNumber() {
 47 |         return Math.floor(this.rowNumber / 2)
 48 |       }
 49 |     },
 50 |     methods: {
 51 |       init () {
 52 |         this.setTop(this.defaultIndex)
 53 |         const halfBox = (this.boxHeight - this.itemHeight) / 2
 54 |         this.bottom = halfBox + this.itemHeight
 55 |         this.top = halfBox - this.count * this.itemHeight
 56 |       },
 57 |       // 根据index 设置滚动位置
 58 |       setTop (index = 0) {
 59 |         const { boxHeight, itemHeight } = this
 60 |         this.startTop = ((boxHeight - itemHeight) / 2) - (index * itemHeight)
 61 |         this.ulStyle.transform = `translate3d(0px, ${this.startTop}px, 0px)`
 62 |         this.selectIndex = index
 63 |         this.change()
 64 |       },
 65 |       handleStart (e) {
 66 |         this.distStartTop = getClient(e).y
 67 |         this.touchStartTime = Date.now()
 68 |         // ----
 69 |         this.startY = getClient(e).y
 70 |         this.momentumTop = this.startTop
 71 | 
 72 |         this.ulStyle.transitionDuration = `0ms`
 73 |         this.ulStyle.transitionProperty = `none`
 74 |         if (IS_PC) {
 75 |           document.addEventListener(MOVE_EVENT, this.handleMove, false)
 76 |           document.addEventListener(END_EVENT, this.handleEnd, false)
 77 |         }
 78 |       },
 79 |       handleMove (e) {
 80 |         e.preventDefault()
 81 |         e.stopPropagation()
 82 |         this.disY = getClient(e).y - this.startY
 83 |         this.startY = getClient(e).y
 84 |         if (this.startTop >= this.bottom) {
 85 |           this.startTop = this.bottom
 86 |         } else if (this.startTop <= this.top) {
 87 |           this.startTop = this.top
 88 |         } else {
 89 |           this.startTop += this.disY
 90 |         }
 91 |         this.ulStyle.transform = `translate3d(0px, ${this.startTop}px, 0px)`
 92 |         const now = Date.now()
 93 | 
 94 |         if (now - this.touchStartTime > LIMIT_TIME) {
 95 |           this.touchStartTime = now
 96 |           this.momentumTop = this.startTop
 97 |         }
 98 |       },
 99 |       handleEnd () {
100 |         if (IS_PC) {
101 |           document.removeEventListener(MOVE_EVENT, this.handleMove, false)
102 |           document.removeEventListener(END_EVENT, this.handleEnd, false)
103 |         }
104 |         const distance = this.startTop - this.momentumTop
105 |         const duration = Date.now() - this.touchStartTime
106 |         const allowMomentum = duration < LIMIT_TIME && Math.abs(distance) > LIMIT_DISTANCE
107 |         if (allowMomentum) {
108 |           this.toMove(distance, duration)
109 |         } else {
110 |           this.setTranfromTop()
111 |         }
112 |       },
113 |       setTranfromTop () {
114 |         this.ulStyle.transitionProperty = `all`
115 |         this.ulStyle.transitionDuration = `${DEFAULT_DURATION}ms`
116 |         if (this.startTop >= this.bottom - this.itemHeight) {
117 |           this.setTop()
118 |         } else if (this.startTop <= this.top + this.itemHeight) {
119 |           this.setTop(this.count - 1)
120 |         } else {
121 |           let index = Math.round((this.startTop) / this.itemHeight)
122 |           this.startTop = index * this.itemHeight
123 |           if (this.startTop > this.bottom) {
124 |             this.startTop = this.bottom - this.itemHeight
125 |             index = -this.getRoNumber
126 |           } else if (this.startTop < this.top) {
127 |             this.startTop = this.top + this.itemHeight
128 |             index = this.count + 1
129 |           }
130 |           this.ulStyle.transform = `translate3d(0px, ${this.startTop}px, 0px)`
131 |           index = this.getRoNumber - index
132 |           if (this.selectIndex !== index) {
133 |             this.selectIndex = index
134 |             this.change()
135 |           }
136 |         }
137 |       },
138 |       toMove (distance, duration) {
139 |         const speed = Math.abs(distance / duration)
140 |         distance = this.startTop + (speed / 0.002) * (distance < 0 ? -1 : 1)
141 |         this.ulStyle.transitionProperty = `all`
142 |         this.ulStyle.transitionDuration = `1000ms`
143 |         this.setTop(Math.min(Math.max(Math.round(-distance / this.itemHeight), 0), this.count - 1))
144 |       },
145 |       change () {
146 |         this.$emit('change', this.column[this.selectIndex])
147 |       },
148 |       mousewheel (e) {
149 |         e.preventDefault()
150 |         e.stopPropagation()
151 |         this.ulStyle.transitionDuration = `0ms`
152 |         this.ulStyle.transitionProperty = `none`
153 |         const { deltaX, deltaY } = e
154 |         if (Math.abs(deltaX) < Math.abs(deltaY)) {
155 |           this.startTop = this.startTop - deltaY
156 |           let b = this.bottom - this.itemHeight
157 |           let t = this.top + this.itemHeight
158 |           let shouldMove = true
159 |           if (this.startTop > b ) {
160 |             this.startTop = b
161 |             shouldMove = false
162 |           } else if (this.startTop < t) {
163 |             this.startTop = t
164 |             shouldMove = false
165 |           }
166 |           this.ulStyle.transform = `translate3d(0px, ${this.startTop}px, 0px)`
167 |           if (shouldMove) {
168 |             clearInterval(this.wheelTimer)
169 |             this.wheelTimer = setTimeout(this.setTranfromTop, 100)
170 |           }
171 |         }
172 |       }
173 |     },
174 |     mounted () {
175 |       this.init()
176 |       // 监听开始事件
177 |       this.$el.addEventListener(START_EVENT, this.handleStart, false)
178 |       if (IS_PC) {
179 |         this.$el.addEventListener('wheel', this.mousewheel, false)
180 |       } else {
181 |         this.$el.addEventListener(MOVE_EVENT, this.handleMove, false)
182 |         this.$el.addEventListener(END_EVENT, this.handleEnd, false)
183 |       }
184 |     },
185 |     watch: {
186 |       column () {
187 |         this.init()
188 |       },
189 |       defaultIndex () {
190 |         this.setTop(this.defaultIndex)
191 |       }
192 |     },
193 |     beforeDestroy () {
194 |       this.$el.removeEventListener(START_EVENT, this.handleStart, false)
195 |       if (IS_PC) {
196 |         this.$el.removeEventListener('wheel', this.mousewheel, false)
197 |         this.$el.removeEventListener(MOVE_EVENT, this.handleMove, false)
198 |         this.$el.removeEventListener(END_EVENT, this.handleEnd, false)
199 |       }
200 |     }
201 |   }
202 | </script>
203 | 
204 | <style lang="scss" scoped>
205 |   .list {
206 |     margin: 0;
207 |     padding: 0;
208 |     flex: 1;
209 |     width: 100%;
210 |     height: 100%;
211 |     overflow: hidden;
212 |     ul {
213 |       margin: 0;
214 |       padding: 0;
215 |       transition-timing-function: cubic-bezier(0.23, 1, 0.68, 1);
216 |       line-height: 44px;
217 |     }
218 |     li {
219 |       margin: 0;
220 |       padding: 0;
221 |       overflow: hidden;
222 |       white-space: nowrap;
223 |       text-overflow: ellipsis;
224 |       padding: 0 5px;
225 |       color: #000;
226 |     }
227 |   }
228 | </style>
229 | 


--------------------------------------------------------------------------------
/src/picker.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="vue-picker" ref="picker">
  3 |     <Header v-if="showToolbar"
  4 |       :cancelText="cancelText"
  5 |       :confirmText="confirmText"
  6 |       :title="title"
  7 |       @cancel="cancel"
  8 |       @confirm="confirm" />
  9 |     <div class="content" :style="{height: boxHeight + 'px'}">
 10 |       <div class="colums">
 11 |         <List :column="column1"
 12 |           :boxHeight="boxHeight"
 13 |           :itemHeight="itemHeight"
 14 |           :defaultIndex="dIndex1"
 15 |           @change="change1" />
 16 |         <List v-if="column2.length > 0"
 17 |           :column="column2"
 18 |           :boxHeight="boxHeight"
 19 |           :itemHeight="itemHeight"
 20 |           :defaultIndex="dIndex2"
 21 |           @change="change2" />
 22 |         <List v-if="column3.length > 0"
 23 |           :column="column3"
 24 |           :boxHeight="boxHeight"
 25 |           :itemHeight="itemHeight"
 26 |           :defaultIndex="dIndex3"
 27 |           @change="change3" />
 28 |         <List v-if="column4.length > 0"
 29 |           :column="column4"
 30 |           :boxHeight="boxHeight"
 31 |           :itemHeight="itemHeight"
 32 |           :defaultIndex="dIndex4"
 33 |           @change="change4" />
 34 |       </div>
 35 |       <div class="mask"></div>
 36 |       <div class="hairline"></div>
 37 |     </div>
 38 |   </div>
 39 | </template>
 40 | 
 41 | <script>
 42 |   import Header from './header'
 43 |   import List from './list'
 44 |   import { DEFTAULT_ITEM_HEIGHT } from './utils'
 45 |   export default {
 46 |     name: 'VuePicker',
 47 |     props: {
 48 |       data: {
 49 |         type: Array,
 50 |         default: () => []
 51 |       },
 52 |       layer: {
 53 |         type: Number,
 54 |         default: 0
 55 |       },
 56 |       itemHeight: {
 57 |         type: [Number, String],
 58 |         default: DEFTAULT_ITEM_HEIGHT
 59 |       },
 60 |       defaultIndex: {
 61 |         type: [Number, Array],
 62 |         default: 0
 63 |       },
 64 |       cancelText: {
 65 |         type: String,
 66 |         default: '取消'
 67 |       },
 68 |       confirmText: {
 69 |         type: String,
 70 |         default: '确认'
 71 |       },
 72 |       title: {
 73 |         type: String,
 74 |         default: ''
 75 |       },
 76 |       showToolbar: {
 77 |         type: Boolean,
 78 |         default: false
 79 |       }
 80 |     },
 81 |     components: {
 82 |       Header,
 83 |       List
 84 |     },
 85 |     data () {
 86 |       return {
 87 |         column1: [],
 88 |         column2: [],
 89 |         column3: [],
 90 |         column4: [],
 91 |         dIndex1: 0,
 92 |         dIndex2: 0,
 93 |         dIndex3: 0,
 94 |         dIndex4: 0
 95 |       }
 96 |     },
 97 |     computed: {
 98 |       boxHeight () {
 99 |         let itemHeight = parseInt(this.itemHeight)
100 |         itemHeight = itemHeight ? itemHeight : DEFTAULT_ITEM_HEIGHT
101 |         return itemHeight * 5
102 |       }
103 |     },
104 |     methods: {
105 |       pickerMove (e) {
106 |         e.preventDefault()
107 |         e.stopPropagation()
108 |       },
109 |       formateData () {
110 |         if (this.layer > 1) {
111 |           this.setLinkColumn()
112 |         } else {
113 |           this.column1 = this.data[0] || []
114 |           this.column2 = this.data[1] || []
115 |           this.column3 = this.data[2] || []
116 |           this.column4 = this.data[3] || []
117 |         }
118 |       },
119 |       setLinkColumn () {
120 |         if (this.layer === 2) {
121 |           this.setLinkLayer2()
122 |         } else if (this.layer === 3) {
123 |           this.setLinkLayer2()
124 |           this.setLinkLayer3()
125 |         } else if (this.layer === 4) {
126 |           this.setLinkLayer2()
127 |           this.setLinkLayer3()
128 |           this.setLinkLayer4()
129 |         }
130 |       },
131 |       setLinkLayer2 () {
132 |         const { defaultIndex } = this
133 |         this.column1 = this.data || []
134 |         if (typeof defaultIndex === 'number') {
135 |           this.dIndex1 = defaultIndex
136 |           this.dIndex2 = 0
137 |           if (this.data.length > 1 && this.data[0].children) {
138 |             this.column2 = this.data[0].children || []
139 |           }
140 |         } else if (Array.isArray(defaultIndex) && defaultIndex.length > 0){
141 |           this.dIndex1 = defaultIndex[0] || 0
142 |           this.dIndex2 = defaultIndex[1] || 0
143 |           this.column2 = this.data[this.dIndex1].children || []
144 |         }
145 |       },
146 |       setLinkLayer3 () {
147 |         const { defaultIndex } = this
148 |         if (typeof defaultIndex === 'number') {
149 |           this.dIndex3 = 0
150 |           if (this.column2.length > 1 && this.column2[0].children) {
151 |             this.column3 = this.column2[0].children || []
152 |           }
153 |         } else if (Array.isArray(defaultIndex) && defaultIndex.length > 0){
154 |           this.dIndex3 = defaultIndex[2] || 0
155 |           this.column3 = this.column2[this.dIndex2].children || []
156 |         }
157 |       },
158 |       setLinkLayer4 () {
159 |         const { defaultIndex } = this
160 |         if (typeof defaultIndex === 'number') {
161 |           this.dIndex4 = 0
162 |           if (this.column3.length > 1 && this.column3[0].children) {
163 |             this.column4 = this.column3[0].children || []
164 |           }
165 |         } else if (Array.isArray(defaultIndex) && defaultIndex.length > 0){
166 |           this.dIndex4 = defaultIndex[3] || 0
167 |           this.column4 = this.column3[this.dIndex3].children || []
168 |         }
169 |       },
170 |       init () {
171 |         this.$refs.picker.addEventListener('mousemove', this.pickerMove)
172 |       },
173 |       change (index, res) {
174 |         this.result[index] = res
175 |         this.$emit('change', this.result)
176 |       },
177 |       change1 (res) {
178 |         if (res) {
179 |           this.change(0, res)
180 |           this.dIndex2 = 0
181 |           this.changeLink('column2', res)
182 |         }
183 |       },
184 |       change2 (res) {
185 |         if (res) {
186 |           this.change(1, res)
187 |           this.dIndex3 = 0
188 |           this.changeLink('column3', res)
189 |         }
190 |       },
191 |       change3 (res) {
192 |         if (res) {
193 |           this.change(2, res)
194 |           this.dIndex4 = 0
195 |           this.changeLink('column4', res)
196 |         }
197 |       },
198 |       change4 (res) {
199 |         if (res) {
200 |           this.change(3, res)
201 |         }
202 |       },
203 |       changeLink (key, res) {
204 |         if (this.layer) {
205 |           clearTimeout(this.linktimer)
206 |           this.linktimer = setTimeout(() => {
207 |             this[key] = res.children || []
208 |           }, 100)
209 |         }
210 |       },
211 |       cancel () {
212 |         this.$emit('cancel')
213 |       },
214 |       confirm () {
215 |         this.$emit('confirm', this.result)
216 |       }
217 |     },
218 |     created () {
219 |       this.result = []
220 |       this.formateData()
221 |     },
222 |     mounted () {
223 |       this.init()
224 |     }
225 |   }
226 | </script>
227 | 
228 | <style scoped lang="scss">
229 |   .vue-picker {
230 |     position: relative;
231 |     background-color: #fff;
232 |     user-select: none;
233 |     -webkit-text-size-adjust: 100%;
234 |     -webkit-tap-highlight-color: transparent;
235 |   }
236 |   .content {
237 |     overflow: hidden;
238 |     height: 220px;
239 |     position: relative;
240 |     display: flex;
241 |   }
242 |   .colums {
243 |     display: flex;
244 |     overflow: hidden;
245 |     font-size: 16px;
246 |     text-align: center;
247 |     flex: 1;
248 |   }
249 |   .mask {
250 |     position: absolute;
251 |     top: 0;
252 |     left: 0;
253 |     z-index: 2;
254 |     width: 100%;
255 |     height: 100%;
256 |     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));
257 |     background-repeat: no-repeat;
258 |     background-position: top, bottom;
259 |     backface-visibility: hidden;
260 |     pointer-events: none;
261 |     background-size: 100% 88px;
262 |   }
263 |   .hairline {
264 |     position: absolute;
265 |     top: 50%;
266 |     left: 0;
267 |     z-index: 3;
268 |     width: 100%;
269 |     transform: translateY(-50%);
270 |     pointer-events: none;
271 |     height: 44px;
272 |     &::after {
273 |       position: absolute;
274 |       box-sizing: border-box;
275 |       content: ' ';
276 |       pointer-events: none;
277 |       top: -50%;
278 |       right: -50%;
279 |       bottom: -50%;
280 |       left: -50%;
281 |       border: 0 solid #ebedf0;
282 |       -webkit-transform: scale(0.5);
283 |       transform: scale(0.5);
284 |       border-width: 1px 0;
285 |     }
286 |   }
287 | </style>
288 | 


--------------------------------------------------------------------------------
/src/render.js:
--------------------------------------------------------------------------------
 1 | 'use strict'
 2 | import Vue from 'vue'
 3 | 
 4 | const textRender = Vue.component('text-render', {
 5 |   functional: true,
 6 |   props: {
 7 |     crender: {
 8 |       type: Function,
 9 |       default: function () {}
10 |     },
11 |     value: {
12 |       type: [Object, Number, String, Boolean, Array],
13 |       default: function () {
14 |         return {}
15 |       }
16 |     },
17 |     column: {
18 |       type: Object,
19 |       default: function () {
20 |         return {}
21 |       }
22 |     },
23 |     index: {
24 |       type: [Number, String],
25 |       default: 0
26 |     },
27 |     row: {
28 |       type: Object,
29 |       default: function () {
30 |         return {}
31 |       }
32 |     }
33 |   },
34 |   render (h, self) {
35 |     return self.props.crender(h, { index: self.props.index, value: self.props.value, column: self.props.column, row: self.props.row })
36 |   }
37 | })
38 | 
39 | export default textRender
40 | 


--------------------------------------------------------------------------------
/src/utils.js:
--------------------------------------------------------------------------------
 1 | 'use strict'
 2 | export const DEFTAULT_ITEM_HEIGHT = 44
 3 | 
 4 | // 兼容pc 移动端
 5 | export const HAS_TOUCH = 'ontouchstart' in window
 6 | export const START_EVENT = HAS_TOUCH ? 'touchstart' : 'mousedown'
 7 | export const MOVE_EVENT = HAS_TOUCH ? 'touchmove' : 'mousemove'
 8 | export const END_EVENT = HAS_TOUCH ? 'touchend' : 'mouseup'
 9 | 
10 | export const getClient = e => {
11 |   let clientX = HAS_TOUCH ? e.changedTouches[0].clientX : e.clientX
12 |   let clientY = HAS_TOUCH ? e.changedTouches[0].clientY : e.clientY
13 |   return {
14 |     x: clientX,
15 |     y: clientY
16 |   }
17 | }
18 | export const isPC = () => {
19 |   const userAgentInfo = navigator.userAgent
20 |   const Agents = ['Android', 'iPhone', 'SymbianOS', 'Windows Phone', 'iPad', 'iPod']
21 |   let flag = true
22 |   for (var v = 0; v < Agents.length; v++) {
23 |     if (userAgentInfo.indexOf(Agents[v]) > 0) {
24 |       flag = false
25 |       break
26 |     }
27 |   }
28 |   return flag
29 | }
30 | 


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
 1 | const path = require('path')
 2 | const webpack = require('webpack')
 3 | const TerserJSPlugin = require('terser-webpack-plugin')
 4 | 
 5 | module.exports = {
 6 |   mode: 'production',
 7 |   entry: './dist/index.js',
 8 |   output: {
 9 |     path: path.resolve(__dirname, './lib'),
10 |     publicPath: '/lib/',
11 |     filename: 'vue-picker.js',
12 |     library: 'vue-picker',
13 |     libraryTarget: 'umd',
14 |     umdNamedDefine: true
15 |   },
16 |   devtool: 'none',
17 |   module: {
18 |     rules: [
19 |       {
20 |         test: /\.js$/,
21 |         use: {
22 |           loader: 'babel-loader',
23 |           options: {
24 |             presets: ['@babel/preset-env']
25 |           }
26 |         },
27 |         exclude: /node_modules/
28 |       },
29 |     ]
30 |   },
31 |   optimization: {
32 |     minimizer: [
33 |       new TerserJSPlugin({
34 |         parallel: true,
35 |         sourceMap: false,
36 |         terserOptions: {
37 |           compress: {
38 |             inline: 1, // https://github.com/mishoo/UglifyJS2/issues/2842
39 |             warnings: false,
40 |             drop_console: true,
41 |             drop_debugger: true
42 |           },
43 |           output: {
44 |             comments: false
45 |           }
46 |         }
47 |       })
48 |     ]
49 |   }
50 | }
51 | 


--------------------------------------------------------------------------------