├── .gitignore
├── LICENSE
├── README.md
├── dist
    ├── vue-ios-pickers.js
    └── vue-ios-pickers.min.js
├── index.html
├── package.json
├── qrCode.png
├── src
    ├── index.es5.js
    ├── index.js
    ├── picker.es5.vue
    └── picker.vue
├── webpack.config.js
└── yarn.lock


/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | 
 8 | # Runtime data
 9 | pids
10 | *.pid
11 | *.seed
12 | *.pid.lock
13 | 
14 | # Directory for instrumented libs generated by jscoverage/JSCover
15 | lib-cov
16 | 
17 | # Coverage directory used by tools like istanbul
18 | coverage
19 | 
20 | # nyc test coverage
21 | .nyc_output
22 | 
23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
24 | .grunt
25 | 
26 | # Bower dependency directory (https://bower.io/)
27 | bower_components
28 | 
29 | # node-waf configuration
30 | .lock-wscript
31 | 
32 | # Compiled binary addons (https://nodejs.org/api/addons.html)
33 | build/Release
34 | 
35 | # Dependency directories
36 | node_modules/
37 | jspm_packages/
38 | 
39 | # TypeScript v1 declaration files
40 | typings/
41 | 
42 | # Optional npm cache directory
43 | .npm
44 | 
45 | # Optional eslint cache
46 | .eslintcache
47 | 
48 | # Optional REPL history
49 | .node_repl_history
50 | 
51 | # Output of 'npm pack'
52 | *.tgz
53 | 
54 | # Yarn Integrity file
55 | .yarn-integrity
56 | 
57 | # dotenv environment variables file
58 | .env
59 | 
60 | # next.js build output
61 | .next
62 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2018 音十
 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.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | ## vue-ios-pickers 组件使用说明
  2 | 基于Vue，iOS风格的picker组件，支持三级联动，日期(年.月.日)，时间(时:分)，日期+时间，年，年+月
  3 | ### DEMO
  4 | [查看demo](https://yuanwing.github.io/vue-ios-pickers/)
  5 | ![vue-ios-pickers](./qrCode.png)
  6 | ### 安装
  7 | ```
  8 | $ yarn add vue-ios-pickers
  9 | ```
 10 | Or
 11 | ```
 12 | $ npm install vue-ios-pickers
 13 | ```
 14 | ### 使用
 15 | - 引入`js`全局使用:
 16 |   ```javascript
 17 |   <script src="./node_modules/vue-ios-pickers/dist/vue-ios-pickers.min.js"></script>
 18 |   ```
 19 | - 使用 `Vue.use` 导入
 20 |   ```javascript
 21 |   import VueIosPickers from 'vue-ios-pickers';
 22 |   Vue.use(VueIosPickers);
 23 |   ```
 24 | - 页面中使用
 25 |   ```javascript
 26 |   // 一个日期的 picker  支持 年.月.日 时:分
 27 |   <vue-ios-pickers
 28 |     date="datetime"
 29 |     :cols="5"
 30 |   ></vue-ios-pickers>
 31 |   ```
 32 | ### 属性说明:  
 33 | | 属性 | 描述 | 类型 | 默认值 |
 34 |   | --- | --- | --- | --- |
 35 |   | v-model | 组件通信, 初始值(**必填**) | String | Number | Array | `-` |
 36 |   | cols | 展示数据的列数, 可取值 `1`, `2`, `3`, `5` | Number | `3` |
 37 |   | name | 设置 `picker` 的唯一名称, 会在 `onConfirm` 一起返回 | String | `-` |
 38 |   | placeholder | 设置 `picker` 的默认文字 | String | `请选择` |
 39 |   | align | 设置文本对齐方式, 可取值 `css -> text-align` | String | `right`
 40 |   | pickerData | 需要展示的数据 | Array | `[]` |
 41 |   | date | 设置日期类型, 可取值 `date`, `time`, `datetime`, (`pickerData` 将失效) | String | `-` |
 42 |   | minDate | 开始时间 | Number | `1949` |
 43 |   | maxDate | 结束时间 | Number | `当前年份往后 + 50` |
 44 |   | onCancel | 取消的回调函数 | Function | `-` |
 45 |   | onConfirm | 确认的回调函数 | Function | `当前选中的数据(Array)及name值` |  
 46 |   | onItemChange | 列数据变更的回调函数 | Function | `变更前、后的数据` |
 47 | ### 其他说明
 48 | 1. 当使用 `date=datetime` 时, `cols=5`;
 49 | 2. 使用 `v-model` 进行数据传输, 如果需要初始默认值, 刚把默认值赋值给 `v-model`;
 50 | 3. `date=datetime` 取值格式必须是 `年.月.日 时:分`
 51 | 4. 默认值格式: 如果存在 `date`, 则必须是 `String`, 否则可以是`String` 或 `Array`:
 52 |     - `date`存在的`String`: `2018.08.19 08:08`
 53 |     - `Array`: `['北京', '西城区', '西长椿街']`
 54 |     - `String`: `北京,西城区,西长椿街`
 55 | 5. 三级联动时, 后一列的数据取前一列的 `children` 属性值
 56 | 6. 新增 `date` 属性存在时, 年份支持 **长期有效(id='-1')**
 57 | 7. `pickerData`的数据格式:
 58 |     ```
 59 |     [
 60 |       [
 61 |         {
 62 |           name: '北京',
 63 |           id: '010',
 64 |           children: [
 65 |             {
 66 |               name: '北京',
 67 |               id: '0101',
 68 |               children: [
 69 |                 { name: '西城区', id: '010101' },
 70 |                 { name: '东城区', id: '010102' },
 71 |                 { name: '海淀区', id: '010103' },
 72 |               ]
 73 |             }
 74 |           ]
 75 |         }, {
 76 |           name: '四川',
 77 |           id: '028',
 78 |           children: [
 79 |             {
 80 |               name: '成都市',
 81 |               id: '0281',
 82 |               children: [
 83 |                 { name: '武侯区', id: '02811' },
 84 |                 { name: '青羊区', id: '02812' },
 85 |                 { name: '成华区', id: '02813' },
 86 |                 { name: '锦江区', id: '02814' },
 87 |                 { name: '金牛区', id: '02815' },
 88 |               ]
 89 |             }, {
 90 |               name: '泸州市',
 91 |               id: '0282',
 92 |               children: [
 93 |                 { name: '江阳区', id: '02821' },
 94 |                 { name: '龙马潭区', id: '02822' },
 95 |                 { name: '纳西区', id: '02823' },
 96 |                 { name: '泸县', id: '02824' },
 97 |               ]
 98 |             }
 99 |           ]
100 |         }
101 |       ]
102 |     ]
103 |     ```


--------------------------------------------------------------------------------
/dist/vue-ios-pickers.js:
--------------------------------------------------------------------------------
  1 | /******/ (function(modules) { // webpackBootstrap
  2 | /******/ 	// The module cache
  3 | /******/ 	var installedModules = {};
  4 | /******/
  5 | /******/ 	// The require function
  6 | /******/ 	function __webpack_require__(moduleId) {
  7 | /******/
  8 | /******/ 		// Check if module is in cache
  9 | /******/ 		if(installedModules[moduleId]) {
 10 | /******/ 			return installedModules[moduleId].exports;
 11 | /******/ 		}
 12 | /******/ 		// Create a new module (and put it into the cache)
 13 | /******/ 		var module = installedModules[moduleId] = {
 14 | /******/ 			i: moduleId,
 15 | /******/ 			l: false,
 16 | /******/ 			exports: {}
 17 | /******/ 		};
 18 | /******/
 19 | /******/ 		// Execute the module function
 20 | /******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
 21 | /******/
 22 | /******/ 		// Flag the module as loaded
 23 | /******/ 		module.l = true;
 24 | /******/
 25 | /******/ 		// Return the exports of the module
 26 | /******/ 		return module.exports;
 27 | /******/ 	}
 28 | /******/
 29 | /******/
 30 | /******/ 	// expose the modules object (__webpack_modules__)
 31 | /******/ 	__webpack_require__.m = modules;
 32 | /******/
 33 | /******/ 	// expose the module cache
 34 | /******/ 	__webpack_require__.c = installedModules;
 35 | /******/
 36 | /******/ 	// define getter function for harmony exports
 37 | /******/ 	__webpack_require__.d = function(exports, name, getter) {
 38 | /******/ 		if(!__webpack_require__.o(exports, name)) {
 39 | /******/ 			Object.defineProperty(exports, name, { enumerable: true, get: getter });
 40 | /******/ 		}
 41 | /******/ 	};
 42 | /******/
 43 | /******/ 	// define __esModule on exports
 44 | /******/ 	__webpack_require__.r = function(exports) {
 45 | /******/ 		if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
 46 | /******/ 			Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 47 | /******/ 		}
 48 | /******/ 		Object.defineProperty(exports, '__esModule', { value: true });
 49 | /******/ 	};
 50 | /******/
 51 | /******/ 	// create a fake namespace object
 52 | /******/ 	// mode & 1: value is a module id, require it
 53 | /******/ 	// mode & 2: merge all properties of value into the ns
 54 | /******/ 	// mode & 4: return value when already ns object
 55 | /******/ 	// mode & 8|1: behave like require
 56 | /******/ 	__webpack_require__.t = function(value, mode) {
 57 | /******/ 		if(mode & 1) value = __webpack_require__(value);
 58 | /******/ 		if(mode & 8) return value;
 59 | /******/ 		if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
 60 | /******/ 		var ns = Object.create(null);
 61 | /******/ 		__webpack_require__.r(ns);
 62 | /******/ 		Object.defineProperty(ns, 'default', { enumerable: true, value: value });
 63 | /******/ 		if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
 64 | /******/ 		return ns;
 65 | /******/ 	};
 66 | /******/
 67 | /******/ 	// getDefaultExport function for compatibility with non-harmony modules
 68 | /******/ 	__webpack_require__.n = function(module) {
 69 | /******/ 		var getter = module && module.__esModule ?
 70 | /******/ 			function getDefault() { return module['default']; } :
 71 | /******/ 			function getModuleExports() { return module; };
 72 | /******/ 		__webpack_require__.d(getter, 'a', getter);
 73 | /******/ 		return getter;
 74 | /******/ 	};
 75 | /******/
 76 | /******/ 	// Object.prototype.hasOwnProperty.call
 77 | /******/ 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
 78 | /******/
 79 | /******/ 	// __webpack_public_path__
 80 | /******/ 	__webpack_require__.p = "";
 81 | /******/
 82 | /******/
 83 | /******/ 	// Load entry module and return exports
 84 | /******/ 	return __webpack_require__(__webpack_require__.s = "./src/index.js");
 85 | /******/ })
 86 | /************************************************************************/
 87 | /******/ ({
 88 | 
 89 | /***/ "./node_modules/babel-loader/lib/index.js?!./node_modules/vue-loader/lib/index.js?!./src/picker.vue?vue&type=script&lang=js":
 90 | /*!******************************************************************************************************************************************!*\
 91 |   !*** ./node_modules/babel-loader/lib??ref--1!./node_modules/vue-loader/lib??vue-loader-options!./src/picker.vue?vue&type=script&lang=js ***!
 92 |   \******************************************************************************************************************************************/
 93 | /*! no static exports found */
 94 | /***/ (function(module, exports, __webpack_require__) {
 95 | 
 96 | "use strict";
 97 | eval("\n\nObject.defineProperty(exports, \"__esModule\", {\n  value: true\n});\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n\nvar IS_LONG = '长期有效';\nexports.default = {\n  name: 'vue-ios-pickers',\n  props: {\n    cols: {\n      type: Number,\n      default: 3\n    },\n    pickerData: {\n      type: Array,\n      default: function _default() {\n        return [];\n      }\n    },\n    date: String,\n    minDate: [Number, String],\n    maxDate: [Number, String],\n    value: {\n      default: '',\n      type: [Array, String, Number]\n    },\n    onCancel: Function,\n    onConfirm: Function,\n    onItemChange: Function,\n    name: String,\n    placeholder: {\n      type: String,\n      default: '请选择'\n    },\n    align: {\n      type: String,\n      default: 'right'\n    },\n    isLong: {\n      type: Boolean,\n      default: false\n    }\n  },\n  data: function data() {\n    return {\n      pickerValue: '',\n      show: false,\n      itemHeight: 0,\n      // 实际页面展示的数据\n      colsData: [],\n      pos: []\n    };\n  },\n\n  watch: {\n    show: function show(val) {\n      if (val) this.init();\n    },\n    value: function value(val) {\n      if (val || val === 0) this.init();\n    }\n  },\n  // created() {\n  //   this.pickerValue = this.placeholder;\n  // },\n  mounted: function mounted() {\n    this.init();\n  },\n\n  methods: {\n    closePicker: function closePicker(e) {\n      if (e) e.preventDefault();\n      this.show = false;\n    },\n    onCancelHandler: function onCancelHandler() {\n      this.closePicker();\n      if (typeof this.onCancel === 'function') {\n        this.onCancel();\n      }\n    },\n    onConfirmHandler: function onConfirmHandler() {\n      var data = this.colsData;\n      var cols = data.length;\n      var pos = this.pos;\n      var selected = [];\n      var str = '';\n      var strIds = '';\n      if (this.isLong && this.pos[0].index === 0) {\n        selected.push({\n          name: IS_LONG,\n          id: -1\n        });\n        strIds = '-1';\n        str = IS_LONG;\n      } else {\n        var index = 0;\n        var names = [];\n        var ids = [];\n        while (index < cols) {\n          var _data$index$pos$index = data[index][pos[index].index],\n              name = _data$index$pos$index.name,\n              id = _data$index$pos$index.id;\n\n          selected.push({\n            name: name,\n            id: id\n          });\n          ids.push(id);\n          names.push(name);\n          index += 1;\n        }\n\n        str = names.join(',');\n        strIds = ids.join(',');\n        if (this.date === 'date') {\n          strIds = ids.join('-');\n          str = str.replace(/,/g, '');\n        } else if (this.date === 'time') {\n          strIds = ids.join(':');\n          str = str.replace(',', '');\n        } else if (this.date === 'datetime') {\n          strIds = strIds.replace(/(\\d+),(\\d+),(\\d+),(\\d+),(\\d+)/g, '$1-$2-$3 $4:$5');\n          str = str.replace(/(.+),(.+),(.+),(.+),(.+)/g, '$1$2$3 $4$5');\n        }\n      }\n      if (typeof this.onConfirm === 'function') {\n        this.onConfirm({\n          str: str,\n          strIds: strIds,\n          obj: this.toJSON(selected),\n          name: this.name\n        });\n      }\n\n      this.$emit('input', strIds);\n      this.show = false;\n      this.pickerValue = str;\n    },\n    toJSON: function toJSON(data) {\n      return JSON.parse(JSON.stringify(data));\n    },\n    setTransition: function setTransition(el, val) {\n      el.style.transition = val;\n      el.style.webkitTransition = val;\n    },\n    setTransform: function setTransform(el, val) {\n      el.style.transform = val;\n      el.style.webkitTransform = val;\n    },\n    dynamicStyle: function dynamicStyle(column) {\n      var moveY = this.pos[column].moveY;\n      var value = 'translate3d(0, ' + this.pos[column].moveY + 'px, 0)';\n      if (typeof moveY === 'string' && moveY.indexOf('em') !== -1) {\n        value = 'translate3d(0, ' + this.pos[column].moveY + ', 0)';\n      }\n      return {\n        webkitTransform: value,\n        transform: value\n      };\n    },\n    setPosAttr: function setPosAttr(index, attr, val) {\n      this.pos[index][attr] = val;\n    },\n    getScreenY: function getScreenY(e) {\n      var type = e.type;\n      var screenY = 0;\n      if (type.indexOf('mouse') === 0) {\n        screenY = e.screenY;\n      } else {\n        screenY = e.touches[0].screenY;\n      }\n      return screenY;\n    },\n    getColumn: function getColumn(el) {\n      return +el.dataset.column;\n    },\n    moveTo: function moveTo(el, y) {\n      var _this = this;\n\n      var time = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0.3;\n\n      var currentColumn = this.pos[el.dataset.column];\n      var moveY = currentColumn.moveY;\n      if (moveY !== y) {\n        currentColumn.moveY = y;\n        if (time) {\n          this.setTransition(el, 'cubic-bezier(0,0,0.2,1.15) ' + time + 's');\n        }\n        setTimeout(function () {\n          _this.setTransition(el, '');\n        }, time * 1000);\n      }\n    },\n\n    /**\n     * @param {number} column - 代表的列数(0, 1, 2);\n     * @param {number} index - 当前列表，滚动到的行数索引\n     */\n    onChange: function onChange(column, index) {\n      var currentColumn = this.colsData[column];\n      var oldItem = currentColumn[this.pos[column].index];\n      var colLen = this.colsData.length;\n      if (index === this.pos[column].index) return;\n      this.setPosAttr(column, 'index', index);\n      var newItem = currentColumn[index];\n      if (typeof this.onItemChange === 'function') {\n        this.onItemChange(this.toJSON({\n          oldItem: {\n            name: oldItem.name,\n            id: oldItem.id\n          },\n          newItem: {\n            name: newItem.name,\n            id: newItem.id\n          }\n        }));\n      }\n      // 这里要注意是级连的还是单独的\n      if (this.date === 'date' || this.date === 'datetime') {\n        var year = this.colsData[0][index];\n        if (this.isLong && colLen > 1 && column === 0 && year && year.id === -1) {\n          return this.isLongYear();\n        } else {\n          if (column === 0 && oldItem.id === -1) {\n            if (colLen > 1) this.setMonths(0);\n            if (colLen > 2) this.setDay(1);\n            if (colLen === 5) {\n              this.setHours(0);\n              this.setMinutes(0);\n            }\n          }\n          return this.setDateColumn(column, index);\n        }\n      } else if (this.date === 'time') {\n        return this.setTimeColumn(column, index);\n      }\n      if (column >= 2 || this.pickerData.length > 1) return;\n      var _currentColumn$index = currentColumn[index],\n          id = _currentColumn$index.id,\n          children = _currentColumn$index.children;\n\n      if (id === -1) return;\n      var noData = [{ name: this.placeholder, id: -1 }];\n      if (this.cols === 3) this.resetColumn(2);\n      if (column === 0) {\n        if (this.cols > 1) {\n          this.$set(this.colsData, 1, children || noData);\n          this.resetColumn(1);\n        }\n        if (this.cols !== 3) return;\n        if (children && children[0]) {\n          this.$set(this.colsData, 2, children[0].children || noData);\n        } else {\n          this.$set(this.colsData, 2, noData);\n        }\n      } else if (column === 1 && this.cols === 3) {\n        this.$set(this.colsData, 2, children || noData);\n      }\n    },\n    onStart: function onStart(e) {\n      e.preventDefault();\n      var target = e.target;\n      var children = target.children;\n      if (!children || !children.length) return;\n      var itemHeight = children[0].getBoundingClientRect().height;\n      var len = children.length;\n      var scrollHeight = itemHeight * (len - 1);\n      var column = this.getColumn(target);\n      var moveY = this.pos[column].moveY;\n      // 如果初始化是取的默认值 moveY 的单位为 em，itemHeight === 2em;\n      if (typeof moveY === 'string' && moveY.indexOf('em') !== -1) {\n        moveY = parseInt(moveY) * (itemHeight / 2);\n      }\n      this.itemHeight = itemHeight;\n      this.setPosAttr(column, 'startY', this.getScreenY(e));\n      this.setPosAttr(column, 'moveY', moveY);\n      this.setPosAttr(column, 'isMove', 1);\n      this.setPosAttr(column, 'lastY', moveY);\n      this.setPosAttr(column, 'scrollHeight', scrollHeight);\n      this.setTransition(target, 'cubic-bezier(0, 0, 0.2, 1.15) 0s');\n    },\n\n    // 进行数据运算时，记得判断一下数值是否存在\n    onMove: function onMove(e) {\n      e.preventDefault();\n      var target = e.target;\n      var children = target.children;\n      if (!children || !children.length) return;\n      var column = this.getColumn(target);\n      var currentY = this.getScreenY(e);\n      var currentColumn = this.pos[column];\n      var newMoveY = currentColumn.lastY - currentColumn.startY + currentY;\n      var isMove = currentColumn.isMove;\n      if (isMove) this.setPosAttr(column, 'moveY', newMoveY);\n    },\n    onEnd: function onEnd(e) {\n      e.preventDefault();\n      var target = e.target;\n      var children = target.children;\n      if (!children || !children.length) return;\n      var column = this.getColumn(target);\n      var currentPos = this.pos[column];\n      var itemHeight = this.itemHeight;\n      var scrollHeight = currentPos.scrollHeight;\n      var targetY = currentPos.moveY;\n\n      if (targetY % itemHeight !== 0) {\n        targetY = Math.round(targetY / itemHeight) * itemHeight;\n      }\n\n      if (targetY > 0) {\n        targetY = 0;\n      } else if (Math.abs(targetY) > scrollHeight) {\n        targetY = -scrollHeight;\n      }\n      var index = Math.abs(targetY / itemHeight);\n      this.moveTo(target, targetY);\n      this.onChange(column, index);\n      this.setPosAttr(column, 'isMove', 0);\n    },\n\n    // 组件初始化数据\n    init: function init() {\n      var cols = +this.cols || 3;\n      var index = 0;\n      while (index < cols) {\n        this.$set(this.pos, index, {\n          startY: 0,\n          moveY: 0,\n          lastY: 0,\n          index: 0,\n          scrollHeight: 0,\n          isMove: 0\n        });\n        index += 1;\n      }\n\n      if (this.date) {\n        if (this.date.indexOf('date') !== -1 && this.isLong && +this.value === -1) {\n          this.initLongDate();\n        } else {\n          this.initDate();\n        }\n        return;\n      }\n      if (this.pickerData.length > 1) {\n        this.$set(this, 'colsData', this.pickerData);\n      } else {\n        this.colsData[0] = this.pickerData[0];\n        if (cols > 1) {\n          this.colsData[1] = this.pickerData[0][0].children || [];\n          if (cols === 3) {\n            this.colsData[2] = this.pickerData[0][0].children[0].children;\n          }\n        }\n      }\n      if (this.value || this.value === 0) {\n        this.setDefaultValue(this.value);\n      }\n    },\n\n    // 组件默认值(初始化从父组件传进来的)\n    setDefaultValue: function setDefaultValue(value) {\n      var _this2 = this;\n\n      var defaultValue = value;\n      if (typeof value === 'string') {\n        defaultValue = value.split(',');\n      } else if (typeof value === 'number') {\n        defaultValue = [value];\n      }\n      var firstDefault = defaultValue[0];\n      /**\n       * isChildren 用来判断 picker 取值是级联(取上一列的children) 还是并联(取pickerData[index])\n       */\n      var isChildren = this.pickerData.length === 1;\n      var defaultValueFn = function defaultValueFn(value, column) {\n        if (!value && value !== 0) return;\n        _this2.colsData[column].map(function (item, index) {\n          if (item.name.toString() === value.toString() || item.id.toString() === value.toString()) {\n            _this2.pos[column].index = index;\n            _this2.pos[column].moveY = '-' + 2 * index + 'em';\n            if (column === 0) {\n              _this2.pickerValue = item.name;\n            } else {\n              _this2.pickerValue += ',' + item.name;\n            }\n          }\n        });\n      };\n      defaultValueFn(firstDefault, 0);\n      if (this.cols === 1) return;\n      if (this.pickerData.length > 1) {\n        this.$set(this, 'colsData', this.pickerData);\n      }\n      if (this.cols > 1) {\n        if (isChildren) {\n          this.colsData[1] = this.pickerData[0][this.pos[0].index].children || [];\n        }\n        var secondDefault = defaultValue[1];\n        defaultValueFn(secondDefault, 1);\n        if (this.cols === 3) {\n          if (isChildren) {\n            this.colsData[2] = this.pickerData[0][this.pos[0].index].children[this.pos[1].index].children;\n          }\n          var thirdDefault = defaultValue[2];\n          defaultValueFn(thirdDefault, 2);\n        }\n      }\n    },\n\n    // 日期且默认值是长期有效时的初始化\n    initLongDate: function initLongDate() {\n      var now = new Date();\n      this.pickerValue = IS_LONG;\n      this.setYear(now.getFullYear(), true);\n      if (this.cols > 1) this.colsData[1] = [];\n      if (this.cols > 2) this.colsData[2] = [];\n      if (this.date === 'datetime') {\n        this.resetColumn(3);\n        this.resetColumn(4);\n        this.colsData[3] = [];\n        this.colsData[4] = [];\n      }\n    },\n\n    // 日期初始化\n    initDate: function initDate() {\n      var now = new Date();\n      var strIds = this.value || '';\n      if (strIds && this.date.indexOf('date') !== -1) {\n        var reValue = strIds.replace(/(\\.|-)/g, '/');\n        now = new Date(reValue);\n      }\n      if (now.toString().toLowerCase().indexOf('invalid') !== -1) {\n        now = new Date();\n      } else if (strIds) {\n        var name = strIds.replace(/(\\.|\\/)/g, '-');\n        if (this.date === 'date') {\n          name = name.replace(/(\\d+)\\-?(\\d*)\\-?(\\d*)/g, function (match, p1, p2, p3) {\n            var str = '';\n            if (p1) {\n              str += p1 + '\\u5E74';\n            }\n            if (p2) {\n              str += p2 + '\\u6708';\n            }\n            if (p3) {\n              str += p3 + '\\u65E5';\n            }\n            return str;\n          });\n        } else if (this.date === 'time') {\n          var arr = strIds.split(':');\n          if (arr && arr.length === 2) {\n            name = arr[0].length === 1 ? '0' + arr[0] + '\\u65F6' : arr[0] + '\\u65F6';\n            name += arr[1].length === 1 ? '0' + arr[1] + '\\u5206' : arr[1] + '\\u5206';\n          }\n        } else if (this.date === 'datetime') {\n          name = name.replace(/(\\d+)\\-(\\d+)\\-(\\d+) (\\d+):(\\d+)/g, function (match, p1, p2, p3, p4, p5) {\n            var str = p1 + '\\u5E74' + p2 + '\\u6708' + p3 + '\\u65E5 ';\n            str += p4.length === 1 ? '0' + p4 + '\\u65F6' : p4 + '\\u65F6';\n            str += p5.length === 1 ? '0' + p5 + '\\u5206' : p5 + '\\u5206';\n            return str;\n          });\n        }\n        this.pickerValue = name;\n      }\n      var nowYear = now.getFullYear();\n      var nowMonths = now.getMonth();\n      var nowDay = now.getDate();\n      var nowHours = now.getHours();\n      var nowMinutes = now.getMinutes();\n      if (this.date === 'time') {\n        if (this.value) {\n          var times = this.value.split(':');\n          this.setHours(this.toParseInt(times[0]));\n          this.setMinutes(this.toParseInt(times[1]));\n        } else {\n          this.setHours(nowHours);\n          this.setMinutes(nowMinutes);\n        }\n      } else {\n        this.setYear(nowYear);\n        if (this.cols > 1) {\n          this.setMonths(nowMonths);\n          if (this.cols > 2) {\n            this.setDay(nowDay);\n            this.setDateColumn(this.cols);\n          }\n        }\n        if (this.date === 'datetime') {\n          this.setHours(nowHours);\n          this.setMinutes(nowMinutes);\n        }\n      }\n    },\n    toParseInt: function toParseInt(value) {\n      var num = parseInt(value, 10);\n      return Math.abs(num) || 0;\n    },\n\n    /**\n     * @param {number} nowYear - 现在的年份\n     * @param {boolean} type - true 说明是默认值为'长期有效'时进行的初始化\n     */\n    setYear: function setYear(nowYear, type) {\n      var startYear = parseInt(this.minDate) || 1949;\n      var endYear = parseInt(this.maxDate) || nowYear + 50;\n      var year = startYear;\n      var yearColumn = [];\n      var index = nowYear - startYear;\n      // 如果传了最小年份, 又传了默认值, 当默认值大于最小年份时, 直接设置索引为0\n      if (index < 0) index = 0;\n      // 判断是否增加 长期有效 (身份证有效期会使用到)\n      if (this.isLong) {\n        yearColumn.push({\n          name: IS_LONG,\n          id: -1\n        });\n        index += 1;\n      }\n      while (year <= endYear) {\n        yearColumn.push({\n          name: year + '\\u5E74',\n          id: year\n        });\n        year += 1;\n      }\n      if (type) {\n        this.pos[0].index = 0;\n        this.pos[0].moveY = 0;\n      } else {\n        this.pos[0].index = index;\n        this.pos[0].moveY = '-' + 2 * index + 'em';\n      }\n      this.colsData[0] = yearColumn;\n    },\n    setMonths: function setMonths(nowMonths) {\n      var monthsColum = [];\n      var months = 1;\n      while (months <= 12) {\n        monthsColum.push({\n          name: months + '\\u6708',\n          id: months\n        });\n        months += 1;\n      }\n      this.pos[1].index = nowMonths;\n      this.pos[1].moveY = '-' + 2 * nowMonths + 'em';\n      this.colsData[1] = monthsColum;\n    },\n    setDay: function setDay(nowDay) {\n      var dayColum = [];\n      var day = 1;\n      while (day <= 31) {\n        dayColum.push({\n          name: day + '\\u65E5',\n          id: day\n        });\n        day += 1;\n      }\n      this.pos[2].index = nowDay - 1;\n      this.pos[2].moveY = '-' + 2 * (nowDay - 1) + 'em';\n      this.colsData[2] = dayColum;\n    },\n\n    /**\n     * 跟据年、月来控制日期的天数\n     * @param {number} column - 代表的列数(0, 1, 2);\n     * @param {number} index - 当前列表，滚动到的行数索引\n     */\n    setDateColumn: function setDateColumn(column, index) {\n      if (this.cols < 3) return;\n      var year = this.colsData[0][this.pos[0].index];\n      var month = this.colsData[1][this.pos[1].index];\n      var dayIndex = this.pos[2].index;\n      var day = this.colsData[2][dayIndex];\n      var isLeapYear = this.isLeapYear(year.id);\n      if (column === 2) return;\n      this.setDay(day.id);\n      // 小月份，共 30 天\n      if (month.id === 2) {\n        if (isLeapYear) {\n          this.colsData[2].splice(29, 2);\n          if (dayIndex >= 29) {\n            this.pos[2].moveY = -28 * this.itemHeight;\n            this.pos[2].index = 28;\n          }\n        } else {\n          this.colsData[2].splice(28, 3);\n          if (dayIndex >= 28) {\n            this.pos[2].moveY = -27 * this.itemHeight;\n            this.pos[2].index = 27;\n          }\n        }\n      } else if ([4, 6, 9, 11].indexOf(month.id) !== -1) {\n        this.colsData[2].splice(30, 1);\n        if (dayIndex === 30) {\n          this.pos[2].moveY = -29 * this.itemHeight;\n          this.pos[2].index = 29;\n        }\n      }\n    },\n    isLongYear: function isLongYear() {\n      var colLen = this.colsData.length;\n      this.colsData[1] = [];\n      if (colLen > 2) {\n        this.colsData[2] = [];\n      }\n      if (colLen === 5) {\n        this.colsData[3] = [];\n        this.colsData[4] = [];\n      }\n    },\n\n    /**\n     * 判断是否为闰年\n     * 能被 400 整除 或 能被 4 整除但不能被 100 整除\n     * @param {number} year - 当前年份\n     */\n    isLeapYear: function isLeapYear(year) {\n      if (year % 400 === 0 || year % 4 === 0 && year % 100 !== 0) return true;\n      return false;\n    },\n    setHours: function setHours(nowHours) {\n      var hoursColum = [];\n      var hours = 0;\n      var column = this.date === 'time' ? 0 : 3;\n      while (hours < 24) {\n        hoursColum.push({\n          name: ((hours + '').length === 1 ? '0' + hours : hours) + '\\u65F6',\n          id: hours\n        });\n        hours += 1;\n      }\n      if (!this.pos[column]) {\n        this.resetColumn(3);\n      }\n      this.pos[column].index = nowHours;\n      this.pos[column].moveY = '-' + 2 * nowHours + 'em';\n      this.colsData[column] = hoursColum;\n    },\n    setMinutes: function setMinutes(nowMinutes) {\n      var minutesColum = [];\n      var minutes = 0;\n      var column = this.date === 'time' ? 1 : 4;\n      while (minutes < 60) {\n        minutesColum.push({\n          name: ((minutes + '').length === 1 ? '0' + minutes : minutes) + '\\u5206',\n          id: minutes\n        });\n        minutes += 1;\n      }\n      if (!this.pos[column]) {\n        this.resetColumn(4);\n      }\n      this.pos[column].index = nowMinutes;\n      this.pos[column].moveY = '-' + 2 * nowMinutes + 'em';\n      this.colsData[column] = minutesColum;\n    },\n    setTimeColumn: function setTimeColumn(column, index) {\n      console.log(column, index);\n    },\n\n    /**\n     * @param {number} column - 当前的列数\n     **/\n    resetColumn: function resetColumn(column) {\n      this.$set(this.pos, column, {\n        startY: 0,\n        moveY: 0,\n        lastY: 0,\n        index: 0,\n        isMove: 0\n      });\n    }\n  }\n};\n\n//# sourceURL=webpack:///./src/picker.vue?./node_modules/babel-loader/lib??ref--1!./node_modules/vue-loader/lib??vue-loader-options");
 98 | 
 99 | /***/ }),
100 | 
101 | /***/ "./node_modules/css-loader/index.js?!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/lib/index.js?!./node_modules/less-loader/dist/cjs.js!./node_modules/vue-loader/lib/index.js?!./src/picker.vue?vue&type=style&index=0&id=f6db32b2&lang=less&scoped=true":
102 | /*!*******************************************************************************************************************************************************************************************************************************************************************************************************************!*\
103 |   !*** ./node_modules/css-loader??ref--2-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/lib??ref--2-2!./node_modules/less-loader/dist/cjs.js!./node_modules/vue-loader/lib??vue-loader-options!./src/picker.vue?vue&type=style&index=0&id=f6db32b2&lang=less&scoped=true ***!
104 |   \*******************************************************************************************************************************************************************************************************************************************************************************************************************/
105 | /*! no static exports found */
106 | /***/ (function(module, exports, __webpack_require__) {
107 | 
108 | eval("exports = module.exports = __webpack_require__(/*! ../node_modules/css-loader/lib/css-base.js */ \"./node_modules/css-loader/lib/css-base.js\")(false);\n// imports\n\n\n// module\nexports.push([module.i, \"\\n.vue-ios-pickers[data-v-f6db32b2] {\\n  width: 100%;\\n}\\n.picker-value[data-v-f6db32b2] {\\n  padding: 0.5em 1em 0.5em 0;\\n  height: 1.2em;\\n  position: relative;\\n  -webkit-box-sizing: content-box;\\n          box-sizing: content-box;\\n}\\n.picker-value input[data-v-f6db32b2] {\\n  -webkit-box-sizing: border-box;\\n          box-sizing: border-box;\\n  text-align: right;\\n  pointer-events: none;\\n  position: absolute;\\n  left: 0;\\n  top: 0;\\n  width: 100%;\\n  height: 100%;\\n  margin: 0;\\n  padding: 0 1.2em 0 0;\\n  border: 0 none;\\n  font: inherit;\\n  background: transparent;\\n}\\n.picker-value[data-v-f6db32b2]:after {\\n  content: '';\\n  position: absolute;\\n  right: 0.2em;\\n  top: 0;\\n  bottom: 0;\\n  margin: auto;\\n  width: 0.7em;\\n  height: 0.7em;\\n  border-top: 1px solid #999;\\n  border-right: 1px solid #999;\\n  -webkit-transform: rotateZ(45deg);\\n      -ms-transform: rotate(45deg);\\n          transform: rotateZ(45deg);\\n}\\n.picker-mask[data-v-f6db32b2] {\\n  position: fixed;\\n  top: 0;\\n  left: 0;\\n  right: 0;\\n  bottom: 0;\\n  height: 100%;\\n  background-color: rgba(0, 0, 0, 0.4);\\n  z-index: 999;\\n}\\n.picker-wrapper[data-v-f6db32b2] {\\n  background-color: #fff;\\n  color: #333;\\n  width: 100%;\\n  position: fixed;\\n  left: 0;\\n  bottom: 0;\\n  z-index: 1000;\\n  overflow: hidden;\\n  -webkit-transition: all 0.3s ease;\\n  -o-transition: all 0.3s ease;\\n  transition: all 0.3s ease;\\n}\\n.btn-box[data-v-f6db32b2] {\\n  display: -webkit-box;\\n  display: -ms-flexbox;\\n  display: flex;\\n  -webkit-box-pack: justify;\\n      -ms-flex-pack: justify;\\n          justify-content: space-between;\\n  -webkit-box-align: stretch;\\n      -ms-flex-align: stretch;\\n          align-items: stretch;\\n  background-color: #fff;\\n  border-top: 1px solid #ececec;\\n  border-bottom: 1px solid #ececec;\\n}\\n.btn[data-v-f6db32b2] {\\n  text-decoration: none;\\n  color: #0575f2;\\n  padding: 0.6em;\\n}\\n.data-box[data-v-f6db32b2] {\\n  display: -webkit-box;\\n  display: -ms-flexbox;\\n  display: flex;\\n  position: relative;\\n}\\n.data-box .scroll-mask[data-v-f6db32b2] {\\n  position: absolute;\\n  left: 0;\\n  top: 0;\\n  z-index: 1;\\n  width: 100%;\\n  height: 100%;\\n  background-image: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(rgba(255, 255, 255, 0.6))), -webkit-gradient(linear, left bottom, left top, from(#ffffff), to(rgba(255, 255, 255, 0.6)));\\n  background-image: -o-linear-gradient(top, #ffffff, rgba(255, 255, 255, 0.6)), -o-linear-gradient(bottom, #ffffff, rgba(255, 255, 255, 0.6));\\n  background-image: linear-gradient(180deg, #ffffff, rgba(255, 255, 255, 0.6)), linear-gradient(0deg, #ffffff, rgba(255, 255, 255, 0.6));\\n  background-position: top, bottom;\\n  background-size: 100% 6em;\\n  background-repeat: no-repeat;\\n  pointer-events: none;\\n}\\n.data-box .items[data-v-f6db32b2] {\\n  -webkit-box-flex: 1;\\n      -ms-flex: 1;\\n          flex: 1;\\n  font-size: 1em;\\n  height: 14em;\\n  position: relative;\\n  overflow: hidden;\\n}\\n.data-box .item[data-v-f6db32b2] {\\n  height: 2em;\\n  line-height: 2em;\\n  text-align: center;\\n  overflow: hidden;\\n  white-space: nowrap;\\n  pointer-events: none;\\n}\\n.data-box .border[data-v-f6db32b2] {\\n  height: 2em;\\n  width: 100%;\\n  border-top: 1px solid #d3d3d3;\\n  border-bottom: 1px solid #d3d3d3;\\n  position: absolute;\\n  left: 0;\\n  top: 6em;\\n  z-index: 2;\\n  pointer-events: none;\\n}\\n.data-box .scroll[data-v-f6db32b2] {\\n  position: absolute;\\n  left: 0;\\n  top: 0;\\n  width: 100%;\\n  padding-top: 6em;\\n  padding-bottom: 6em;\\n  margin-top: 0;\\n  list-style: none;\\n  padding-left: 0;\\n}\\n\", \"\"]);\n\n// exports\n\n\n//# sourceURL=webpack:///./src/picker.vue?./node_modules/css-loader??ref--2-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/lib??ref--2-2!./node_modules/less-loader/dist/cjs.js!./node_modules/vue-loader/lib??vue-loader-options");
109 | 
110 | /***/ }),
111 | 
112 | /***/ "./node_modules/css-loader/lib/css-base.js":
113 | /*!*************************************************!*\
114 |   !*** ./node_modules/css-loader/lib/css-base.js ***!
115 |   \*************************************************/
116 | /*! no static exports found */
117 | /***/ (function(module, exports, __webpack_require__) {
118 | 
119 | "use strict";
120 | eval("\n\n/*\n\tMIT License http://www.opensource.org/licenses/mit-license.php\n\tAuthor Tobias Koppers @sokra\n*/\n// css base code, injected by the css-loader\nmodule.exports = function (useSourceMap) {\n\tvar list = [];\n\n\t// return the list of modules as css string\n\tlist.toString = function toString() {\n\t\treturn this.map(function (item) {\n\t\t\tvar content = cssWithMappingToString(item, useSourceMap);\n\t\t\tif (item[2]) {\n\t\t\t\treturn \"@media \" + item[2] + \"{\" + content + \"}\";\n\t\t\t} else {\n\t\t\t\treturn content;\n\t\t\t}\n\t\t}).join(\"\");\n\t};\n\n\t// import a list of modules into the list\n\tlist.i = function (modules, mediaQuery) {\n\t\tif (typeof modules === \"string\") modules = [[null, modules, \"\"]];\n\t\tvar alreadyImportedModules = {};\n\t\tfor (var i = 0; i < this.length; i++) {\n\t\t\tvar id = this[i][0];\n\t\t\tif (typeof id === \"number\") alreadyImportedModules[id] = true;\n\t\t}\n\t\tfor (i = 0; i < modules.length; i++) {\n\t\t\tvar item = modules[i];\n\t\t\t// skip already imported module\n\t\t\t// this implementation is not 100% perfect for weird media query combinations\n\t\t\t//  when a module is imported multiple times with different media queries.\n\t\t\t//  I hope this will never occur (Hey this way we have smaller bundles)\n\t\t\tif (typeof item[0] !== \"number\" || !alreadyImportedModules[item[0]]) {\n\t\t\t\tif (mediaQuery && !item[2]) {\n\t\t\t\t\titem[2] = mediaQuery;\n\t\t\t\t} else if (mediaQuery) {\n\t\t\t\t\titem[2] = \"(\" + item[2] + \") and (\" + mediaQuery + \")\";\n\t\t\t\t}\n\t\t\t\tlist.push(item);\n\t\t\t}\n\t\t}\n\t};\n\treturn list;\n};\n\nfunction cssWithMappingToString(item, useSourceMap) {\n\tvar content = item[1] || '';\n\tvar cssMapping = item[3];\n\tif (!cssMapping) {\n\t\treturn content;\n\t}\n\n\tif (useSourceMap && typeof btoa === 'function') {\n\t\tvar sourceMapping = toComment(cssMapping);\n\t\tvar sourceURLs = cssMapping.sources.map(function (source) {\n\t\t\treturn '/*# sourceURL=' + cssMapping.sourceRoot + source + ' */';\n\t\t});\n\n\t\treturn [content].concat(sourceURLs).concat([sourceMapping]).join('\\n');\n\t}\n\n\treturn [content].join('\\n');\n}\n\n// Adapted from convert-source-map (MIT)\nfunction toComment(sourceMap) {\n\t// eslint-disable-next-line no-undef\n\tvar base64 = btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap))));\n\tvar data = 'sourceMappingURL=data:application/json;charset=utf-8;base64,' + base64;\n\n\treturn '/*# ' + data + ' */';\n}\n\n//# sourceURL=webpack:///./node_modules/css-loader/lib/css-base.js?");
121 | 
122 | /***/ }),
123 | 
124 | /***/ "./node_modules/vue-loader/lib/loaders/templateLoader.js?!./node_modules/vue-loader/lib/index.js?!./src/picker.vue?vue&type=template&id=f6db32b2&scoped=true":
125 | /*!************************************************************************************************************************************************************************************************!*\
126 |   !*** ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./src/picker.vue?vue&type=template&id=f6db32b2&scoped=true ***!
127 |   \************************************************************************************************************************************************************************************************/
128 | /*! exports provided: render, staticRenderFns */
129 | /***/ (function(module, __webpack_exports__, __webpack_require__) {
130 | 
131 | "use strict";
132 | eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"render\", function() { return render; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"staticRenderFns\", function() { return staticRenderFns; });\nvar render = function() {\n  var _vm = this\n  var _h = _vm.$createElement\n  var _c = _vm._self._c || _h\n  return _c(\n    \"div\",\n    { staticClass: \"vue-ios-pickers\" },\n    [\n      _c(\n        \"div\",\n        {\n          staticClass: \"picker-value\",\n          on: {\n            click: function($event) {\n              _vm.show = true\n            }\n          }\n        },\n        [\n          _c(\"input\", {\n            directives: [\n              {\n                name: \"model\",\n                rawName: \"v-model\",\n                value: _vm.pickerValue,\n                expression: \"pickerValue\"\n              }\n            ],\n            style: { textAlign: _vm.align },\n            attrs: { placeholder: _vm.placeholder },\n            domProps: { value: _vm.pickerValue },\n            on: {\n              input: function($event) {\n                if ($event.target.composing) {\n                  return\n                }\n                _vm.pickerValue = $event.target.value\n              }\n            }\n          })\n        ]\n      ),\n      _vm._v(\" \"),\n      _vm.show\n        ? _c(\"transition\", { attrs: { name: \"picker\" } }, [\n            _c(\"div\", [\n              _c(\"div\", {\n                key: \"mask\",\n                staticClass: \"picker-mask\",\n                on: { click: _vm.closePicker, mouseup: _vm.closePicker }\n              }),\n              _vm._v(\" \"),\n              _c(\"div\", { key: \"wrapper\", staticClass: \"picker-wrapper\" }, [\n                _c(\"div\", { staticClass: \"btn-box\" }, [\n                  _c(\n                    \"a\",\n                    {\n                      staticClass: \"btn btn-cancel\",\n                      on: { click: _vm.onCancelHandler }\n                    },\n                    [_vm._v(\"取消\")]\n                  ),\n                  _vm._v(\" \"),\n                  _c(\n                    \"a\",\n                    {\n                      staticClass: \"btn btn-confirm\",\n                      on: { click: _vm.onConfirmHandler }\n                    },\n                    [_vm._v(\"确定\")]\n                  )\n                ]),\n                _vm._v(\" \"),\n                _c(\n                  \"div\",\n                  { staticClass: \"data-box\" },\n                  [\n                    _c(\"div\", { staticClass: \"scroll-mask\" }),\n                    _vm._v(\" \"),\n                    _vm._l(_vm.colsData, function(column, index) {\n                      return _c(\"div\", { key: index, staticClass: \"items\" }, [\n                        _c(\n                          \"ul\",\n                          {\n                            staticClass: \"scroll\",\n                            style: _vm.dynamicStyle(index),\n                            attrs: {\n                              \"data-column\": index,\n                              \"data-event\": column.length > 0\n                            },\n                            on: {\n                              touchstart: _vm.onStart,\n                              mousedown: _vm.onStart,\n                              touchmove: _vm.onMove,\n                              mousemove: _vm.onMove,\n                              touchend: _vm.onEnd,\n                              mouseup: _vm.onEnd\n                            }\n                          },\n                          _vm._l(column, function(item, index) {\n                            return _c(\"li\", {\n                              key: index,\n                              staticClass: \"item\",\n                              domProps: { textContent: _vm._s(item.name) }\n                            })\n                          })\n                        ),\n                        _vm._v(\" \"),\n                        _c(\"div\", { staticClass: \"border\" })\n                      ])\n                    })\n                  ],\n                  2\n                )\n              ])\n            ])\n          ])\n        : _vm._e()\n    ],\n    1\n  )\n}\nvar staticRenderFns = []\nrender._withStripped = true\n\n\n\n//# sourceURL=webpack:///./src/picker.vue?./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options");
133 | 
134 | /***/ }),
135 | 
136 | /***/ "./node_modules/vue-loader/lib/runtime/componentNormalizer.js":
137 | /*!********************************************************************!*\
138 |   !*** ./node_modules/vue-loader/lib/runtime/componentNormalizer.js ***!
139 |   \********************************************************************/
140 | /*! exports provided: default */
141 | /***/ (function(module, __webpack_exports__, __webpack_require__) {
142 | 
143 | "use strict";
144 | eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"default\", function() { return normalizeComponent; });\n/* globals __VUE_SSR_CONTEXT__ */\n\n// IMPORTANT: Do NOT use ES2015 features in this file (except for modules).\n// This module is a runtime utility for cleaner component module output and will\n// be included in the final webpack user bundle.\n\nfunction normalizeComponent (\n  scriptExports,\n  render,\n  staticRenderFns,\n  functionalTemplate,\n  injectStyles,\n  scopeId,\n  moduleIdentifier, /* server only */\n  shadowMode /* vue-cli only */\n) {\n  // Vue.extend constructor export interop\n  var options = typeof scriptExports === 'function'\n    ? scriptExports.options\n    : scriptExports\n\n  // render functions\n  if (render) {\n    options.render = render\n    options.staticRenderFns = staticRenderFns\n    options._compiled = true\n  }\n\n  // functional template\n  if (functionalTemplate) {\n    options.functional = true\n  }\n\n  // scopedId\n  if (scopeId) {\n    options._scopeId = 'data-v-' + scopeId\n  }\n\n  var hook\n  if (moduleIdentifier) { // server build\n    hook = function (context) {\n      // 2.3 injection\n      context =\n        context || // cached call\n        (this.$vnode && this.$vnode.ssrContext) || // stateful\n        (this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext) // functional\n      // 2.2 with runInNewContext: true\n      if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {\n        context = __VUE_SSR_CONTEXT__\n      }\n      // inject component styles\n      if (injectStyles) {\n        injectStyles.call(this, context)\n      }\n      // register component module identifier for async chunk inferrence\n      if (context && context._registeredComponents) {\n        context._registeredComponents.add(moduleIdentifier)\n      }\n    }\n    // used by ssr in case component is cached and beforeCreate\n    // never gets called\n    options._ssrRegister = hook\n  } else if (injectStyles) {\n    hook = shadowMode\n      ? function () { injectStyles.call(this, this.$root.$options.shadowRoot) }\n      : injectStyles\n  }\n\n  if (hook) {\n    if (options.functional) {\n      // for template-only hot-reload because in that case the render fn doesn't\n      // go through the normalizer\n      options._injectStyles = hook\n      // register for functioal component in vue file\n      var originalRender = options.render\n      options.render = function renderWithStyleInjection (h, context) {\n        hook.call(context)\n        return originalRender(h, context)\n      }\n    } else {\n      // inject component registration as beforeCreate hook\n      var existing = options.beforeCreate\n      options.beforeCreate = existing\n        ? [].concat(existing, hook)\n        : [hook]\n    }\n  }\n\n  return {\n    exports: scriptExports,\n    options: options\n  }\n}\n\n\n//# sourceURL=webpack:///./node_modules/vue-loader/lib/runtime/componentNormalizer.js?");
145 | 
146 | /***/ }),
147 | 
148 | /***/ "./node_modules/vue-style-loader/index.js!./node_modules/css-loader/index.js?!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/lib/index.js?!./node_modules/less-loader/dist/cjs.js!./node_modules/vue-loader/lib/index.js?!./src/picker.vue?vue&type=style&index=0&id=f6db32b2&lang=less&scoped=true":
149 | /*!***************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
150 |   !*** ./node_modules/vue-style-loader!./node_modules/css-loader??ref--2-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/lib??ref--2-2!./node_modules/less-loader/dist/cjs.js!./node_modules/vue-loader/lib??vue-loader-options!./src/picker.vue?vue&type=style&index=0&id=f6db32b2&lang=less&scoped=true ***!
151 |   \***************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
152 | /*! no static exports found */
153 | /***/ (function(module, exports, __webpack_require__) {
154 | 
155 | eval("// style-loader: Adds some css to the DOM by adding a <style> tag\n\n// load the styles\nvar content = __webpack_require__(/*! !../node_modules/css-loader??ref--2-1!../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../node_modules/postcss-loader/lib??ref--2-2!../node_modules/less-loader/dist/cjs.js!../node_modules/vue-loader/lib??vue-loader-options!./picker.vue?vue&type=style&index=0&id=f6db32b2&lang=less&scoped=true */ \"./node_modules/css-loader/index.js?!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/lib/index.js?!./node_modules/less-loader/dist/cjs.js!./node_modules/vue-loader/lib/index.js?!./src/picker.vue?vue&type=style&index=0&id=f6db32b2&lang=less&scoped=true\");\nif(typeof content === 'string') content = [[module.i, content, '']];\nif(content.locals) module.exports = content.locals;\n// add the styles to the DOM\nvar add = __webpack_require__(/*! ../node_modules/vue-style-loader/lib/addStylesClient.js */ \"./node_modules/vue-style-loader/lib/addStylesClient.js\").default\nvar update = add(\"73c2dd7c\", content, false, {});\n// Hot Module Replacement\nif(false) {}\n\n//# sourceURL=webpack:///./src/picker.vue?./node_modules/vue-style-loader!./node_modules/css-loader??ref--2-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/lib??ref--2-2!./node_modules/less-loader/dist/cjs.js!./node_modules/vue-loader/lib??vue-loader-options");
156 | 
157 | /***/ }),
158 | 
159 | /***/ "./node_modules/vue-style-loader/lib/addStylesClient.js":
160 | /*!**************************************************************!*\
161 |   !*** ./node_modules/vue-style-loader/lib/addStylesClient.js ***!
162 |   \**************************************************************/
163 | /*! exports provided: default */
164 | /***/ (function(module, __webpack_exports__, __webpack_require__) {
165 | 
166 | "use strict";
167 | eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"default\", function() { return addStylesClient; });\n/* harmony import */ var _listToStyles__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./listToStyles */ \"./node_modules/vue-style-loader/lib/listToStyles.js\");\n/* harmony import */ var _listToStyles__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_listToStyles__WEBPACK_IMPORTED_MODULE_0__);\n/*\n  MIT License http://www.opensource.org/licenses/mit-license.php\n  Author Tobias Koppers @sokra\n  Modified by Evan You @yyx990803\n*/\n\n\n\nvar hasDocument = typeof document !== 'undefined'\n\nif (typeof DEBUG !== 'undefined' && DEBUG) {\n  if (!hasDocument) {\n    throw new Error(\n    'vue-style-loader cannot be used in a non-browser environment. ' +\n    \"Use { target: 'node' } in your Webpack config to indicate a server-rendering environment.\"\n  ) }\n}\n\n/*\ntype StyleObject = {\n  id: number;\n  parts: Array<StyleObjectPart>\n}\n\ntype StyleObjectPart = {\n  css: string;\n  media: string;\n  sourceMap: ?string\n}\n*/\n\nvar stylesInDom = {/*\n  [id: number]: {\n    id: number,\n    refs: number,\n    parts: Array<(obj?: StyleObjectPart) => void>\n  }\n*/}\n\nvar head = hasDocument && (document.head || document.getElementsByTagName('head')[0])\nvar singletonElement = null\nvar singletonCounter = 0\nvar isProduction = false\nvar noop = function () {}\nvar options = null\nvar ssrIdKey = 'data-vue-ssr-id'\n\n// Force single-tag solution on IE6-9, which has a hard limit on the # of <style>\n// tags it will allow on a page\nvar isOldIE = typeof navigator !== 'undefined' && /msie [6-9]\\b/.test(navigator.userAgent.toLowerCase())\n\nfunction addStylesClient (parentId, list, _isProduction, _options) {\n  isProduction = _isProduction\n\n  options = _options || {}\n\n  var styles = _listToStyles__WEBPACK_IMPORTED_MODULE_0___default()(parentId, list)\n  addStylesToDom(styles)\n\n  return function update (newList) {\n    var mayRemove = []\n    for (var i = 0; i < styles.length; i++) {\n      var item = styles[i]\n      var domStyle = stylesInDom[item.id]\n      domStyle.refs--\n      mayRemove.push(domStyle)\n    }\n    if (newList) {\n      styles = _listToStyles__WEBPACK_IMPORTED_MODULE_0___default()(parentId, newList)\n      addStylesToDom(styles)\n    } else {\n      styles = []\n    }\n    for (var i = 0; i < mayRemove.length; i++) {\n      var domStyle = mayRemove[i]\n      if (domStyle.refs === 0) {\n        for (var j = 0; j < domStyle.parts.length; j++) {\n          domStyle.parts[j]()\n        }\n        delete stylesInDom[domStyle.id]\n      }\n    }\n  }\n}\n\nfunction addStylesToDom (styles /* Array<StyleObject> */) {\n  for (var i = 0; i < styles.length; i++) {\n    var item = styles[i]\n    var domStyle = stylesInDom[item.id]\n    if (domStyle) {\n      domStyle.refs++\n      for (var j = 0; j < domStyle.parts.length; j++) {\n        domStyle.parts[j](item.parts[j])\n      }\n      for (; j < item.parts.length; j++) {\n        domStyle.parts.push(addStyle(item.parts[j]))\n      }\n      if (domStyle.parts.length > item.parts.length) {\n        domStyle.parts.length = item.parts.length\n      }\n    } else {\n      var parts = []\n      for (var j = 0; j < item.parts.length; j++) {\n        parts.push(addStyle(item.parts[j]))\n      }\n      stylesInDom[item.id] = { id: item.id, refs: 1, parts: parts }\n    }\n  }\n}\n\nfunction createStyleElement () {\n  var styleElement = document.createElement('style')\n  styleElement.type = 'text/css'\n  head.appendChild(styleElement)\n  return styleElement\n}\n\nfunction addStyle (obj /* StyleObjectPart */) {\n  var update, remove\n  var styleElement = document.querySelector('style[' + ssrIdKey + '~=\"' + obj.id + '\"]')\n\n  if (styleElement) {\n    if (isProduction) {\n      // has SSR styles and in production mode.\n      // simply do nothing.\n      return noop\n    } else {\n      // has SSR styles but in dev mode.\n      // for some reason Chrome can't handle source map in server-rendered\n      // style tags - source maps in <style> only works if the style tag is\n      // created and inserted dynamically. So we remove the server rendered\n      // styles and inject new ones.\n      styleElement.parentNode.removeChild(styleElement)\n    }\n  }\n\n  if (isOldIE) {\n    // use singleton mode for IE9.\n    var styleIndex = singletonCounter++\n    styleElement = singletonElement || (singletonElement = createStyleElement())\n    update = applyToSingletonTag.bind(null, styleElement, styleIndex, false)\n    remove = applyToSingletonTag.bind(null, styleElement, styleIndex, true)\n  } else {\n    // use multi-style-tag mode in all other cases\n    styleElement = createStyleElement()\n    update = applyToTag.bind(null, styleElement)\n    remove = function () {\n      styleElement.parentNode.removeChild(styleElement)\n    }\n  }\n\n  update(obj)\n\n  return function updateStyle (newObj /* StyleObjectPart */) {\n    if (newObj) {\n      if (newObj.css === obj.css &&\n          newObj.media === obj.media &&\n          newObj.sourceMap === obj.sourceMap) {\n        return\n      }\n      update(obj = newObj)\n    } else {\n      remove()\n    }\n  }\n}\n\nvar replaceText = (function () {\n  var textStore = []\n\n  return function (index, replacement) {\n    textStore[index] = replacement\n    return textStore.filter(Boolean).join('\\n')\n  }\n})()\n\nfunction applyToSingletonTag (styleElement, index, remove, obj) {\n  var css = remove ? '' : obj.css\n\n  if (styleElement.styleSheet) {\n    styleElement.styleSheet.cssText = replaceText(index, css)\n  } else {\n    var cssNode = document.createTextNode(css)\n    var childNodes = styleElement.childNodes\n    if (childNodes[index]) styleElement.removeChild(childNodes[index])\n    if (childNodes.length) {\n      styleElement.insertBefore(cssNode, childNodes[index])\n    } else {\n      styleElement.appendChild(cssNode)\n    }\n  }\n}\n\nfunction applyToTag (styleElement, obj) {\n  var css = obj.css\n  var media = obj.media\n  var sourceMap = obj.sourceMap\n\n  if (media) {\n    styleElement.setAttribute('media', media)\n  }\n  if (options.ssrId) {\n    styleElement.setAttribute(ssrIdKey, obj.id)\n  }\n\n  if (sourceMap) {\n    // https://developer.chrome.com/devtools/docs/javascript-debugging\n    // this makes source maps inside style tags work properly in Chrome\n    css += '\\n/*# sourceURL=' + sourceMap.sources[0] + ' */'\n    // http://stackoverflow.com/a/26603875\n    css += '\\n/*# sourceMappingURL=data:application/json;base64,' + btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap)))) + ' */'\n  }\n\n  if (styleElement.styleSheet) {\n    styleElement.styleSheet.cssText = css\n  } else {\n    while (styleElement.firstChild) {\n      styleElement.removeChild(styleElement.firstChild)\n    }\n    styleElement.appendChild(document.createTextNode(css))\n  }\n}\n\n\n//# sourceURL=webpack:///./node_modules/vue-style-loader/lib/addStylesClient.js?");
168 | 
169 | /***/ }),
170 | 
171 | /***/ "./node_modules/vue-style-loader/lib/listToStyles.js":
172 | /*!***********************************************************!*\
173 |   !*** ./node_modules/vue-style-loader/lib/listToStyles.js ***!
174 |   \***********************************************************/
175 | /*! no static exports found */
176 | /***/ (function(module, exports, __webpack_require__) {
177 | 
178 | "use strict";
179 | eval("\n\nObject.defineProperty(exports, \"__esModule\", {\n  value: true\n});\nexports.default = listToStyles;\n/**\n * Translates the list format produced by css-loader into something\n * easier to manipulate.\n */\nfunction listToStyles(parentId, list) {\n  var styles = [];\n  var newStyles = {};\n  for (var i = 0; i < list.length; i++) {\n    var item = list[i];\n    var id = item[0];\n    var css = item[1];\n    var media = item[2];\n    var sourceMap = item[3];\n    var part = {\n      id: parentId + ':' + i,\n      css: css,\n      media: media,\n      sourceMap: sourceMap\n    };\n    if (!newStyles[id]) {\n      styles.push(newStyles[id] = { id: id, parts: [part] });\n    } else {\n      newStyles[id].parts.push(part);\n    }\n  }\n  return styles;\n}\n\n//# sourceURL=webpack:///./node_modules/vue-style-loader/lib/listToStyles.js?");
180 | 
181 | /***/ }),
182 | 
183 | /***/ "./src/index.js":
184 | /*!**********************!*\
185 |   !*** ./src/index.js ***!
186 |   \**********************/
187 | /*! no static exports found */
188 | /***/ (function(module, exports, __webpack_require__) {
189 | 
190 | "use strict";
191 | eval("\n\nObject.defineProperty(exports, \"__esModule\", {\n  value: true\n});\n\nvar _picker = __webpack_require__(/*! ./picker.vue */ \"./src/picker.vue\");\n\nvar _picker2 = _interopRequireDefault(_picker);\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nvar VueIosPickers = {\n  install: function install(Vue) {\n    Vue.component(_picker2.default.name, _picker2.default);\n  }\n};\n\nif (typeof window !== 'undefined' && window.Vue) {\n  Vue.use(VueIosPickers);\n}\n\nexports.default = VueIosPickers;\n\n//# sourceURL=webpack:///./src/index.js?");
192 | 
193 | /***/ }),
194 | 
195 | /***/ "./src/picker.vue":
196 | /*!************************!*\
197 |   !*** ./src/picker.vue ***!
198 |   \************************/
199 | /*! no static exports found */
200 | /***/ (function(module, __webpack_exports__, __webpack_require__) {
201 | 
202 | "use strict";
203 | eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _picker_vue_vue_type_template_id_f6db32b2_scoped_true__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./picker.vue?vue&type=template&id=f6db32b2&scoped=true */ \"./src/picker.vue?vue&type=template&id=f6db32b2&scoped=true\");\n/* harmony import */ var _picker_vue_vue_type_script_lang_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./picker.vue?vue&type=script&lang=js */ \"./src/picker.vue?vue&type=script&lang=js\");\n/* harmony reexport (unknown) */ for(var __WEBPACK_IMPORT_KEY__ in _picker_vue_vue_type_script_lang_js__WEBPACK_IMPORTED_MODULE_1__) if(__WEBPACK_IMPORT_KEY__ !== 'default') (function(key) { __webpack_require__.d(__webpack_exports__, key, function() { return _picker_vue_vue_type_script_lang_js__WEBPACK_IMPORTED_MODULE_1__[key]; }) }(__WEBPACK_IMPORT_KEY__));\n/* harmony import */ var _picker_vue_vue_type_style_index_0_id_f6db32b2_lang_less_scoped_true__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./picker.vue?vue&type=style&index=0&id=f6db32b2&lang=less&scoped=true */ \"./src/picker.vue?vue&type=style&index=0&id=f6db32b2&lang=less&scoped=true\");\n/* harmony import */ var _node_modules_vue_loader_lib_runtime_componentNormalizer_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../node_modules/vue-loader/lib/runtime/componentNormalizer.js */ \"./node_modules/vue-loader/lib/runtime/componentNormalizer.js\");\n\n\n\n\n\n\n/* normalize component */\n\nvar component = Object(_node_modules_vue_loader_lib_runtime_componentNormalizer_js__WEBPACK_IMPORTED_MODULE_3__[\"default\"])(\n  _picker_vue_vue_type_script_lang_js__WEBPACK_IMPORTED_MODULE_1__[\"default\"],\n  _picker_vue_vue_type_template_id_f6db32b2_scoped_true__WEBPACK_IMPORTED_MODULE_0__[\"render\"],\n  _picker_vue_vue_type_template_id_f6db32b2_scoped_true__WEBPACK_IMPORTED_MODULE_0__[\"staticRenderFns\"],\n  false,\n  null,\n  \"f6db32b2\",\n  null\n  \n)\n\n/* hot reload */\nif (false) { var api; }\ncomponent.options.__file = \"src/picker.vue\"\n/* harmony default export */ __webpack_exports__[\"default\"] = (component.exports);\n\n//# sourceURL=webpack:///./src/picker.vue?");
204 | 
205 | /***/ }),
206 | 
207 | /***/ "./src/picker.vue?vue&type=script&lang=js":
208 | /*!************************************************!*\
209 |   !*** ./src/picker.vue?vue&type=script&lang=js ***!
210 |   \************************************************/
211 | /*! no static exports found */
212 | /***/ (function(module, __webpack_exports__, __webpack_require__) {
213 | 
214 | "use strict";
215 | eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _node_modules_babel_loader_lib_index_js_ref_1_node_modules_vue_loader_lib_index_js_vue_loader_options_picker_vue_vue_type_script_lang_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! -!../node_modules/babel-loader/lib??ref--1!../node_modules/vue-loader/lib??vue-loader-options!./picker.vue?vue&type=script&lang=js */ \"./node_modules/babel-loader/lib/index.js?!./node_modules/vue-loader/lib/index.js?!./src/picker.vue?vue&type=script&lang=js\");\n/* harmony import */ var _node_modules_babel_loader_lib_index_js_ref_1_node_modules_vue_loader_lib_index_js_vue_loader_options_picker_vue_vue_type_script_lang_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_babel_loader_lib_index_js_ref_1_node_modules_vue_loader_lib_index_js_vue_loader_options_picker_vue_vue_type_script_lang_js__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony reexport (unknown) */ for(var __WEBPACK_IMPORT_KEY__ in _node_modules_babel_loader_lib_index_js_ref_1_node_modules_vue_loader_lib_index_js_vue_loader_options_picker_vue_vue_type_script_lang_js__WEBPACK_IMPORTED_MODULE_0__) if(__WEBPACK_IMPORT_KEY__ !== 'default') (function(key) { __webpack_require__.d(__webpack_exports__, key, function() { return _node_modules_babel_loader_lib_index_js_ref_1_node_modules_vue_loader_lib_index_js_vue_loader_options_picker_vue_vue_type_script_lang_js__WEBPACK_IMPORTED_MODULE_0__[key]; }) }(__WEBPACK_IMPORT_KEY__));\n /* harmony default export */ __webpack_exports__[\"default\"] = (_node_modules_babel_loader_lib_index_js_ref_1_node_modules_vue_loader_lib_index_js_vue_loader_options_picker_vue_vue_type_script_lang_js__WEBPACK_IMPORTED_MODULE_0___default.a); \n\n//# sourceURL=webpack:///./src/picker.vue?");
216 | 
217 | /***/ }),
218 | 
219 | /***/ "./src/picker.vue?vue&type=style&index=0&id=f6db32b2&lang=less&scoped=true":
220 | /*!*********************************************************************************!*\
221 |   !*** ./src/picker.vue?vue&type=style&index=0&id=f6db32b2&lang=less&scoped=true ***!
222 |   \*********************************************************************************/
223 | /*! no static exports found */
224 | /***/ (function(module, __webpack_exports__, __webpack_require__) {
225 | 
226 | "use strict";
227 | eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _node_modules_vue_style_loader_index_js_node_modules_css_loader_index_js_ref_2_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_lib_index_js_ref_2_2_node_modules_less_loader_dist_cjs_js_node_modules_vue_loader_lib_index_js_vue_loader_options_picker_vue_vue_type_style_index_0_id_f6db32b2_lang_less_scoped_true__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! -!../node_modules/vue-style-loader!../node_modules/css-loader??ref--2-1!../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../node_modules/postcss-loader/lib??ref--2-2!../node_modules/less-loader/dist/cjs.js!../node_modules/vue-loader/lib??vue-loader-options!./picker.vue?vue&type=style&index=0&id=f6db32b2&lang=less&scoped=true */ \"./node_modules/vue-style-loader/index.js!./node_modules/css-loader/index.js?!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/lib/index.js?!./node_modules/less-loader/dist/cjs.js!./node_modules/vue-loader/lib/index.js?!./src/picker.vue?vue&type=style&index=0&id=f6db32b2&lang=less&scoped=true\");\n/* harmony import */ var _node_modules_vue_style_loader_index_js_node_modules_css_loader_index_js_ref_2_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_lib_index_js_ref_2_2_node_modules_less_loader_dist_cjs_js_node_modules_vue_loader_lib_index_js_vue_loader_options_picker_vue_vue_type_style_index_0_id_f6db32b2_lang_less_scoped_true__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_vue_style_loader_index_js_node_modules_css_loader_index_js_ref_2_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_lib_index_js_ref_2_2_node_modules_less_loader_dist_cjs_js_node_modules_vue_loader_lib_index_js_vue_loader_options_picker_vue_vue_type_style_index_0_id_f6db32b2_lang_less_scoped_true__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony reexport (unknown) */ for(var __WEBPACK_IMPORT_KEY__ in _node_modules_vue_style_loader_index_js_node_modules_css_loader_index_js_ref_2_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_lib_index_js_ref_2_2_node_modules_less_loader_dist_cjs_js_node_modules_vue_loader_lib_index_js_vue_loader_options_picker_vue_vue_type_style_index_0_id_f6db32b2_lang_less_scoped_true__WEBPACK_IMPORTED_MODULE_0__) if(__WEBPACK_IMPORT_KEY__ !== 'default') (function(key) { __webpack_require__.d(__webpack_exports__, key, function() { return _node_modules_vue_style_loader_index_js_node_modules_css_loader_index_js_ref_2_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_lib_index_js_ref_2_2_node_modules_less_loader_dist_cjs_js_node_modules_vue_loader_lib_index_js_vue_loader_options_picker_vue_vue_type_style_index_0_id_f6db32b2_lang_less_scoped_true__WEBPACK_IMPORTED_MODULE_0__[key]; }) }(__WEBPACK_IMPORT_KEY__));\n /* harmony default export */ __webpack_exports__[\"default\"] = (_node_modules_vue_style_loader_index_js_node_modules_css_loader_index_js_ref_2_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_lib_index_js_ref_2_2_node_modules_less_loader_dist_cjs_js_node_modules_vue_loader_lib_index_js_vue_loader_options_picker_vue_vue_type_style_index_0_id_f6db32b2_lang_less_scoped_true__WEBPACK_IMPORTED_MODULE_0___default.a); \n\n//# sourceURL=webpack:///./src/picker.vue?");
228 | 
229 | /***/ }),
230 | 
231 | /***/ "./src/picker.vue?vue&type=template&id=f6db32b2&scoped=true":
232 | /*!******************************************************************!*\
233 |   !*** ./src/picker.vue?vue&type=template&id=f6db32b2&scoped=true ***!
234 |   \******************************************************************/
235 | /*! exports provided: render, staticRenderFns */
236 | /***/ (function(module, __webpack_exports__, __webpack_require__) {
237 | 
238 | "use strict";
239 | eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _node_modules_vue_loader_lib_loaders_templateLoader_js_vue_loader_options_node_modules_vue_loader_lib_index_js_vue_loader_options_picker_vue_vue_type_template_id_f6db32b2_scoped_true__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! -!../node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!../node_modules/vue-loader/lib??vue-loader-options!./picker.vue?vue&type=template&id=f6db32b2&scoped=true */ \"./node_modules/vue-loader/lib/loaders/templateLoader.js?!./node_modules/vue-loader/lib/index.js?!./src/picker.vue?vue&type=template&id=f6db32b2&scoped=true\");\n/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, \"render\", function() { return _node_modules_vue_loader_lib_loaders_templateLoader_js_vue_loader_options_node_modules_vue_loader_lib_index_js_vue_loader_options_picker_vue_vue_type_template_id_f6db32b2_scoped_true__WEBPACK_IMPORTED_MODULE_0__[\"render\"]; });\n\n/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, \"staticRenderFns\", function() { return _node_modules_vue_loader_lib_loaders_templateLoader_js_vue_loader_options_node_modules_vue_loader_lib_index_js_vue_loader_options_picker_vue_vue_type_template_id_f6db32b2_scoped_true__WEBPACK_IMPORTED_MODULE_0__[\"staticRenderFns\"]; });\n\n\n\n//# sourceURL=webpack:///./src/picker.vue?");
240 | 
241 | /***/ })
242 | 
243 | /******/ });


--------------------------------------------------------------------------------
/dist/vue-ios-pickers.min.js:
--------------------------------------------------------------------------------
1 | !function(t){var e={};function n(i){if(e[i])return e[i].exports;var s=e[i]={i:i,l:!1,exports:{}};return t[i].call(s.exports,s,s.exports,n),s.l=!0,s.exports}n.m=t,n.c=e,n.d=function(t,e,i){n.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:i})},n.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},n.t=function(t,e){if(1&e&&(t=n(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var i=Object.create(null);if(n.r(i),Object.defineProperty(i,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var s in t)n.d(i,s,function(e){return t[e]}.bind(null,s));return i},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="",n(n.s=6)}([function(t,e,n){"use strict";n.r(e);var i=n(1),s=n.n(i);for(var o in i)"default"!==o&&function(t){n.d(e,t,function(){return i[t]})}(o);e.default=s.a},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0});e.default={name:"vue-ios-pickers",props:{cols:{type:Number,default:3},pickerData:{type:Array,default:function(){return[]}},date:String,minDate:[Number,String],maxDate:[Number,String],value:{default:"",type:[Array,String,Number]},onCancel:Function,onConfirm:Function,onItemChange:Function,name:String,placeholder:{type:String,default:"请选择"},align:{type:String,default:"right"},isLong:{type:Boolean,default:!1}},data:function(){return{pickerValue:"",show:!1,itemHeight:0,colsData:[],pos:[]}},watch:{show:function(t){t&&this.init()},value:function(t){(t||0===t)&&this.init()}},mounted:function(){this.init()},methods:{closePicker:function(t){t&&t.preventDefault(),this.show=!1},onCancelHandler:function(){this.closePicker(),"function"==typeof this.onCancel&&this.onCancel()},onConfirmHandler:function(){var t=this.colsData,e=t.length,n=this.pos,i=[],s="",o="";if(this.isLong&&0===this.pos[0].index)i.push({name:"长期有效",id:-1}),o="-1",s="长期有效";else{for(var a=0,r=[],l=[];a<e;){var c=t[a][n[a].index],d=c.name,u=c.id;i.push({name:d,id:u}),l.push(u),r.push(d),a+=1}s=r.join(","),o=l.join(","),"date"===this.date?(o=l.join("-"),s=s.replace(/,/g,"")):"time"===this.date?(o=l.join(":"),s=s.replace(",","")):"datetime"===this.date&&(o=o.replace(/(\d+),(\d+),(\d+),(\d+),(\d+)/g,"$1-$2-$3 $4:$5"),s=s.replace(/(.+),(.+),(.+),(.+),(.+)/g,"$1$2$3 $4$5"))}"function"==typeof this.onConfirm&&this.onConfirm({str:s,strIds:o,obj:this.toJSON(i),name:this.name}),this.$emit("input",o),this.show=!1,this.pickerValue=s},toJSON:function(t){return JSON.parse(JSON.stringify(t))},setTransition:function(t,e){t.style.transition=e,t.style.webkitTransition=e},setTransform:function(t,e){t.style.transform=e,t.style.webkitTransform=e},dynamicStyle:function(t){var e=this.pos[t].moveY,n="translate3d(0, "+this.pos[t].moveY+"px, 0)";return"string"==typeof e&&-1!==e.indexOf("em")&&(n="translate3d(0, "+this.pos[t].moveY+", 0)"),{webkitTransform:n,transform:n}},setPosAttr:function(t,e,n){this.pos[t][e]=n},getScreenY:function(t){return 0===t.type.indexOf("mouse")?t.screenY:t.touches[0].screenY},getColumn:function(t){return+t.dataset.column},moveTo:function(t,e){var n=this,i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:.3,s=this.pos[t.dataset.column];s.moveY!==e&&(s.moveY=e,i&&this.setTransition(t,"cubic-bezier(0,0,0.2,1.15) "+i+"s"),setTimeout(function(){n.setTransition(t,"")},1e3*i))},onChange:function(t,e){var n=this.colsData[t],i=n[this.pos[t].index],s=this.colsData.length;if(e!==this.pos[t].index){this.setPosAttr(t,"index",e);var o=n[e];if("function"==typeof this.onItemChange&&this.onItemChange(this.toJSON({oldItem:{name:i.name,id:i.id},newItem:{name:o.name,id:o.id}})),"date"===this.date||"datetime"===this.date){var a=this.colsData[0][e];return this.isLong&&s>1&&0===t&&a&&-1===a.id?this.isLongYear():(0===t&&-1===i.id&&(s>1&&this.setMonths(0),s>2&&this.setDay(1),5===s&&(this.setHours(0),this.setMinutes(0))),this.setDateColumn(t,e))}if("time"===this.date)return this.setTimeColumn(t,e);if(!(t>=2||this.pickerData.length>1)){var r=n[e],l=r.id,c=r.children;if(-1!==l){var d=[{name:this.placeholder,id:-1}];if(3===this.cols&&this.resetColumn(2),0===t){if(this.cols>1&&(this.$set(this.colsData,1,c||d),this.resetColumn(1)),3!==this.cols)return;c&&c[0]?this.$set(this.colsData,2,c[0].children||d):this.$set(this.colsData,2,d)}else 1===t&&3===this.cols&&this.$set(this.colsData,2,c||d)}}}},onStart:function(t){t.preventDefault();var e=t.target,n=e.children;if(n&&n.length){var i=n[0].getBoundingClientRect().height,s=i*(n.length-1),o=this.getColumn(e),a=this.pos[o].moveY;"string"==typeof a&&-1!==a.indexOf("em")&&(a=parseInt(a)*(i/2)),this.itemHeight=i,this.setPosAttr(o,"startY",this.getScreenY(t)),this.setPosAttr(o,"moveY",a),this.setPosAttr(o,"isMove",1),this.setPosAttr(o,"lastY",a),this.setPosAttr(o,"scrollHeight",s),this.setTransition(e,"cubic-bezier(0, 0, 0.2, 1.15) 0s")}},onMove:function(t){t.preventDefault();var e=t.target,n=e.children;if(n&&n.length){var i=this.getColumn(e),s=this.getScreenY(t),o=this.pos[i],a=o.lastY-o.startY+s;o.isMove&&this.setPosAttr(i,"moveY",a)}},onEnd:function(t){t.preventDefault();var e=t.target,n=e.children;if(n&&n.length){var i=this.getColumn(e),s=this.pos[i],o=this.itemHeight,a=s.scrollHeight,r=s.moveY;r%o!=0&&(r=Math.round(r/o)*o),r>0?r=0:Math.abs(r)>a&&(r=-a);var l=Math.abs(r/o);this.moveTo(e,r),this.onChange(i,l),this.setPosAttr(i,"isMove",0)}},init:function(){for(var t=+this.cols||3,e=0;e<t;)this.$set(this.pos,e,{startY:0,moveY:0,lastY:0,index:0,scrollHeight:0,isMove:0}),e+=1;this.date?-1!==this.date.indexOf("date")&&this.isLong&&-1==+this.value?this.initLongDate():this.initDate():(this.pickerData.length>1?this.$set(this,"colsData",this.pickerData):(this.colsData[0]=this.pickerData[0],t>1&&(this.colsData[1]=this.pickerData[0][0].children||[],3===t&&(this.colsData[2]=this.pickerData[0][0].children[0].children))),(this.value||0===this.value)&&this.setDefaultValue(this.value))},setDefaultValue:function(t){var e=this,n=t;"string"==typeof t?n=t.split(","):"number"==typeof t&&(n=[t]);var i=n[0],s=1===this.pickerData.length,o=function(t,n){(t||0===t)&&e.colsData[n].map(function(i,s){i.name.toString()!==t.toString()&&i.id.toString()!==t.toString()||(e.pos[n].index=s,e.pos[n].moveY="-"+2*s+"em",0===n?e.pickerValue=i.name:e.pickerValue+=","+i.name)})};(o(i,0),1!==this.cols)&&(this.pickerData.length>1&&this.$set(this,"colsData",this.pickerData),this.cols>1&&(s&&(this.colsData[1]=this.pickerData[0][this.pos[0].index].children||[]),o(n[1],1),3===this.cols&&(s&&(this.colsData[2]=this.pickerData[0][this.pos[0].index].children[this.pos[1].index].children),o(n[2],2))))},initLongDate:function(){var t=new Date;this.pickerValue="长期有效",this.setYear(t.getFullYear(),!0),this.cols>1&&(this.colsData[1]=[]),this.cols>2&&(this.colsData[2]=[]),"datetime"===this.date&&(this.resetColumn(3),this.resetColumn(4),this.colsData[3]=[],this.colsData[4]=[])},initDate:function(){var t=new Date,e=this.value||"";if(e&&-1!==this.date.indexOf("date")){var n=e.replace(/(\.|-)/g,"/");t=new Date(n)}if(-1!==t.toString().toLowerCase().indexOf("invalid"))t=new Date;else if(e){var i=e.replace(/(\.|\/)/g,"-");if("date"===this.date)i=i.replace(/(\d+)\-?(\d*)\-?(\d*)/g,function(t,e,n,i){var s="";return e&&(s+=e+"年"),n&&(s+=n+"月"),i&&(s+=i+"日"),s});else if("time"===this.date){var s=e.split(":");s&&2===s.length&&(i=1===s[0].length?"0"+s[0]+"时":s[0]+"时",i+=1===s[1].length?"0"+s[1]+"分":s[1]+"分")}else"datetime"===this.date&&(i=i.replace(/(\d+)\-(\d+)\-(\d+) (\d+):(\d+)/g,function(t,e,n,i,s,o){var a=e+"年"+n+"月"+i+"日 ";return a+=1===s.length?"0"+s+"时":s+"时",a+=1===o.length?"0"+o+"分":o+"分"}));this.pickerValue=i}var o=t.getFullYear(),a=t.getMonth(),r=t.getDate(),l=t.getHours(),c=t.getMinutes();if("time"===this.date)if(this.value){var d=this.value.split(":");this.setHours(this.toParseInt(d[0])),this.setMinutes(this.toParseInt(d[1]))}else this.setHours(l),this.setMinutes(c);else this.setYear(o),this.cols>1&&(this.setMonths(a),this.cols>2&&(this.setDay(r),this.setDateColumn(this.cols))),"datetime"===this.date&&(this.setHours(l),this.setMinutes(c))},toParseInt:function(t){var e=parseInt(t,10);return Math.abs(e)||0},setYear:function(t,e){var n=parseInt(this.minDate)||1949,i=parseInt(this.maxDate)||t+50,s=n,o=[],a=t-n;for(a<0&&(a=0),this.isLong&&(o.push({name:"长期有效",id:-1}),a+=1);s<=i;)o.push({name:s+"年",id:s}),s+=1;e?(this.pos[0].index=0,this.pos[0].moveY=0):(this.pos[0].index=a,this.pos[0].moveY="-"+2*a+"em"),this.colsData[0]=o},setMonths:function(t){for(var e=[],n=1;n<=12;)e.push({name:n+"月",id:n}),n+=1;this.pos[1].index=t,this.pos[1].moveY="-"+2*t+"em",this.colsData[1]=e},setDay:function(t){for(var e=[],n=1;n<=31;)e.push({name:n+"日",id:n}),n+=1;this.pos[2].index=t-1,this.pos[2].moveY="-"+2*(t-1)+"em",this.colsData[2]=e},setDateColumn:function(t,e){if(!(this.cols<3)){var n=this.colsData[0][this.pos[0].index],i=this.colsData[1][this.pos[1].index],s=this.pos[2].index,o=this.colsData[2][s],a=this.isLeapYear(n.id);2!==t&&(this.setDay(o.id),2===i.id?a?(this.colsData[2].splice(29,2),s>=29&&(this.pos[2].moveY=-28*this.itemHeight,this.pos[2].index=28)):(this.colsData[2].splice(28,3),s>=28&&(this.pos[2].moveY=-27*this.itemHeight,this.pos[2].index=27)):-1!==[4,6,9,11].indexOf(i.id)&&(this.colsData[2].splice(30,1),30===s&&(this.pos[2].moveY=-29*this.itemHeight,this.pos[2].index=29)))}},isLongYear:function(){var t=this.colsData.length;this.colsData[1]=[],t>2&&(this.colsData[2]=[]),5===t&&(this.colsData[3]=[],this.colsData[4]=[])},isLeapYear:function(t){return t%400==0||t%4==0&&t%100!=0},setHours:function(t){for(var e=[],n=0,i="time"===this.date?0:3;n<24;)e.push({name:(1===(n+"").length?"0"+n:n)+"时",id:n}),n+=1;this.pos[i]||this.resetColumn(3),this.pos[i].index=t,this.pos[i].moveY="-"+2*t+"em",this.colsData[i]=e},setMinutes:function(t){for(var e=[],n=0,i="time"===this.date?1:4;n<60;)e.push({name:(1===(n+"").length?"0"+n:n)+"分",id:n}),n+=1;this.pos[i]||this.resetColumn(4),this.pos[i].index=t,this.pos[i].moveY="-"+2*t+"em",this.colsData[i]=e},setTimeColumn:function(t,e){console.log(t,e)},resetColumn:function(t){this.$set(this.pos,t,{startY:0,moveY:0,lastY:0,index:0,isMove:0})}}}},function(t,e,n){var i=n(9);"string"==typeof i&&(i=[[t.i,i,""]]),i.locals&&(t.exports=i.locals);(0,n(11).default)("73c2dd7c",i,!1,{})},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default=function(t,e){for(var n=[],i={},s=0;s<e.length;s++){var o=e[s],a=o[0],r=o[1],l=o[2],c=o[3],d={id:t+":"+s,css:r,media:l,sourceMap:c};i[a]?i[a].parts.push(d):n.push(i[a]={id:a,parts:[d]})}return n}},function(t,e,n){"use strict";var i=function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"vue-ios-pickers"},[n("div",{staticClass:"picker-value",on:{click:function(e){t.show=!0}}},[n("input",{directives:[{name:"model",rawName:"v-model",value:t.pickerValue,expression:"pickerValue"}],style:{textAlign:t.align},attrs:{placeholder:t.placeholder},domProps:{value:t.pickerValue},on:{input:function(e){e.target.composing||(t.pickerValue=e.target.value)}}})]),t._v(" "),t.show?n("transition",{attrs:{name:"picker"}},[n("div",[n("div",{key:"mask",staticClass:"picker-mask",on:{click:t.closePicker,mouseup:t.closePicker}}),t._v(" "),n("div",{key:"wrapper",staticClass:"picker-wrapper"},[n("div",{staticClass:"btn-box"},[n("a",{staticClass:"btn btn-cancel",on:{click:t.onCancelHandler}},[t._v("取消")]),t._v(" "),n("a",{staticClass:"btn btn-confirm",on:{click:t.onConfirmHandler}},[t._v("确定")])]),t._v(" "),n("div",{staticClass:"data-box"},[n("div",{staticClass:"scroll-mask"}),t._v(" "),t._l(t.colsData,function(e,i){return n("div",{key:i,staticClass:"items"},[n("ul",{staticClass:"scroll",style:t.dynamicStyle(i),attrs:{"data-column":i,"data-event":e.length>0},on:{touchstart:t.onStart,mousedown:t.onStart,touchmove:t.onMove,mousemove:t.onMove,touchend:t.onEnd,mouseup:t.onEnd}},t._l(e,function(e,i){return n("li",{key:i,staticClass:"item",domProps:{textContent:t._s(e.name)}})})),t._v(" "),n("div",{staticClass:"border"})])})],2)])])]):t._e()],1)},s=[];i._withStripped=!0,n.d(e,"a",function(){return i}),n.d(e,"b",function(){return s})},function(t,e,n){"use strict";function i(t,e,n,i,s,o,a,r){var l,c="function"==typeof t?t.options:t;if(e&&(c.render=e,c.staticRenderFns=n,c._compiled=!0),i&&(c.functional=!0),o&&(c._scopeId="data-v-"+o),a?(l=function(t){(t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),s&&s.call(this,t),t&&t._registeredComponents&&t._registeredComponents.add(a)},c._ssrRegister=l):s&&(l=r?function(){s.call(this,this.$root.$options.shadowRoot)}:s),l)if(c.functional){c._injectStyles=l;var d=c.render;c.render=function(t,e){return l.call(e),d(t,e)}}else{var u=c.beforeCreate;c.beforeCreate=u?[].concat(u,l):[l]}return{exports:t,options:c}}n.d(e,"a",function(){return i})},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var i=function(t){return t&&t.__esModule?t:{default:t}}(n(7));var s={install:function(t){t.component(i.default.name,i.default)}};"undefined"!=typeof window&&window.Vue&&Vue.use(s),e.default=s},function(t,e,n){"use strict";n.r(e);var i=n(4),s=n(0);for(var o in s)"default"!==o&&function(t){n.d(e,t,function(){return s[t]})}(o);n(8);var a=n(5),r=Object(a.a)(s.default,i.a,i.b,!1,null,"f6db32b2",null);r.options.__file="src/picker.vue",e.default=r.exports},function(t,e,n){"use strict";var i=n(2);n.n(i).a},function(t,e,n){(t.exports=n(10)(!1)).push([t.i,"\n.vue-ios-pickers[data-v-f6db32b2] {\n  width: 100%;\n}\n.picker-value[data-v-f6db32b2] {\n  padding: 0.5em 1em 0.5em 0;\n  height: 1.2em;\n  position: relative;\n  -webkit-box-sizing: content-box;\n          box-sizing: content-box;\n}\n.picker-value input[data-v-f6db32b2] {\n  -webkit-box-sizing: border-box;\n          box-sizing: border-box;\n  text-align: right;\n  pointer-events: none;\n  position: absolute;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  margin: 0;\n  padding: 0 1.2em 0 0;\n  border: 0 none;\n  font: inherit;\n  background: transparent;\n}\n.picker-value[data-v-f6db32b2]:after {\n  content: '';\n  position: absolute;\n  right: 0.2em;\n  top: 0;\n  bottom: 0;\n  margin: auto;\n  width: 0.7em;\n  height: 0.7em;\n  border-top: 1px solid #999;\n  border-right: 1px solid #999;\n  -webkit-transform: rotateZ(45deg);\n      -ms-transform: rotate(45deg);\n          transform: rotateZ(45deg);\n}\n.picker-mask[data-v-f6db32b2] {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  height: 100%;\n  background-color: rgba(0, 0, 0, 0.4);\n  z-index: 999;\n}\n.picker-wrapper[data-v-f6db32b2] {\n  background-color: #fff;\n  color: #333;\n  width: 100%;\n  position: fixed;\n  left: 0;\n  bottom: 0;\n  z-index: 1000;\n  overflow: hidden;\n  -webkit-transition: all 0.3s ease;\n  -o-transition: all 0.3s ease;\n  transition: all 0.3s ease;\n}\n.btn-box[data-v-f6db32b2] {\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  -webkit-box-pack: justify;\n      -ms-flex-pack: justify;\n          justify-content: space-between;\n  -webkit-box-align: stretch;\n      -ms-flex-align: stretch;\n          align-items: stretch;\n  background-color: #fff;\n  border-top: 1px solid #ececec;\n  border-bottom: 1px solid #ececec;\n}\n.btn[data-v-f6db32b2] {\n  text-decoration: none;\n  color: #0575f2;\n  padding: 0.6em;\n}\n.data-box[data-v-f6db32b2] {\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  position: relative;\n}\n.data-box .scroll-mask[data-v-f6db32b2] {\n  position: absolute;\n  left: 0;\n  top: 0;\n  z-index: 1;\n  width: 100%;\n  height: 100%;\n  background-image: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(rgba(255, 255, 255, 0.6))), -webkit-gradient(linear, left bottom, left top, from(#ffffff), to(rgba(255, 255, 255, 0.6)));\n  background-image: -o-linear-gradient(top, #ffffff, rgba(255, 255, 255, 0.6)), -o-linear-gradient(bottom, #ffffff, rgba(255, 255, 255, 0.6));\n  background-image: linear-gradient(180deg, #ffffff, rgba(255, 255, 255, 0.6)), linear-gradient(0deg, #ffffff, rgba(255, 255, 255, 0.6));\n  background-position: top, bottom;\n  background-size: 100% 6em;\n  background-repeat: no-repeat;\n  pointer-events: none;\n}\n.data-box .items[data-v-f6db32b2] {\n  -webkit-box-flex: 1;\n      -ms-flex: 1;\n          flex: 1;\n  font-size: 1em;\n  height: 14em;\n  position: relative;\n  overflow: hidden;\n}\n.data-box .item[data-v-f6db32b2] {\n  height: 2em;\n  line-height: 2em;\n  text-align: center;\n  overflow: hidden;\n  white-space: nowrap;\n  pointer-events: none;\n}\n.data-box .border[data-v-f6db32b2] {\n  height: 2em;\n  width: 100%;\n  border-top: 1px solid #d3d3d3;\n  border-bottom: 1px solid #d3d3d3;\n  position: absolute;\n  left: 0;\n  top: 6em;\n  z-index: 2;\n  pointer-events: none;\n}\n.data-box .scroll[data-v-f6db32b2] {\n  position: absolute;\n  left: 0;\n  top: 0;\n  width: 100%;\n  padding-top: 6em;\n  padding-bottom: 6em;\n  margin-top: 0;\n  list-style: none;\n  padding-left: 0;\n}\n",""])},function(t,e,n){"use strict";t.exports=function(t){var e=[];return e.toString=function(){return this.map(function(e){var n=function(t,e){var n=t[1]||"",i=t[3];if(!i)return n;if(e&&"function"==typeof btoa){var s=function(t){return"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(t))))+" */"}(i),o=i.sources.map(function(t){return"/*# sourceURL="+i.sourceRoot+t+" */"});return[n].concat(o).concat([s]).join("\n")}return[n].join("\n")}(e,t);return e[2]?"@media "+e[2]+"{"+n+"}":n}).join("")},e.i=function(t,n){"string"==typeof t&&(t=[[null,t,""]]);for(var i={},s=0;s<this.length;s++){var o=this[s][0];"number"==typeof o&&(i[o]=!0)}for(s=0;s<t.length;s++){var a=t[s];"number"==typeof a[0]&&i[a[0]]||(n&&!a[2]?a[2]=n:n&&(a[2]="("+a[2]+") and ("+n+")"),e.push(a))}},e}},function(t,e,n){"use strict";n.r(e),n.d(e,"default",function(){return m});var i=n(3),s=n.n(i),o="undefined"!=typeof document;if("undefined"!=typeof DEBUG&&DEBUG&&!o)throw new Error("vue-style-loader cannot be used in a non-browser environment. Use { target: 'node' } in your Webpack config to indicate a server-rendering environment.");var a={},r=o&&(document.head||document.getElementsByTagName("head")[0]),l=null,c=0,d=!1,u=function(){},h=null,f="data-vue-ssr-id",p="undefined"!=typeof navigator&&/msie [6-9]\b/.test(navigator.userAgent.toLowerCase());function m(t,e,n,i){d=n,h=i||{};var o=s()(t,e);return v(o),function(e){for(var n=[],i=0;i<o.length;i++){var r=o[i];(l=a[r.id]).refs--,n.push(l)}e?v(o=s()(t,e)):o=[];for(i=0;i<n.length;i++){var l;if(0===(l=n[i]).refs){for(var c=0;c<l.parts.length;c++)l.parts[c]();delete a[l.id]}}}}function v(t){for(var e=0;e<t.length;e++){var n=t[e],i=a[n.id];if(i){i.refs++;for(var s=0;s<i.parts.length;s++)i.parts[s](n.parts[s]);for(;s<n.parts.length;s++)i.parts.push(b(n.parts[s]));i.parts.length>n.parts.length&&(i.parts.length=n.parts.length)}else{var o=[];for(s=0;s<n.parts.length;s++)o.push(b(n.parts[s]));a[n.id]={id:n.id,refs:1,parts:o}}}}function g(){var t=document.createElement("style");return t.type="text/css",r.appendChild(t),t}function b(t){var e,n,i=document.querySelector("style["+f+'~="'+t.id+'"]');if(i){if(d)return u;i.parentNode.removeChild(i)}if(p){var s=c++;i=l||(l=g()),e=y.bind(null,i,s,!1),n=y.bind(null,i,s,!0)}else i=g(),e=function(t,e){var n=e.css,i=e.media,s=e.sourceMap;i&&t.setAttribute("media",i);h.ssrId&&t.setAttribute(f,e.id);s&&(n+="\n/*# sourceURL="+s.sources[0]+" */",n+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(s))))+" */");if(t.styleSheet)t.styleSheet.cssText=n;else{for(;t.firstChild;)t.removeChild(t.firstChild);t.appendChild(document.createTextNode(n))}}.bind(null,i),n=function(){i.parentNode.removeChild(i)};return e(t),function(i){if(i){if(i.css===t.css&&i.media===t.media&&i.sourceMap===t.sourceMap)return;e(t=i)}else n()}}var x=function(){var t=[];return function(e,n){return t[e]=n,t.filter(Boolean).join("\n")}}();function y(t,e,n,i){var s=n?"":i.css;if(t.styleSheet)t.styleSheet.cssText=x(e,s);else{var o=document.createTextNode(s),a=t.childNodes;a[e]&&t.removeChild(a[e]),a.length?t.insertBefore(o,a[e]):t.appendChild(o)}}}]);


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |   <meta charset="UTF-8">
  5 |   <meta http-equiv="X-UA-Compatible" content="ie=edge">
  6 |   <title>vue-ios-pickers</title>
  7 |   <script data-n-head="true" >!function(a,b){function c(){var b=f.getBoundingClientRect().width;b/i>540&&(b=540*i);var c=b/10;f.style.fontSize=c+"px",k.rem=a.rem=c}var d,e=a.document,f=e.documentElement,g=e.querySelector('meta[name="viewport"]'),h=e.querySelector('meta[name="flexible"]'),i=0,j=0,k=b.flexible||(b.flexible={});if(g){console.warn("将根据已有的meta标签来设置缩放比例");var l=g.getAttribute("content").match(/initial-scale=([d.]+)/);l&&(j=parseFloat(l[1]),i=parseInt(1/j))}else if(h){var m=h.getAttribute("content");if(m){var n=m.match(/initial-dpr=([d.]+)/),o=m.match(/maximum-dpr=([d.]+)/);n&&(i=parseFloat(n[1]),j=parseFloat((1/i).toFixed(2))),o&&(i=parseFloat(o[1]),j=parseFloat((1/i).toFixed(2)))}}if(!i&&!j){var p=(a.navigator.appVersion.match(/android/gi),a.navigator.appVersion.match(/iphone/gi)),q=a.devicePixelRatio;i=p?q>=3&&(!i||i>=3)?3:q>=2&&(!i||i>=2)?2:1:1,j=1/i}if(f.setAttribute("data-dpr",i),!g)if(g=e.createElement("meta"),g.setAttribute("name","viewport"),g.setAttribute("content","width=device-width, initial-scale="+j+", maximum-scale="+j+", minimum-scale="+j+", user-scalable=no"),f.firstElementChild)f.firstElementChild.appendChild(g);else{var r=e.createElement("div");r.appendChild(g),e.write(r.innerHTML)}a.addEventListener("resize",function(){clearTimeout(d),d=setTimeout(c,300)},!1),a.addEventListener("pageshow",function(a){a.persisted&&(clearTimeout(d),d=setTimeout(c,300))},!1),"complete"===e.readyState?e.body.style.fontSize=14*i+"px":e.addEventListener("DOMContentLoaded",function(){e.body.style.fontSize=14*i+"px"},!1),c(),k.dpr=a.dpr=i,k.refreshRem=c,k.rem2px=function(a){var b=parseFloat(a)*this.rem;return"string"==typeof a&&a.match(/rem$/)&&(b+="px"),b},k.px2rem=function(a){var b=parseFloat(a)/this.rem;return"string"==typeof a&&a.match(/px$/)&&(b+="rem"),b}}(window,window.lib||(window.lib={}));</script>
  8 |   <style>
  9 |     body {
 10 |       margin: 0;
 11 |     }
 12 |     button {
 13 |       font-size: 1em;
 14 |     }
 15 |     .demo {
 16 |       margin: 20px;
 17 |     }
 18 |     .data {
 19 |       padding: 10px;
 20 |       box-sizing: border-box;
 21 |       font-size: .9em;
 22 |       position: fixed;
 23 |       color: #fff;
 24 |       right: 0;
 25 |       top: 0;
 26 |       background-color: rgba(0, 0, 0, .7);
 27 |     }
 28 |     .demo-content {
 29 |       margin-left: 1em;
 30 |       list-style: none;
 31 |       padding-top: .3em;
 32 |       padding-bottom: .3em;
 33 |     }
 34 |   </style>
 35 | </head>
 36 | <body>
 37 |   <div id="app">
 38 |     <ul class="demo">
 39 |       <li class="demo-title">三级联动(带默认值)</li>
 40 |       <li class="demo-content">
 41 |         <vue-ios-pickers
 42 |           :picker-data="pickerData"
 43 |           :on-confirm="confirmHandler"
 44 |           :on-item-change="changeHandler"
 45 |           v-model="defaultData.picker"
 46 |           name="picker"
 47 |         ></vue-ios-pickers>
 48 |       </li>
 49 |       <li class="demo-title">双列数据</li>
 50 |       <li class="demo-content">
 51 |         <vue-ios-pickers
 52 |           :picker-data="pickerData"
 53 |           placeholder="自定义提示语"
 54 |           :cols="2"
 55 |           :on-confirm="confirmHandler"
 56 |           v-model="defaultData.doublePicker"
 57 |         ></vue-ios-pickers>
 58 |       </li>
 59 |       <li class="demo-title">单列数据</li>
 60 |       <li class="demo-content">
 61 |         <vue-ios-pickers
 62 |           :picker-data="pickerData"
 63 |           :cols="1"
 64 |           :on-confirm="confirmHandler"
 65 |           v-model="defaultData.singlePicker"
 66 |         ></vue-ios-pickers>
 67 |       </li>
 68 |       <li class="demo-title">日期(年.月.日)</li>
 69 |       <li class="demo-content">
 70 |         <vue-ios-pickers
 71 |           date="date"
 72 |           align="left"
 73 |           :on-confirm="confirmHandler"
 74 |           v-model="defaultData.datePicker"
 75 |         ></vue-ios-pickers>
 76 |       </li>
 77 |       <li class="demo-title">日期(长期有效)</li>
 78 |       <li class="demo-content">
 79 |         <vue-ios-pickers
 80 |           date="date"
 81 |           align="left"
 82 |           :is-long="true"
 83 |           :on-confirm="confirmHandler"
 84 |           v-model="defaultData.dateLong"
 85 |         ></vue-ios-pickers>
 86 |       </li>
 87 |       <li class="demo-title">日期(年.月)</li>
 88 |       <li class="demo-content">
 89 |         <vue-ios-pickers
 90 |           date="date"
 91 |           :cols="2"
 92 |           :on-confirm="confirmHandler"
 93 |           v-model="defaultData.date2Picker"
 94 |         ></vue-ios-pickers>
 95 |       </li>
 96 |       <li class="demo-title">日期(年)</li>
 97 |       <li class="demo-content">
 98 |         <vue-ios-pickers
 99 |           date="date"
100 |           :cols="1"
101 |           :on-confirm="confirmHandler"
102 |           v-model="defaultData.yearPicker"
103 |         ></vue-ios-pickers>
104 |       </li>
105 |       <li class="demo-title">时间</li>
106 |       <li class="demo-content">
107 |         <vue-ios-pickers
108 |           date="time"
109 |           :on-confirm="confirmHandler"
110 |           v-model="defaultData.timePicker"
111 |         ></vue-ios-pickers>
112 |       </li>
113 |       <li class="demo-title">日期+时间</li>
114 |       <li class="demo-content">
115 |         <vue-ios-pickers
116 |           date="datetime"
117 |           :on-confirm="confirmHandler"
118 |           v-model="defaultData.datetimePicker"
119 |         ></vue-ios-pickers>
120 |       </li>
121 |     </ul>
122 |     <div class="data">
123 |       <pre v-text="resultData"></pre>
124 |     </div>
125 |   </div>
126 |   <script src="https://lib.baomitu.com/vue/2.5.16/vue.min.js"></script>
127 |   <script src="./dist/vue-ios-pickers.js"></script>
128 |   <script>
129 |       new Vue({
130 |         el: '#app',
131 |         data: {
132 |           defaultData: {
133 |             picker: [ '四川', '泸州市', '02822' ],
134 |             datetimePicker: '2020-1-5 06:55',
135 |             dateLong: -1
136 |           },
137 |           pickerData: [
138 |             [
139 |               {
140 |                 name: '北京',
141 |                 id: '010',
142 |                 children: [
143 |                   {
144 |                     name: '北京',
145 |                     id: '0101',
146 |                     children: [
147 |                       { name: '西城区', id: '010101' },
148 |                       { name: '东城区', id: '010102' },
149 |                       { name: '海淀区', id: '010103' },
150 |                     ]
151 |                   }
152 |                 ]
153 |               }, {
154 |                 name: '四川',
155 |                 id: '028',
156 |                 children: [
157 |                   {
158 |                     name: '成都市',
159 |                     id: '0281',
160 |                     children: [
161 |                       { name: '武侯区', id: '02811' },
162 |                       { name: '青羊区', id: '02812' },
163 |                       { name: '成华区', id: '02813' },
164 |                       { name: '锦江区', id: '02814' },
165 |                       { name: '金牛区', id: '02815' },
166 |                     ]
167 |                   }, {
168 |                     name: '泸州市',
169 |                     id: '0282',
170 |                     children: [
171 |                       { name: '江阳区', id: '02821' },
172 |                       { name: '龙马潭区', id: '02822' },
173 |                       { name: '纳西区', id: '02823' },
174 |                       { name: '泸县', id: '02824' },
175 |                     ]
176 |                   }
177 |                 ]
178 |               }
179 |             ]
180 |           ],
181 |           resultData: ''
182 |         },
183 |         methods: {
184 |           confirmHandler: function(result) {
185 |             this.resultData = JSON.stringify(result, '', 2);
186 |           },
187 |           changeHandler: function(data) {
188 |             this.resultData = JSON.stringify(data, '', 2);
189 |           }
190 |         }
191 |       });
192 |     </script>
193 | </body>
194 | </html>
195 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-ios-pickers",
 3 |   "version": "1.4.11",
 4 |   "description": "基于vue，iOS风格的picker组件，支持三级联动，日期(年.月.日)，时间(时:分)，日期+时间，年，年+月",
 5 |   "main": "./src/index.es5.js",
 6 |   "repository": "https://github.com/YuanWing/vue-ios-pickers",
 7 |   "keywords": [
 8 |     "vue",
 9 |     "picker",
10 |     "date",
11 |     "time",
12 |     "datetime",
13 |     "vue-picker",
14 |     "ios-picker"
15 |   ],
16 |   "author": "音十 <yuan_wing@163.com>",
17 |   "license": "MIT",
18 |   "scripts": {
19 |     "dev": "webpack --mode=development",
20 |     "build": "webpack --mode=production"
21 |   },
22 |   "dependencies": {
23 |     "vue": "^2.5.16"
24 |   },
25 |   "devDependencies": {
26 |     "webpack": "^4.16.1",
27 |     "webpack-cli": "^3.0.8",
28 |     "autoprefixer": "^8.6.5",
29 |     "babel-core": "^6.26.3",
30 |     "babel-loader": "^7.1.5",
31 |     "babel-preset-env": "^1.7.0",
32 |     "css-loader": "^1.0.0",
33 |     "html-webpack-plugin": "^3.2.0",
34 |     "less": "^3.7.1",
35 |     "less-loader": "^4.1.0",
36 |     "postcss-loader": "^2.1.6",
37 |     "vue-loader": "^15.2.4",
38 |     "vue-style-loader": "^4.1.0",
39 |     "vue-template-compiler": "^2.5.16"
40 |   }
41 | }
42 | 


--------------------------------------------------------------------------------
/qrCode.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/YuanWing/vue-ios-pickers/e547b0b5a6f47ccc07571009da45cde5409772bf/qrCode.png


--------------------------------------------------------------------------------
/src/index.es5.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | Object.defineProperty(exports, "__esModule", {
 4 |   value: true
 5 | });
 6 | 
 7 | var _picker = require('./picker.es5.vue');
 8 | 
 9 | var _picker2 = _interopRequireDefault(_picker);
10 | 
11 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
12 | 
13 | var VueIosPickers = {
14 |   install: function install(Vue) {
15 |     Vue.component(_picker2.default.name, _picker2.default);
16 |   }
17 | };
18 | 
19 | if (typeof window !== 'undefined' && window.Vue) {
20 |   Vue.use(VueIosPickers);
21 | }
22 | 
23 | exports.default = VueIosPickers;


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


--------------------------------------------------------------------------------
/src/picker.es5.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="vue-ios-pickers">
  3 |     <div class="picker-value" @click="show = true">
  4 |       <input :placeholder="placeholder" v-model="pickerValue" :style="{textAlign: align}" />
  5 |     </div>
  6 |     <transition name="picker" v-if="show">
  7 |       <div>
  8 |         <div class="picker-mask" @click="closePicker" @mouseup="closePicker" key="mask" />
  9 |         <div class="picker-wrapper" key="wrapper">
 10 |           <div class="btn-box">
 11 |             <a class="btn btn-cancel" @click="onCancelHandler">取消</a>
 12 |             <a class="btn btn-confirm" @click="onConfirmHandler">确定</a>
 13 |           </div>
 14 |           <div class="data-box">
 15 |             <div class="scroll-mask" />
 16 |             <!-- 第一列 -->
 17 |             <div
 18 |               class="items"
 19 |               v-for="(column, index) in colsData"
 20 |               :key="index"
 21 |             >
 22 |               <ul
 23 |                 class="scroll"
 24 |                 :data-column="index"
 25 |                 :data-event="column.length > 0"
 26 |                 :style="dynamicStyle(index)"
 27 |                 @touchstart="onStart"
 28 |                 @mousedown="onStart"
 29 |                 @touchmove="onMove"
 30 |                 @mousemove="onMove"
 31 |                 @touchend="onEnd"
 32 |                 @mouseup="onEnd"
 33 |               >
 34 |                 <li
 35 |                   class="item"
 36 |                   v-for="(item, index) in column"
 37 |                   v-text="item.name"
 38 |                   :key="index"
 39 |                 />
 40 |               </ul>
 41 |               <div class="border" />
 42 |             </div>
 43 |           </div>
 44 |         </div>
 45 |       </div>
 46 |     </transition>
 47 |   </div>
 48 | </template>
 49 | 
 50 | <script>
 51 |   'use strict';
 52 | 
 53 | Object.defineProperty(exports, "__esModule", {
 54 |   value: true
 55 | });
 56 | var IS_LONG = '长期有效';
 57 | exports.default = {
 58 |   name: 'vue-ios-pickers',
 59 |   props: {
 60 |     cols: {
 61 |       type: Number,
 62 |       default: 3
 63 |     },
 64 |     pickerData: {
 65 |       type: Array,
 66 |       default: function _default() {
 67 |         return [];
 68 |       }
 69 |     },
 70 |     date: String,
 71 |     minDate: [Number, String],
 72 |     maxDate: [Number, String],
 73 |     value: {
 74 |       default: '',
 75 |       type: [Array, String, Number]
 76 |     },
 77 |     onCancel: Function,
 78 |     onConfirm: Function,
 79 |     onItemChange: Function,
 80 |     name: String,
 81 |     placeholder: {
 82 |       type: String,
 83 |       default: '请选择'
 84 |     },
 85 |     align: {
 86 |       type: String,
 87 |       default: 'right'
 88 |     },
 89 |     isLong: {
 90 |       type: Boolean,
 91 |       default: false
 92 |     }
 93 |   },
 94 |   data: function data() {
 95 |     return {
 96 |       pickerValue: '',
 97 |       show: false,
 98 |       itemHeight: 0,
 99 |       // 实际页面展示的数据
100 |       colsData: [],
101 |       pos: []
102 |     };
103 |   },
104 | 
105 |   watch: {
106 |     show: function show(val) {
107 |       if (val) this.init();
108 |     },
109 |     value: function value(val) {
110 |       if (val || val === 0) this.init();
111 |     }
112 |   },
113 |   // created: function created() {
114 |   //   this.pickerValue = this.placeholder;
115 |   // },
116 |   mounted: function mounted() {
117 |     this.init();
118 |   },
119 | 
120 |   methods: {
121 |     closePicker: function closePicker(e) {
122 |       if (e) e.preventDefault();
123 |       this.show = false;
124 |     },
125 |     onCancelHandler: function onCancelHandler() {
126 |       this.closePicker();
127 |       if (typeof this.onCancel === 'function') {
128 |         this.onCancel();
129 |       }
130 |     },
131 |     onConfirmHandler: function onConfirmHandler() {
132 |       var data = this.colsData;
133 |       var cols = data.length;
134 |       var pos = this.pos;
135 |       var selected = [];
136 |       var str = '';
137 |       var strIds = '';
138 |       if (this.isLong && this.pos[0].index === 0) {
139 |         selected.push({
140 |           name: IS_LONG,
141 |           id: -1
142 |         });
143 |         strIds = '-1';
144 |         str = IS_LONG;
145 |       } else {
146 |         var index = 0;
147 |         var names = [];
148 |         var ids = [];
149 |         while (index < cols) {
150 |           var _data$index$pos$index = data[index][pos[index].index],
151 |               name = _data$index$pos$index.name,
152 |               id = _data$index$pos$index.id;
153 | 
154 |           selected.push({
155 |             name: name,
156 |             id: id
157 |           });
158 |           ids.push(id);
159 |           names.push(name);
160 |           index += 1;
161 |         }
162 | 
163 |         str = names.join(',');
164 |         strIds = ids.join(',');
165 |         if (this.date === 'date') {
166 |           strIds = ids.join('-');
167 |           str = str.replace(/,/g, '');
168 |         } else if (this.date === 'time') {
169 |           strIds = ids.join(':');
170 |           str = str.replace(',', '');
171 |         } else if (this.date === 'datetime') {
172 |           strIds = strIds.replace(/(\d+),(\d+),(\d+),(\d+),(\d+)/g, '$1-$2-$3 $4:$5');
173 |           str = str.replace(/(.+),(.+),(.+),(.+),(.+)/g, '$1$2$3 $4$5');
174 |         }
175 |       }
176 |       if (typeof this.onConfirm === 'function') {
177 |         this.onConfirm({
178 |           str: str,
179 |           strIds: strIds,
180 |           obj: this.toJSON(selected),
181 |           name: this.name
182 |         });
183 |       }
184 | 
185 |       this.$emit('input', strIds);
186 |       this.show = false;
187 |       this.pickerValue = str;
188 |     },
189 |     toJSON: function toJSON(data) {
190 |       return JSON.parse(JSON.stringify(data));
191 |     },
192 |     setTransition: function setTransition(el, val) {
193 |       el.style.transition = val;
194 |       el.style.webkitTransition = val;
195 |     },
196 |     setTransform: function setTransform(el, val) {
197 |       el.style.transform = val;
198 |       el.style.webkitTransform = val;
199 |     },
200 |     dynamicStyle: function dynamicStyle(column) {
201 |       var moveY = this.pos[column].moveY;
202 |       var value = 'translate3d(0, ' + this.pos[column].moveY + 'px, 0)';
203 |       if (typeof moveY === 'string' && moveY.indexOf('em') !== -1) {
204 |         value = 'translate3d(0, ' + this.pos[column].moveY + ', 0)';
205 |       }
206 |       return {
207 |         webkitTransform: value,
208 |         transform: value
209 |       };
210 |     },
211 |     setPosAttr: function setPosAttr(index, attr, val) {
212 |       this.pos[index][attr] = val;
213 |     },
214 |     getScreenY: function getScreenY(e) {
215 |       var type = e.type;
216 |       var screenY = 0;
217 |       if (type.indexOf('mouse') === 0) {
218 |         screenY = e.screenY;
219 |       } else {
220 |         screenY = e.touches[0].screenY;
221 |       }
222 |       return screenY;
223 |     },
224 |     getColumn: function getColumn(el) {
225 |       return +el.dataset.column;
226 |     },
227 |     moveTo: function moveTo(el, y) {
228 |       var _this = this;
229 | 
230 |       var time = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0.3;
231 | 
232 |       var currentColumn = this.pos[el.dataset.column];
233 |       var moveY = currentColumn.moveY;
234 |       if (moveY !== y) {
235 |         currentColumn.moveY = y;
236 |         if (time) {
237 |           this.setTransition(el, 'cubic-bezier(0,0,0.2,1.15) ' + time + 's');
238 |         }
239 |         setTimeout(function () {
240 |           _this.setTransition(el, '');
241 |         }, time * 1000);
242 |       }
243 |     },
244 | 
245 |     /**
246 |      * @param {number} column - 代表的列数(0, 1, 2);
247 |      * @param {number} index - 当前列表，滚动到的行数索引
248 |      */
249 |     onChange: function onChange(column, index) {
250 |       var currentColumn = this.colsData[column];
251 |       var oldItem = currentColumn[this.pos[column].index];
252 |       var colLen = this.colsData.length;
253 |       if (index === this.pos[column].index) return;
254 |       this.setPosAttr(column, 'index', index);
255 |       var newItem = currentColumn[index];
256 |       if (typeof this.onItemChange === 'function') {
257 |         this.onItemChange(this.toJSON({
258 |           oldItem: {
259 |             name: oldItem.name,
260 |             id: oldItem.id
261 |           },
262 |           newItem: {
263 |             name: newItem.name,
264 |             id: newItem.id
265 |           }
266 |         }));
267 |       }
268 |       // 这里要注意是级连的还是单独的
269 |       if (this.date === 'date' || this.date === 'datetime') {
270 |         var year = this.colsData[0][index];
271 |         if (this.isLong && colLen > 1 && column === 0 && year && year.id === -1) {
272 |           return this.isLongYear();
273 |         } else {
274 |           if (column === 0 && oldItem.id === -1) {
275 |             if (colLen > 1) this.setMonths(0);
276 |             if (colLen > 2) this.setDay(1);
277 |             if (colLen === 5) {
278 |               this.setHours(0);
279 |               this.setMinutes(0);
280 |             }
281 |           }
282 |           return this.setDateColumn(column, index);
283 |         }
284 |       } else if (this.date === 'time') {
285 |         return this.setTimeColumn(column, index);
286 |       }
287 |       if (column >= 2 || this.pickerData.length > 1) return;
288 |       var _currentColumn$index = currentColumn[index],
289 |           id = _currentColumn$index.id,
290 |           children = _currentColumn$index.children;
291 | 
292 |       if (id === -1) return;
293 |       var noData = [{ name: this.placeholder, id: -1 }];
294 |       if (this.cols === 3) this.resetColumn(2);
295 |       if (column === 0) {
296 |         if (this.cols > 1) {
297 |           this.$set(this.colsData, 1, children || noData);
298 |           this.resetColumn(1);
299 |         }
300 |         if (this.cols !== 3) return;
301 |         if (children && children[0]) {
302 |           this.$set(this.colsData, 2, children[0].children || noData);
303 |         } else {
304 |           this.$set(this.colsData, 2, noData);
305 |         }
306 |       } else if (column === 1 && this.cols === 3) {
307 |         this.$set(this.colsData, 2, children || noData);
308 |       }
309 |     },
310 |     onStart: function onStart(e) {
311 |       e.preventDefault();
312 |       var target = e.target;
313 |       var children = target.children;
314 |       if (!children || !children.length) return;
315 |       var itemHeight = children[0].getBoundingClientRect().height;
316 |       var len = children.length;
317 |       var scrollHeight = itemHeight * (len - 1);
318 |       var column = this.getColumn(target);
319 |       var moveY = this.pos[column].moveY;
320 |       // 如果初始化是取的默认值 moveY 的单位为 em，itemHeight === 2em;
321 |       if (typeof moveY === 'string' && moveY.indexOf('em') !== -1) {
322 |         moveY = parseInt(moveY) * (itemHeight / 2);
323 |       }
324 |       this.itemHeight = itemHeight;
325 |       this.setPosAttr(column, 'startY', this.getScreenY(e));
326 |       this.setPosAttr(column, 'moveY', moveY);
327 |       this.setPosAttr(column, 'isMove', 1);
328 |       this.setPosAttr(column, 'lastY', moveY);
329 |       this.setPosAttr(column, 'scrollHeight', scrollHeight);
330 |       this.setTransition(target, 'cubic-bezier(0, 0, 0.2, 1.15) 0s');
331 |     },
332 | 
333 |     // 进行数据运算时，记得判断一下数值是否存在
334 |     onMove: function onMove(e) {
335 |       e.preventDefault();
336 |       var target = e.target;
337 |       var children = target.children;
338 |       if (!children || !children.length) return;
339 |       var column = this.getColumn(target);
340 |       var currentY = this.getScreenY(e);
341 |       var currentColumn = this.pos[column];
342 |       var newMoveY = currentColumn.lastY - currentColumn.startY + currentY;
343 |       var isMove = currentColumn.isMove;
344 |       if (isMove) this.setPosAttr(column, 'moveY', newMoveY);
345 |     },
346 |     onEnd: function onEnd(e) {
347 |       e.preventDefault();
348 |       var target = e.target;
349 |       var children = target.children;
350 |       if (!children || !children.length) return;
351 |       var column = this.getColumn(target);
352 |       var currentPos = this.pos[column];
353 |       var itemHeight = this.itemHeight;
354 |       var scrollHeight = currentPos.scrollHeight;
355 |       var targetY = currentPos.moveY;
356 | 
357 |       if (targetY % itemHeight !== 0) {
358 |         targetY = Math.round(targetY / itemHeight) * itemHeight;
359 |       }
360 | 
361 |       if (targetY > 0) {
362 |         targetY = 0;
363 |       } else if (Math.abs(targetY) > scrollHeight) {
364 |         targetY = -scrollHeight;
365 |       }
366 |       var index = Math.abs(targetY / itemHeight);
367 |       this.moveTo(target, targetY);
368 |       this.onChange(column, index);
369 |       this.setPosAttr(column, 'isMove', 0);
370 |     },
371 | 
372 |     // 组件初始化数据
373 |     init: function init() {
374 |       var cols = +this.cols || 3;
375 |       var index = 0;
376 |       while (index < cols) {
377 |         this.$set(this.pos, index, {
378 |           startY: 0,
379 |           moveY: 0,
380 |           lastY: 0,
381 |           index: 0,
382 |           scrollHeight: 0,
383 |           isMove: 0
384 |         });
385 |         index += 1;
386 |       }
387 | 
388 |       if (this.date) {
389 |         if (this.date.indexOf('date') !== -1 && this.isLong && +this.value === -1) {
390 |           this.initLongDate();
391 |         } else {
392 |           this.initDate();
393 |         }
394 |         return;
395 |       }
396 |       if (this.pickerData.length > 1) {
397 |         this.$set(this, 'colsData', this.pickerData);
398 |       } else {
399 |         this.colsData[0] = this.pickerData[0];
400 |         if (cols > 1) {
401 |           this.colsData[1] = this.pickerData[0][0].children || [];
402 |           if (cols === 3) {
403 |             this.colsData[2] = this.pickerData[0][0].children[0].children;
404 |           }
405 |         }
406 |       }
407 |       if (this.value || this.value === 0) {
408 |         this.setDefaultValue(this.value);
409 |       }
410 |     },
411 | 
412 |     // 组件默认值(初始化从父组件传进来的)
413 |     setDefaultValue: function setDefaultValue(value) {
414 |       var _this2 = this;
415 | 
416 |       var defaultValue = value;
417 |       if (typeof value === 'string') {
418 |         defaultValue = value.split(',');
419 |       } else if (typeof value === 'number') {
420 |         defaultValue = [value];
421 |       }
422 |       var firstDefault = defaultValue[0];
423 |       /**
424 |        * isChildren 用来判断 picker 取值是级联(取上一列的children) 还是并联(取pickerData[index])
425 |        */
426 |       var isChildren = this.pickerData.length === 1;
427 |       var defaultValueFn = function defaultValueFn(value, column) {
428 |         if (!value && value !== 0) return;
429 |         _this2.colsData[column].map(function (item, index) {
430 |           if (item.name.toString() === value.toString() || item.id.toString() === value.toString()) {
431 |             _this2.pos[column].index = index;
432 |             _this2.pos[column].moveY = '-' + 2 * index + 'em';
433 |             if (column === 0) {
434 |               _this2.pickerValue = item.name;
435 |             } else {
436 |               _this2.pickerValue += ',' + item.name;
437 |             }
438 |           }
439 |         });
440 |       };
441 |       defaultValueFn(firstDefault, 0);
442 |       if (this.cols === 1) return;
443 |       if (this.pickerData.length > 1) {
444 |         this.$set(this, 'colsData', this.pickerData);
445 |       }
446 |       if (this.cols > 1) {
447 |         if (isChildren) {
448 |           this.colsData[1] = this.pickerData[0][this.pos[0].index].children || [];
449 |         }
450 |         var secondDefault = defaultValue[1];
451 |         defaultValueFn(secondDefault, 1);
452 |         if (this.cols === 3) {
453 |           if (isChildren) {
454 |             this.colsData[2] = this.pickerData[0][this.pos[0].index].children[this.pos[1].index].children;
455 |           }
456 |           var thirdDefault = defaultValue[2];
457 |           defaultValueFn(thirdDefault, 2);
458 |         }
459 |       }
460 |     },
461 | 
462 |     // 日期且默认值是长期有效时的初始化
463 |     initLongDate: function initLongDate() {
464 |       var now = new Date();
465 |       this.pickerValue = IS_LONG;
466 |       this.setYear(now.getFullYear(), true);
467 |       if (this.cols > 1) this.colsData[1] = [];
468 |       if (this.cols > 2) this.colsData[2] = [];
469 |       if (this.date === 'datetime') {
470 |         this.resetColumn(3);
471 |         this.resetColumn(4);
472 |         this.colsData[3] = [];
473 |         this.colsData[4] = [];
474 |       }
475 |     },
476 | 
477 |     // 日期初始化
478 |     initDate: function initDate() {
479 |       var now = new Date();
480 |       var strIds = this.value || '';
481 |       if (strIds && this.date.indexOf('date') !== -1) {
482 |         var reValue = strIds.replace(/(\.|-)/g, '/');
483 |         now = new Date(reValue);
484 |       }
485 |       if (now.toString().toLowerCase().indexOf('invalid') !== -1) {
486 |         now = new Date();
487 |       } else if (strIds) {
488 |         var name = strIds.replace(/(\.|\/)/g, '-');
489 |         if (this.date === 'date') {
490 |           name = name.replace(/(\d+)\-?(\d*)\-?(\d*)/g, function (match, p1, p2, p3) {
491 |             var str = '';
492 |             if (p1) {
493 |               str += p1 + '\u5E74';
494 |             }
495 |             if (p2) {
496 |               str += p2 + '\u6708';
497 |             }
498 |             if (p3) {
499 |               str += p3 + '\u65E5';
500 |             }
501 |             return str;
502 |           });
503 |         } else if (this.date === 'time') {
504 |           var arr = strIds.split(':');
505 |           if (arr && arr.length === 2) {
506 |             name = arr[0].length === 1 ? '0' + arr[0] + '\u65F6' : arr[0] + '\u65F6';
507 |             name += arr[1].length === 1 ? '0' + arr[1] + '\u5206' : arr[1] + '\u5206';
508 |           }
509 |         } else if (this.date === 'datetime') {
510 |           name = name.replace(/(\d+)\-(\d+)\-(\d+) (\d+):(\d+)/g, function (match, p1, p2, p3, p4, p5) {
511 |             var str = p1 + '\u5E74' + p2 + '\u6708' + p3 + '\u65E5 ';
512 |             str += p4.length === 1 ? '0' + p4 + '\u65F6' : p4 + '\u65F6';
513 |             str += p5.length === 1 ? '0' + p5 + '\u5206' : p5 + '\u5206';
514 |             return str;
515 |           });
516 |         }
517 |         this.pickerValue = name;
518 |       }
519 |       var nowYear = now.getFullYear();
520 |       var nowMonths = now.getMonth();
521 |       var nowDay = now.getDate();
522 |       var nowHours = now.getHours();
523 |       var nowMinutes = now.getMinutes();
524 |       if (this.date === 'time') {
525 |         if (this.value) {
526 |           var times = this.value.split(':');
527 |           this.setHours(this.toParseInt(times[0]));
528 |           this.setMinutes(this.toParseInt(times[1]));
529 |         } else {
530 |           this.setHours(nowHours);
531 |           this.setMinutes(nowMinutes);
532 |         }
533 |       } else {
534 |         this.setYear(nowYear);
535 |         if (this.cols > 1) {
536 |           this.setMonths(nowMonths);
537 |           if (this.cols > 2) {
538 |             this.setDay(nowDay);
539 |             this.setDateColumn(this.cols);
540 |           }
541 |         }
542 |         if (this.date === 'datetime') {
543 |           this.setHours(nowHours);
544 |           this.setMinutes(nowMinutes);
545 |         }
546 |       }
547 |     },
548 |     toParseInt: function toParseInt(value) {
549 |       var num = parseInt(value, 10);
550 |       return Math.abs(num) || 0;
551 |     },
552 | 
553 |     /**
554 |      * @param {number} nowYear - 现在的年份
555 |      * @param {boolean} type - true 说明是默认值为'长期有效'时进行的初始化
556 |      */
557 |     setYear: function setYear(nowYear, type) {
558 |       var startYear = parseInt(this.minDate) || 1949;
559 |       var endYear = parseInt(this.maxDate) || nowYear + 50;
560 |       var year = startYear;
561 |       var yearColumn = [];
562 |       var index = nowYear - startYear;
563 |       // 如果传了最小年份, 又传了默认值, 当默认值大于最小年份时, 直接设置索引为0
564 |       if (index < 0) index = 0;
565 |       // 判断是否增加 长期有效 (身份证有效期会使用到)
566 |       if (this.isLong) {
567 |         yearColumn.push({
568 |           name: IS_LONG,
569 |           id: -1
570 |         });
571 |         index += 1;
572 |       }
573 |       while (year <= endYear) {
574 |         yearColumn.push({
575 |           name: year + '\u5E74',
576 |           id: year
577 |         });
578 |         year += 1;
579 |       }
580 |       if (type) {
581 |         this.pos[0].index = 0;
582 |         this.pos[0].moveY = 0;
583 |       } else {
584 |         this.pos[0].index = index;
585 |         this.pos[0].moveY = '-' + 2 * index + 'em';
586 |       }
587 |       this.colsData[0] = yearColumn;
588 |     },
589 |     setMonths: function setMonths(nowMonths) {
590 |       var monthsColum = [];
591 |       var months = 1;
592 |       while (months <= 12) {
593 |         monthsColum.push({
594 |           name: months + '\u6708',
595 |           id: months
596 |         });
597 |         months += 1;
598 |       }
599 |       this.pos[1].index = nowMonths;
600 |       this.pos[1].moveY = '-' + 2 * nowMonths + 'em';
601 |       this.colsData[1] = monthsColum;
602 |     },
603 |     setDay: function setDay(nowDay) {
604 |       var dayColum = [];
605 |       var day = 1;
606 |       while (day <= 31) {
607 |         dayColum.push({
608 |           name: day + '\u65E5',
609 |           id: day
610 |         });
611 |         day += 1;
612 |       }
613 |       this.pos[2].index = nowDay - 1;
614 |       this.pos[2].moveY = '-' + 2 * (nowDay - 1) + 'em';
615 |       this.colsData[2] = dayColum;
616 |     },
617 | 
618 |     /**
619 |      * 跟据年、月来控制日期的天数
620 |      * @param {number} column - 代表的列数(0, 1, 2);
621 |      * @param {number} index - 当前列表，滚动到的行数索引
622 |      */
623 |     setDateColumn: function setDateColumn(column, index) {
624 |       if (this.cols < 3) return;
625 |       var year = this.colsData[0][this.pos[0].index];
626 |       var month = this.colsData[1][this.pos[1].index];
627 |       var dayIndex = this.pos[2].index;
628 |       var day = this.colsData[2][dayIndex];
629 |       var isLeapYear = this.isLeapYear(year.id);
630 |       if (column === 2) return;
631 |       this.setDay(day.id);
632 |       // 小月份，共 30 天
633 |       if (month.id === 2) {
634 |         if (isLeapYear) {
635 |           this.colsData[2].splice(29, 2);
636 |           if (dayIndex >= 29) {
637 |             this.pos[2].moveY = -28 * this.itemHeight;
638 |             this.pos[2].index = 28;
639 |           }
640 |         } else {
641 |           this.colsData[2].splice(28, 3);
642 |           if (dayIndex >= 28) {
643 |             this.pos[2].moveY = -27 * this.itemHeight;
644 |             this.pos[2].index = 27;
645 |           }
646 |         }
647 |       } else if ([4, 6, 9, 11].indexOf(month.id) !== -1) {
648 |         this.colsData[2].splice(30, 1);
649 |         if (dayIndex === 30) {
650 |           this.pos[2].moveY = -29 * this.itemHeight;
651 |           this.pos[2].index = 29;
652 |         }
653 |       }
654 |     },
655 |     isLongYear: function isLongYear() {
656 |       var colLen = this.colsData.length;
657 |       this.colsData[1] = [];
658 |       if (colLen > 2) {
659 |         this.colsData[2] = [];
660 |       }
661 |       if (colLen === 5) {
662 |         this.colsData[3] = [];
663 |         this.colsData[4] = [];
664 |       }
665 |     },
666 | 
667 |     /**
668 |      * 判断是否为闰年
669 |      * 能被 400 整除 或 能被 4 整除但不能被 100 整除
670 |      * @param {number} year - 当前年份
671 |      */
672 |     isLeapYear: function isLeapYear(year) {
673 |       if (year % 400 === 0 || year % 4 === 0 && year % 100 !== 0) return true;
674 |       return false;
675 |     },
676 |     setHours: function setHours(nowHours) {
677 |       var hoursColum = [];
678 |       var hours = 0;
679 |       var column = this.date === 'time' ? 0 : 3;
680 |       while (hours < 24) {
681 |         hoursColum.push({
682 |           name: ((hours + '').length === 1 ? '0' + hours : hours) + '\u65F6',
683 |           id: hours
684 |         });
685 |         hours += 1;
686 |       }
687 |       if (!this.pos[column]) {
688 |         this.resetColumn(3);
689 |       }
690 |       this.pos[column].index = nowHours;
691 |       this.pos[column].moveY = '-' + 2 * nowHours + 'em';
692 |       this.colsData[column] = hoursColum;
693 |     },
694 |     setMinutes: function setMinutes(nowMinutes) {
695 |       var minutesColum = [];
696 |       var minutes = 0;
697 |       var column = this.date === 'time' ? 1 : 4;
698 |       while (minutes < 60) {
699 |         minutesColum.push({
700 |           name: ((minutes + '').length === 1 ? '0' + minutes : minutes) + '\u5206',
701 |           id: minutes
702 |         });
703 |         minutes += 1;
704 |       }
705 |       if (!this.pos[column]) {
706 |         this.resetColumn(4);
707 |       }
708 |       this.pos[column].index = nowMinutes;
709 |       this.pos[column].moveY = '-' + 2 * nowMinutes + 'em';
710 |       this.colsData[column] = minutesColum;
711 |     },
712 |     setTimeColumn: function setTimeColumn(column, index) {
713 |       console.log(column, index);
714 |     },
715 | 
716 |     /**
717 |      * @param {number} column - 当前的列数
718 |      **/
719 |     resetColumn: function resetColumn(column) {
720 |       this.$set(this.pos, column, {
721 |         startY: 0,
722 |         moveY: 0,
723 |         lastY: 0,
724 |         index: 0,
725 |         isMove: 0
726 |       });
727 |     }
728 |   }
729 | };
730 | </script>
731 | 
732 | <style lang="less" scoped>
733 |   @borderColor: #ececec;
734 |   .vue-ios-pickers {
735 |     width: 100%;
736 |   }
737 |   .picker-value {
738 |     padding: 0.5em 1em 0.5em 0;
739 |     height: 1.2em;
740 |     position: relative;
741 |     box-sizing: content-box;
742 |     input {
743 |       box-sizing: border-box;
744 |       text-align: right;
745 |       pointer-events: none;
746 |       position: absolute;
747 |       left: 0;
748 |       top: 0;
749 |       width: 100%;
750 |       height: 100%;
751 |       margin: 0;
752 |       padding: 0 1.2em 0 0;
753 |       border: 0 none;
754 |       font: inherit;
755 |       background: transparent;
756 |     }
757 |     &:after {
758 |       content: '';
759 |       position: absolute;
760 |       right: .2em;
761 |       top: 0;
762 |       bottom: 0;
763 |       margin: auto;
764 |       width: 0.7em;
765 |       height: 0.7em;
766 |       border-top: 1px solid #999;
767 |       border-right: 1px solid #999;
768 |       transform: rotateZ(45deg);
769 |     }
770 |   }
771 |   .picker-mask {
772 |     position: fixed;
773 |     top: 0;
774 |     left: 0;
775 |     right: 0;
776 |     bottom: 0;
777 |     height: 100%;
778 |     background-color: rgba(0, 0, 0, .4);
779 |     z-index: 999;
780 |   }
781 |   .picker-wrapper {
782 |     background-color: #fff;
783 |     color: #333;
784 |     width: 100%;
785 |     position: fixed;
786 |     left: 0;
787 |     bottom: 0;
788 |     z-index: 1000;
789 |     overflow: hidden;
790 |     transition: all .3s ease;
791 |   }
792 |   .btn-box {
793 |     display: flex;
794 |     justify-content: space-between;
795 |     align-items: stretch;
796 |     background-color: #fff;
797 |     border-top: 1px solid #ececec;
798 |     border-bottom: 1px solid #ececec;
799 |   }
800 |   .btn {
801 |     text-decoration: none;
802 |     color: #0575f2;
803 |     padding: .6em;
804 |   }
805 |   .data-box {
806 |     display: flex;
807 |     position: relative;
808 |     .scroll-mask {
809 |       position: absolute;
810 |       left: 0;
811 |       top: 0;
812 |       z-index: 1;
813 |       width: 100%;
814 |       height: 100%;
815 |       background-image: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.6)),
816 |                         linear-gradient(0deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.6));
817 |       background-position: top, bottom;
818 |       background-size: 100% 6em;
819 |       background-repeat: no-repeat;
820 |       pointer-events: none;
821 |     }
822 |     .items {
823 |       flex: 1;
824 |       font-size: 1em;
825 |       height: 14em;
826 |       position: relative;
827 |       overflow: hidden;
828 |     }
829 |     .item {
830 |       height: 2em;
831 |       line-height: 2em;
832 |       text-align: center;
833 |       overflow: hidden;
834 |       white-space: nowrap;
835 |       pointer-events: none;
836 |     }
837 |     .border {
838 |       height: 2em;
839 |       width: 100%;
840 |       border-top: 1px solid darken(@borderColor, 10%);
841 |       border-bottom: 1px solid darken(@borderColor, 10%);
842 |       position: absolute;
843 |       left: 0;
844 |       top: 6em;
845 |       z-index: 2;
846 |       pointer-events: none;
847 |     }
848 |     .scroll {
849 |       position: absolute;
850 |       left: 0;
851 |       top: 0;
852 |       width: 100%;
853 |       padding-top: 6em;
854 |       padding-bottom: 6em;
855 |       margin-top: 0;
856 |       margin-top: 0;
857 |       list-style: none;
858 |       padding-left: 0;
859 |     }
860 |   }
861 | </style>
862 | 


--------------------------------------------------------------------------------
/src/picker.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="vue-ios-pickers">
  3 |     <div class="picker-value" @click="show = true">
  4 |       <input :placeholder="placeholder" v-model="pickerValue" :style="{textAlign: align}" />
  5 |     </div>
  6 |     <transition name="picker" v-if="show">
  7 |       <div>
  8 |         <div class="picker-mask" @click="closePicker" @mouseup="closePicker" key="mask" />
  9 |         <div class="picker-wrapper" key="wrapper">
 10 |           <div class="btn-box">
 11 |             <a class="btn btn-cancel" @click="onCancelHandler">取消</a>
 12 |             <a class="btn btn-confirm" @click="onConfirmHandler">确定</a>
 13 |           </div>
 14 |           <div class="data-box">
 15 |             <div class="scroll-mask" />
 16 |             <!-- 第一列 -->
 17 |             <div
 18 |               class="items"
 19 |               v-for="(column, index) in colsData"
 20 |               :key="index"
 21 |             >
 22 |               <ul
 23 |                 class="scroll"
 24 |                 :data-column="index"
 25 |                 :data-event="column.length > 0"
 26 |                 :style="dynamicStyle(index)"
 27 |                 @touchstart="onStart"
 28 |                 @mousedown="onStart"
 29 |                 @touchmove="onMove"
 30 |                 @mousemove="onMove"
 31 |                 @touchend="onEnd"
 32 |                 @mouseup="onEnd"
 33 |               >
 34 |                 <li
 35 |                   class="item"
 36 |                   v-for="(item, index) in column"
 37 |                   v-text="item.name"
 38 |                   :key="index"
 39 |                 />
 40 |               </ul>
 41 |               <div class="border" />
 42 |             </div>
 43 |           </div>
 44 |         </div>
 45 |       </div>
 46 |     </transition>
 47 |   </div>
 48 | </template>
 49 | 
 50 | <script>
 51 |   const IS_LONG = '长期有效';
 52 |   export default {
 53 |     name: 'vue-ios-pickers',
 54 |     props: {
 55 |       cols: {
 56 |         type: Number,
 57 |         default: 3
 58 |       },
 59 |       pickerData: {
 60 |         type: Array,
 61 |         default() {
 62 |           return [];
 63 |         }
 64 |       },
 65 |       date: String,
 66 |       minDate: [Number, String],
 67 |       maxDate: [Number, String],
 68 |       value: {
 69 |         default: '',
 70 |         type: [Array, String, Number]
 71 |       },
 72 |       onCancel: Function,
 73 |       onConfirm: Function,
 74 |       onItemChange: Function,
 75 |       name: String,
 76 |       placeholder: {
 77 |         type: String,
 78 |         default: '请选择'
 79 |       },
 80 |       align: {
 81 |         type: String,
 82 |         default: 'right'
 83 |       },
 84 |       isLong: {
 85 |         type: Boolean,
 86 |         default: false
 87 |       }
 88 |     },
 89 |     data() {
 90 |       return {
 91 |         pickerValue: '',
 92 |         show: false,
 93 |         itemHeight: 0,
 94 |         // 实际页面展示的数据
 95 |         colsData: [],
 96 |         pos: []
 97 |       };
 98 |     },
 99 |     watch: {
100 |       show(val) {
101 |         if (val) this.init();
102 |       },
103 |       value(val) {
104 |         if (val || val === 0) this.init();
105 |       }
106 |     },
107 |     // created() {
108 |     //   this.pickerValue = this.placeholder;
109 |     // },
110 |     mounted() {
111 |       this.init();
112 |     },
113 |     methods: {
114 |       closePicker(e) {
115 |         if (e) e.preventDefault();
116 |         this.show = false;
117 |       },
118 |       onCancelHandler() {
119 |         this.closePicker();
120 |         if (typeof this.onCancel === 'function') {
121 |           this.onCancel();
122 |         }
123 |       },
124 |       onConfirmHandler() {
125 |         const data = this.colsData;
126 |         const cols = data.length;
127 |         const pos = this.pos;
128 |         const selected = [];
129 |         let str = '';
130 |         let strIds = '';
131 |         if (this.isLong && this.pos[0].index === 0) {
132 |           selected.push({
133 |             name: IS_LONG,
134 |             id: -1
135 |           });
136 |           strIds = '-1';
137 |           str = IS_LONG;
138 |         } else {
139 |           let index = 0;
140 |           let names = [];
141 |           let ids = [];
142 |           while (index < cols) {
143 |             const { name, id } = data[index][pos[index].index];
144 |             selected.push({
145 |               name,
146 |               id
147 |             });
148 |             ids.push(id);
149 |             names.push(name);
150 |             index += 1;
151 |           }
152 | 
153 |           str = names.join(',');
154 |           strIds = ids.join(',');
155 |           if (this.date === 'date') {
156 |             strIds = ids.join('-');
157 |             str = str.replace(/,/g, '');
158 |           } else if (this.date === 'time') {
159 |             strIds = ids.join(':');
160 |             str = str.replace(',', '');
161 |           } else if (this.date === 'datetime') {
162 |             strIds = strIds.replace(/(\d+),(\d+),(\d+),(\d+),(\d+)/g, '$1-$2-$3 $4:$5');
163 |             str = str.replace(/(.+),(.+),(.+),(.+),(.+)/g, '$1$2$3 $4$5');
164 |           }
165 |         }
166 |         if (typeof this.onConfirm === 'function') {
167 |           this.onConfirm({
168 |             str,
169 |             strIds,
170 |             obj: this.toJSON(selected),
171 |             name: this.name
172 |           });
173 |         }
174 | 
175 |         this.$emit('input', strIds);
176 |         this.show = false;
177 |         this.pickerValue = str;
178 |       },
179 |       toJSON(data) {
180 |         return JSON.parse(JSON.stringify(data));
181 |       },
182 |       setTransition(el, val) {
183 |         el.style.transition = val;
184 |         el.style.webkitTransition = val;
185 |       },
186 |       setTransform(el, val) {
187 |         el.style.transform = val;
188 |         el.style.webkitTransform = val;
189 |       },
190 |       dynamicStyle(column) {
191 |         const moveY = this.pos[column].moveY;
192 |         let value = `translate3d(0, ${this.pos[column].moveY}px, 0)`;
193 |         if (typeof moveY === 'string' && moveY.indexOf('em') !== -1) {
194 |           value = `translate3d(0, ${this.pos[column].moveY}, 0)`;
195 |         }
196 |         return {
197 |           webkitTransform: value,
198 |           transform: value
199 |         };
200 |       },
201 |       setPosAttr(index, attr, val) {
202 |         this.pos[index][attr] = val;
203 |       },
204 |       getScreenY(e) {
205 |         const type = e.type;
206 |         let screenY = 0;
207 |         if (type.indexOf('mouse') === 0) {
208 |           screenY = e.screenY;
209 |         } else {
210 |           screenY = e.touches[0].screenY;
211 |         }
212 |         return screenY;
213 |       },
214 |       getColumn(el) {
215 |         return +el.dataset.column;
216 |       },
217 |       moveTo(el, y, time = 0.3) {
218 |         const currentColumn = this.pos[el.dataset.column];
219 |         let moveY = currentColumn.moveY;
220 |         if (moveY !== y) {
221 |           currentColumn.moveY = y;
222 |           if (time) {
223 |             this.setTransition(el, `cubic-bezier(0,0,0.2,1.15) ${time}s`);
224 |           }
225 |           setTimeout(() => {
226 |             this.setTransition(el, '');
227 |           }, time * 1000);
228 |         }
229 |       },
230 |       /**
231 |        * @param {number} column - 代表的列数(0, 1, 2);
232 |        * @param {number} index - 当前列表，滚动到的行数索引
233 |        */
234 |       onChange(column, index) {
235 |         const currentColumn = this.colsData[column];
236 |         const oldItem = currentColumn[this.pos[column].index];
237 |         const colLen = this.colsData.length;
238 |         if (index === this.pos[column].index) return;
239 |         this.setPosAttr(column, 'index', index);
240 |         const newItem = currentColumn[index];
241 |         if (typeof this.onItemChange === 'function') {
242 |           this.onItemChange(this.toJSON({
243 |             oldItem: {
244 |               name: oldItem.name,
245 |               id: oldItem.id
246 |             },
247 |             newItem: {
248 |               name: newItem.name,
249 |               id: newItem.id
250 |             }
251 |           }));
252 |         }
253 |         // 这里要注意是级连的还是单独的
254 |         if (this.date === 'date' || this.date === 'datetime') {
255 |           const year = this.colsData[0][index];
256 |           if (this.isLong && colLen > 1 && column === 0 && year && year.id === -1) {
257 |             return this.isLongYear();
258 |           } else {
259 |             if (column === 0 && oldItem.id === -1) {
260 |               if (colLen > 1) this.setMonths(0);
261 |               if (colLen > 2) this.setDay(1);
262 |               if (colLen === 5) {
263 |                 this.setHours(0);
264 |                 this.setMinutes(0);
265 |               }
266 |             }
267 |             return this.setDateColumn(column, index);
268 |           }
269 |         } else if (this.date === 'time') {
270 |           return this.setTimeColumn(column, index);
271 |         }
272 |         if (column >= 2 || this.pickerData.length > 1) return;
273 |         const { id, children } = currentColumn[index];
274 |         if (id === -1) return;
275 |         const noData = [{ name: this.placeholder, id: -1 }];
276 |         if (this.cols === 3) this.resetColumn(2);
277 |         if (column === 0) {
278 |           if (this.cols > 1) {
279 |             this.$set(this.colsData, 1, children || noData);
280 |             this.resetColumn(1);
281 |           }
282 |           if (this.cols !== 3) return;
283 |           if (children && children[0]) {
284 |             this.$set(this.colsData, 2, children[0].children || noData);
285 |           } else {
286 |             this.$set(this.colsData, 2, noData);
287 |           }
288 |         } else if (column === 1 && this.cols === 3) {
289 |           this.$set(this.colsData, 2, children || noData);
290 |         }
291 |       },
292 |       onStart(e) {
293 |         e.preventDefault();
294 |         const target = e.target;
295 |         const children = target.children;
296 |         if (!children || !children.length) return;
297 |         const itemHeight = children[0].getBoundingClientRect().height;
298 |         const len = children.length;
299 |         const scrollHeight = itemHeight * (len - 1);
300 |         const column = this.getColumn(target);
301 |         let moveY = this.pos[column].moveY;
302 |         // 如果初始化是取的默认值 moveY 的单位为 em，itemHeight === 2em;
303 |         if (typeof moveY === 'string' && moveY.indexOf('em') !== -1) {
304 |           moveY = parseInt(moveY) * (itemHeight / 2);
305 |         }
306 |         this.itemHeight = itemHeight;
307 |         this.setPosAttr(column, 'startY', this.getScreenY(e));
308 |         this.setPosAttr(column, 'moveY', moveY);
309 |         this.setPosAttr(column, 'isMove', 1);
310 |         this.setPosAttr(column, 'lastY', moveY);
311 |         this.setPosAttr(column, 'scrollHeight', scrollHeight);
312 |         this.setTransition(target, 'cubic-bezier(0, 0, 0.2, 1.15) 0s');
313 |       },
314 |       // 进行数据运算时，记得判断一下数值是否存在
315 |       onMove(e) {
316 |         e.preventDefault();
317 |         const target = e.target;
318 |         const children = target.children;
319 |         if (!children || !children.length) return;
320 |         const column = this.getColumn(target);
321 |         const currentY = this.getScreenY(e);
322 |         const currentColumn = this.pos[column];
323 |         const newMoveY = currentColumn.lastY - currentColumn.startY + currentY;
324 |         const isMove = currentColumn.isMove;
325 |         if (isMove) this.setPosAttr(column, 'moveY', newMoveY);
326 |       },
327 |       onEnd(e) {
328 |         e.preventDefault();
329 |         const target = e.target;
330 |         const children = target.children;
331 |         if (!children || !children.length) return;
332 |         const column = this.getColumn(target);
333 |         const currentPos = this.pos[column];
334 |         const itemHeight = this.itemHeight;
335 |         const scrollHeight = currentPos.scrollHeight;
336 |         let targetY = currentPos.moveY;
337 | 
338 |         if (targetY % itemHeight !== 0) {
339 |           targetY = Math.round(targetY / itemHeight) * itemHeight;
340 |         }
341 | 
342 |         if (targetY > 0) {
343 |           targetY = 0;
344 |         } else if (Math.abs(targetY) > scrollHeight) {
345 |           targetY = -scrollHeight;
346 |         }
347 |         const index = Math.abs(targetY / itemHeight);
348 |         this.moveTo(target, targetY);
349 |         this.onChange(column, index);
350 |         this.setPosAttr(column, 'isMove', 0);
351 |       },
352 |       // 组件初始化数据
353 |       init() {
354 |         const cols = +this.cols || 3;
355 |         let index = 0;
356 |         while (index < cols) {
357 |           this.$set(this.pos, index, {
358 |             startY: 0,
359 |             moveY: 0,
360 |             lastY: 0,
361 |             index: 0,
362 |             scrollHeight: 0,
363 |             isMove: 0
364 |           });
365 |           index += 1;
366 |         }
367 | 
368 |         if (this.date) {
369 |           if (this.date.indexOf('date') !== -1 && this.isLong && +this.value === -1) {
370 |             this.initLongDate();
371 |           } else {
372 |             this.initDate();
373 |           }
374 |           return;
375 |         }
376 |         if (this.pickerData.length > 1) {
377 |           this.$set(this, 'colsData', this.pickerData);
378 |         } else {
379 |           this.colsData[0] = this.pickerData[0];
380 |           if (cols > 1) {
381 |             this.colsData[1] = this.pickerData[0][0].children || [];
382 |             if (cols === 3) {
383 |               this.colsData[2] = this.pickerData[0][0].children[0].children;
384 |             }
385 |           }
386 |         }
387 |         if (this.value || this.value === 0) {
388 |           this.setDefaultValue(this.value);
389 |         }
390 |       },
391 |       // 组件默认值(初始化从父组件传进来的)
392 |       setDefaultValue(value) {
393 |         let defaultValue = value;
394 |         if (typeof value === 'string') {
395 |           defaultValue = value.split(',');
396 |         } else if (typeof value === 'number') {
397 |           defaultValue = [value];
398 |         }
399 |         const firstDefault = defaultValue[0];
400 |         /**
401 |          * isChildren 用来判断 picker 取值是级联(取上一列的children) 还是并联(取pickerData[index])
402 |          */
403 |         const isChildren = this.pickerData.length === 1;
404 |         const defaultValueFn = (value, column) => {
405 |           if (!value && value !== 0) return;
406 |           this.colsData[column].map((item, index) => {
407 |             if (item.name.toString() === value.toString() || item.id.toString() === value.toString()) {
408 |               this.pos[column].index = index;
409 |               this.pos[column].moveY = `-${2 * index}em`;
410 |               if (column === 0) {
411 |                 this.pickerValue = item.name;
412 |               } else {
413 |                 this.pickerValue += `,${item.name}`;
414 |               }
415 |             }
416 |           });
417 |         };
418 |         defaultValueFn(firstDefault, 0);
419 |         if (this.cols === 1) return;
420 |         if (this.pickerData.length > 1) {
421 |           this.$set(this, 'colsData', this.pickerData);
422 |         }
423 |         if (this.cols > 1) {
424 |           if (isChildren) {
425 |             this.colsData[1] = this.pickerData[0][this.pos[0].index].children || [];
426 |           }
427 |           const secondDefault = defaultValue[1];
428 |           defaultValueFn(secondDefault, 1);
429 |           if (this.cols === 3) {
430 |             if (isChildren) {
431 |               this.colsData[2] = this.pickerData[0][this.pos[0].index].children[this.pos[1].index].children;
432 |             }
433 |             const thirdDefault = defaultValue[2];
434 |             defaultValueFn(thirdDefault, 2);
435 |           }
436 |         }
437 |       },
438 |       // 日期且默认值是长期有效时的初始化
439 |       initLongDate() {
440 |         const now = new Date();
441 |         this.pickerValue = IS_LONG;
442 |         this.setYear(now.getFullYear(), true);
443 |         if (this.cols > 1) this.colsData[1] = [];
444 |         if (this.cols > 2) this.colsData[2] = [];
445 |         if (this.date === 'datetime') {
446 |           this.resetColumn(3);
447 |           this.resetColumn(4);
448 |           this.colsData[3] = [];
449 |           this.colsData[4] = [];
450 |         }
451 |       },
452 |       // 日期初始化
453 |       initDate() {
454 |         let now = new Date();
455 |         const strIds = this.value || '';
456 |         if (strIds && this.date.indexOf('date') !== -1) {
457 |           const reValue = strIds.replace(/(\.|-)/g, '/');
458 |           now = new Date(reValue);
459 |         }
460 |         if (now.toString().toLowerCase().indexOf('invalid') !== -1) {
461 |           now = new Date();
462 |         } else if (strIds) {
463 |           let name = strIds.replace(/(\.|\/)/g, '-');
464 |           if (this.date === 'date') {
465 |             name = name.replace(/(\d+)\-?(\d*)\-?(\d*)/g, (match, p1, p2, p3) => {
466 |               let str = '';
467 |               if (p1) {
468 |                 str += `${p1}年`;
469 |               }
470 |               if (p2) {
471 |                 str += `${p2}月`;
472 |               }
473 |               if (p3) {
474 |                 str += `${p3}日`
475 |               }
476 |               return str;
477 |             });
478 |           } else if (this.date === 'time') {
479 |             const arr = strIds.split(':');
480 |             if (arr && arr.length === 2) {
481 |               name = arr[0].length === 1 ? `0${arr[0]}时` : `${arr[0]}时`;
482 |               name += arr[1].length === 1 ? `0${arr[1]}分` : `${arr[1]}分`;
483 |             }
484 |           } else if (this.date === 'datetime') {
485 |             name = name.replace(/(\d+)\-(\d+)\-(\d+) (\d+):(\d+)/g, (match, p1, p2, p3, p4, p5) => {
486 |               let str = `${p1}年${p2}月${p3}日 `;
487 |               str += (p4.length === 1 ? `0${p4}时` : `${p4}时`);
488 |               str += (p5.length === 1 ? `0${p5}分` : `${p5}分`);
489 |               return str;
490 |             });
491 |           }
492 |           this.pickerValue = name;
493 |         }
494 |         let nowYear = now.getFullYear();
495 |         let nowMonths = now.getMonth();
496 |         let nowDay = now.getDate();
497 |         let nowHours = now.getHours();
498 |         let nowMinutes = now.getMinutes();
499 |         if (this.date === 'time') {
500 |           if (this.value) {
501 |             const times = this.value.split(':');
502 |             this.setHours(this.toParseInt(times[0]));
503 |             this.setMinutes(this.toParseInt(times[1]));
504 |           } else {
505 |             this.setHours(nowHours);
506 |             this.setMinutes(nowMinutes);
507 |           }
508 |         } else {
509 |           this.setYear(nowYear);
510 |           if (this.cols > 1) {
511 |             this.setMonths(nowMonths);
512 |             if (this.cols > 2) {
513 |               this.setDay(nowDay);
514 |               this.setDateColumn(this.cols);
515 |             }
516 |           }
517 |           if (this.date === 'datetime') {
518 |             this.setHours(nowHours);
519 |             this.setMinutes(nowMinutes);
520 |           }
521 |         }
522 |       },
523 |       toParseInt(value) {
524 |         let num = parseInt(value, 10);
525 |         return Math.abs(num) || 0;
526 |       },
527 |       /**
528 |        * @param {number} nowYear - 现在的年份
529 |        * @param {boolean} type - true 说明是默认值为'长期有效'时进行的初始化
530 |        */
531 |       setYear(nowYear, type) {
532 |         const startYear = parseInt(this.minDate) || 1949;
533 |         const endYear = parseInt(this.maxDate) || (nowYear + 50);
534 |         let year = startYear;
535 |         const yearColumn = [];
536 |         let index = nowYear - startYear;
537 |         // 如果传了最小年份, 又传了默认值, 当默认值大于最小年份时, 直接设置索引为0
538 |         if (index < 0) index = 0;
539 |         // 判断是否增加 长期有效 (身份证有效期会使用到)
540 |         if (this.isLong) {
541 |           yearColumn.push({
542 |             name: IS_LONG,
543 |             id: -1
544 |           });
545 |           index += 1;
546 |         }
547 |         while (year <= endYear) {
548 |           yearColumn.push({
549 |             name: `${year}年`,
550 |             id: year
551 |           });
552 |           year += 1;
553 |         }
554 |         if (type) {
555 |           this.pos[0].index = 0;
556 |           this.pos[0].moveY = 0;
557 |         } else {
558 |           this.pos[0].index = index;
559 |           this.pos[0].moveY = `-${2 * index}em`;
560 |         }
561 |         this.colsData[0] = yearColumn;
562 |       },
563 |       setMonths(nowMonths) {
564 |         const monthsColum = [];
565 |         let months = 1;
566 |         while (months <= 12) {
567 |           monthsColum.push({
568 |             name: `${months}月`,
569 |             id: months
570 |           });
571 |           months += 1;
572 |         }
573 |         this.pos[1].index = nowMonths;
574 |         this.pos[1].moveY = `-${2 * nowMonths}em`;
575 |         this.colsData[1] = monthsColum;
576 |       },
577 |       setDay(nowDay) {
578 |         const dayColum = [];
579 |         let day = 1;
580 |         while (day <= 31) {
581 |           dayColum.push({
582 |             name: `${day}日`,
583 |             id: day
584 |           });
585 |           day += 1;
586 |         }
587 |         this.pos[2].index = nowDay - 1;
588 |         this.pos[2].moveY = `-${2 * (nowDay - 1)}em`;
589 |         this.colsData[2] = dayColum;
590 |       },
591 |       /**
592 |        * 跟据年、月来控制日期的天数
593 |        * @param {number} column - 代表的列数(0, 1, 2);
594 |        * @param {number} index - 当前列表，滚动到的行数索引
595 |        */
596 |       setDateColumn(column, index) {
597 |         if (this.cols < 3) return;
598 |         const year = this.colsData[0][this.pos[0].index];
599 |         const month = this.colsData[1][this.pos[1].index];
600 |         const dayIndex = this.pos[2].index;
601 |         const day = this.colsData[2][dayIndex];
602 |         const isLeapYear = this.isLeapYear(year.id);
603 |         if (column === 2) return;
604 |         this.setDay(day.id);
605 |         // 小月份，共 30 天
606 |         if (month.id === 2) {
607 |           if (isLeapYear) {
608 |             this.colsData[2].splice(29, 2);
609 |             if (dayIndex >= 29) {
610 |               this.pos[2].moveY = -28 * this.itemHeight;
611 |               this.pos[2].index = 28;
612 |             }
613 |           } else {
614 |             this.colsData[2].splice(28, 3);
615 |             if (dayIndex >= 28) {
616 |               this.pos[2].moveY = -27 * this.itemHeight;
617 |               this.pos[2].index = 27;
618 |             }
619 |           }
620 |         } else if ([4, 6, 9, 11].indexOf(month.id) !== -1) {
621 |           this.colsData[2].splice(30, 1);
622 |           if (dayIndex === 30) {
623 |             this.pos[2].moveY = -29 * this.itemHeight;
624 |             this.pos[2].index = 29;
625 |           }
626 |         }
627 |       },
628 |       isLongYear() {
629 |         const colLen = this.colsData.length;
630 |         this.colsData[1] = [];
631 |         if (colLen > 2) {
632 |           this.colsData[2] = [];
633 |         }
634 |         if (colLen === 5) {
635 |           this.colsData[3] = [];
636 |           this.colsData[4] = [];
637 |         }
638 |       },
639 |       /**
640 |        * 判断是否为闰年
641 |        * 能被 400 整除 或 能被 4 整除但不能被 100 整除
642 |        * @param {number} year - 当前年份
643 |        */
644 |       isLeapYear(year) {
645 |         if (year % 400 === 0 || (year % 4 === 0 && year % 100 !== 0)) return true;
646 |         return false;
647 |       },
648 |       setHours(nowHours) {
649 |         const hoursColum = [];
650 |         let hours = 0;
651 |         let column = this.date === 'time' ? 0 : 3;
652 |         while (hours < 24) {
653 |           hoursColum.push({
654 |             name: `${(hours + '').length === 1 ? '0' + hours : hours}时`,
655 |             id: hours
656 |           });
657 |           hours += 1;
658 |         }
659 |         if (!this.pos[column]) {
660 |           this.resetColumn(3);
661 |         }
662 |         this.pos[column].index = nowHours;
663 |         this.pos[column].moveY = `-${2 * nowHours}em`;
664 |         this.colsData[column] = hoursColum;
665 |       },
666 |       setMinutes(nowMinutes) {
667 |         const minutesColum = [];
668 |         let minutes = 0;
669 |         let column = this.date === 'time' ? 1 : 4;
670 |         while (minutes < 60) {
671 |           minutesColum.push({
672 |             name: `${(minutes + '').length === 1 ? '0' + minutes : minutes}分`,
673 |             id: minutes
674 |           });
675 |           minutes += 1;
676 |         }
677 |         if (!this.pos[column]) {
678 |           this.resetColumn(4);
679 |         }
680 |         this.pos[column].index = nowMinutes;
681 |         this.pos[column].moveY = `-${2 * nowMinutes}em`;
682 |         this.colsData[column] = minutesColum;
683 |       },
684 |       setTimeColumn(column, index) {
685 |         console.log(column, index);
686 |       },
687 |       /**
688 |        * @param {number} column - 当前的列数
689 |        **/
690 |       resetColumn(column) {
691 |         this.$set(this.pos, column, {
692 |           startY: 0,
693 |           moveY: 0,
694 |           lastY: 0,
695 |           index: 0,
696 |           isMove: 0
697 |         });
698 |       }
699 |     }
700 |   };
701 | </script>
702 | 
703 | <style lang="less" scoped>
704 |   @borderColor: #ececec;
705 |   .vue-ios-pickers {
706 |     width: 100%;
707 |   }
708 |   .picker-value {
709 |     padding: 0.5em 1em 0.5em 0;
710 |     height: 1.2em;
711 |     position: relative;
712 |     box-sizing: content-box;
713 |     input {
714 |       box-sizing: border-box;
715 |       text-align: right;
716 |       pointer-events: none;
717 |       position: absolute;
718 |       left: 0;
719 |       top: 0;
720 |       width: 100%;
721 |       height: 100%;
722 |       margin: 0;
723 |       padding: 0 1.2em 0 0;
724 |       border: 0 none;
725 |       font: inherit;
726 |       background: transparent;
727 |     }
728 |     &:after {
729 |       content: '';
730 |       position: absolute;
731 |       right: .2em;
732 |       top: 0;
733 |       bottom: 0;
734 |       margin: auto;
735 |       width: 0.7em;
736 |       height: 0.7em;
737 |       border-top: 1px solid #999;
738 |       border-right: 1px solid #999;
739 |       transform: rotateZ(45deg);
740 |     }
741 |   }
742 |   .picker-mask {
743 |     position: fixed;
744 |     top: 0;
745 |     left: 0;
746 |     right: 0;
747 |     bottom: 0;
748 |     height: 100%;
749 |     background-color: rgba(0, 0, 0, .4);
750 |     z-index: 999;
751 |   }
752 |   .picker-wrapper {
753 |     background-color: #fff;
754 |     color: #333;
755 |     width: 100%;
756 |     position: fixed;
757 |     left: 0;
758 |     bottom: 0;
759 |     z-index: 1000;
760 |     overflow: hidden;
761 |     transition: all .3s ease;
762 |   }
763 |   .btn-box {
764 |     display: flex;
765 |     justify-content: space-between;
766 |     align-items: stretch;
767 |     background-color: #fff;
768 |     border-top: 1px solid #ececec;
769 |     border-bottom: 1px solid #ececec;
770 |   }
771 |   .btn {
772 |     text-decoration: none;
773 |     color: #0575f2;
774 |     padding: .6em;
775 |   }
776 |   .data-box {
777 |     display: flex;
778 |     position: relative;
779 |     .scroll-mask {
780 |       position: absolute;
781 |       left: 0;
782 |       top: 0;
783 |       z-index: 1;
784 |       width: 100%;
785 |       height: 100%;
786 |       background-image: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.6)),
787 |                         linear-gradient(0deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.6));
788 |       background-position: top, bottom;
789 |       background-size: 100% 6em;
790 |       background-repeat: no-repeat;
791 |       pointer-events: none;
792 |     }
793 |     .items {
794 |       flex: 1;
795 |       font-size: 1em;
796 |       height: 14em;
797 |       position: relative;
798 |       overflow: hidden;
799 |     }
800 |     .item {
801 |       height: 2em;
802 |       line-height: 2em;
803 |       text-align: center;
804 |       overflow: hidden;
805 |       white-space: nowrap;
806 |       pointer-events: none;
807 |     }
808 |     .border {
809 |       height: 2em;
810 |       width: 100%;
811 |       border-top: 1px solid darken(@borderColor, 10%);
812 |       border-bottom: 1px solid darken(@borderColor, 10%);
813 |       position: absolute;
814 |       left: 0;
815 |       top: 6em;
816 |       z-index: 2;
817 |       pointer-events: none;
818 |     }
819 |     .scroll {
820 |       position: absolute;
821 |       left: 0;
822 |       top: 0;
823 |       width: 100%;
824 |       padding-top: 6em;
825 |       padding-bottom: 6em;
826 |       margin-top: 0;
827 |       margin-top: 0;
828 |       list-style: none;
829 |       padding-left: 0;
830 |     }
831 |   }
832 | </style>
833 | 


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
 1 | const path = require('path');
 2 | const autoprefixer = require('autoprefixer');
 3 | const VueLoaderPlugin = require('vue-loader/lib/plugin');
 4 | module.exports = (env, argv) =>{
 5 |   const mode = argv.mode === 'production';
 6 |   return {
 7 |     entry: './src/index.js',
 8 |     output: {
 9 |       filename: `vue-ios-pickers${mode ? '.min' : ''}.js`,
10 |       path: path.resolve(__dirname, 'dist')
11 |     },
12 |     module: {
13 |       rules: [
14 |         {
15 |           test: /\.vue$/,
16 |           loader: 'vue-loader',
17 |         }, {
18 |           test: /\.js$/,
19 |           loader: 'babel-loader',
20 |           options: {
21 |             presets: [['env']]
22 |           }
23 |         }, {
24 |           test: /\.less$/,
25 |           use: [
26 |             'vue-style-loader',
27 |             {
28 |               loader: 'css-loader',
29 |               options: {
30 |                 importLoaders: 2
31 |               }
32 |             },
33 |             {
34 |               loader: 'postcss-loader',
35 |               options: {
36 |                 plugins: [
37 |                   autoprefixer({
38 |                     browsers: ['last 3 versions']
39 |                   })
40 |                 ]
41 |               },
42 |             },
43 |             'less-loader'
44 |           ]
45 |         }
46 |       ]
47 |     },
48 |     plugins: [
49 |       new VueLoaderPlugin()
50 |     ]
51 |   }
52 | };
53 | 


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