├── .babelrc
├── .eslintrc.js
├── .gitignore
├── README.md
├── dist
    ├── vue-awesome-picker.js
    └── vue-awesome-picker.js.map
├── index.html
├── manifest.json
├── package-lock.json
├── package.json
├── src
    ├── App.vue
    ├── area.js
    ├── lib
    │   ├── data
    │   │   ├── date.js
    │   │   ├── range.js
    │   │   └── time.js
    │   ├── index.js
    │   └── vue-awesome-picker.vue
    └── main.js
├── static
    └── img
    │   ├── qr-code.png
    │   └── vue-logo.png
├── sw.js
└── webpack.config.js


/.babelrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "presets": [
 3 |     ["env", {
 4 |       "modules": false,
 5 |       "targets": {
 6 |         "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
 7 |       }
 8 |     }],
 9 |     "stage-2"
10 |   ]
11 | }
12 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | // https://eslint.org/docs/user-guide/configuring
 2 | 
 3 | module.exports = {
 4 |   root: true,
 5 |   parserOptions: {
 6 |     parser: 'babel-eslint'
 7 |   },
 8 |   env: {
 9 |     browser: true,
10 |   },
11 |   extends: [
12 |     // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
13 |     // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
14 |     'plugin:vue/essential', 
15 |     // https://github.com/standard/standard/blob/master/docs/RULES-en.md
16 |     'standard'
17 |   ],
18 |   // required to lint *.vue files
19 |   plugins: [
20 |     'vue'
21 |   ],
22 |   // add your custom rules here
23 |   rules: {
24 |     // allow async-await
25 |     'generator-star-spacing': 'off',
26 |     // allow debugger during development
27 |     'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
28 |   }
29 | }
30 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules/
 3 | npm-debug.log
 4 | yarn-error.log
 5 | 
 6 | # Editor directories and files
 7 | .idea
 8 | *.suo
 9 | *.ntvs*
10 | *.njsproj
11 | *.sln
12 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # vue-awesome-picker [![NPM Version][npm-image]][npm-url] [![NPM Downloads][downloads-image]][downloads-url]
  2 | 基于 [Vue.js](https://github.com/vuejs/vue) & [Better-Scroll](https://github.com/ustbhuangyi/better-scroll) 的移动端 picker 组件
  3 | 
  4 | ## Features
  5 | * 支持单列、多列和联级数据
  6 | * 内置时间、日期数据
  7 | * 滚轮 3D 效果
  8 | * 颜色可配置
  9 | 
 10 | ## Demo
 11 | >PS：Demo 已启用 Service Worker
 12 | 
 13 | ![](./static/img/qr-code.png)
 14 | 
 15 | ## Installation
 16 | ``` bash
 17 | npm install vue-awesome-picker --save
 18 | ```
 19 | 
 20 | ## Usage
 21 | ``` javascript
 22 | /* main.js */
 23 | import AwesomePicker from 'vue-awesome-picker';
 24 | Vue.use(AwesomePicker);
 25 | ```
 26 | ``` javascript
 27 | /* 详细使用方法参照源码 App.vue */
 28 | <awesome-picker
 29 |   ref="picker"
 30 |   :data="picker.data"
 31 |   :anchor="picker.anchor"
 32 |   :textTitle="picker.textTitle"
 33 |   :textConfirm="picker.textConfirm"
 34 |   :textCancel="picker.textCancel"
 35 |   :colorTitle="picker.colorTitle"
 36 |   :colorConfirm="picker.colorConfirm"
 37 |   :colorCancel="picker.colorCancel"
 38 |   :swipeTime="picker.swipeTime"
 39 |   @cancel="handlePickerCancel"
 40 |   @confirm="handlePickerConfirm">
 41 | </awesome-picker>
 42 | ```
 43 | ``` javascript
 44 | methods: {
 45 |   show() {
 46 |     this.$refs.picker.show();
 47 |   }
 48 | }
 49 | ```
 50 | 
 51 | ## Props
 52 | 
 53 | | 参数 | 描述 | 可选 | 类型 | 默认
 54 | | ----- | ----- | ----- | ----- | ----- |
 55 | | data | 详细描述见下文 || Array |
 56 | | anchor | 详细描述见下文 || Array |
 57 | | type | 内置 picker 类型<br>无需传入 data | date, time | String |
 58 | | textTitle | title 文案 || String |
 59 | | textConfirm | confirm 文案 || String | 确定
 60 | | textCancel | cancel 文案 || String | 取消
 61 | | colorTitle | title 颜色 || String | #000000
 62 | | colorConfirm | confirm 颜色 || String | #42b983
 63 | | colorCancel | cancel 颜色 || String | #999999
 64 | | swipeTime | 滚动速度([better-scroll swipeTime](https://ustbhuangyi.github.io/better-scroll/doc/zh-hans/options.html#swipetime)) | | Number | 1800
 65 | 
 66 | ### data
 67 | >vue-awesome-picker 通过数据结构不同来区分是普通 picker 还是联级 picker, 所以请严格按照以下数据结构进行配置
 68 | 
 69 | 单列、多列 picker 以双层数组的形式传入 data
 70 | ``` javascript
 71 | [
 72 |   ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's','t', 'u', 'v', 'w', 'x', 'y', 'z'],
 73 |   ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S','T', 'U', 'V', 'W', 'X', 'Y', 'Z']
 74 | ]
 75 | ```
 76 | 
 77 | 联级 picker 通过 children 构造出具有层级关系的数据
 78 | ```javascript
 79 | [
 80 |   {
 81 |     value: 'A',
 82 |     children: [
 83 |       { value: 'A-a' },
 84 |       { value: 'A-b' },
 85 |       { value: 'A-c' }
 86 |     ]
 87 |   },
 88 |   {
 89 |     value: 'B',
 90 |     children: [
 91 |       { value: 'B-a' },
 92 |       { value: 'B-b' }
 93 |     ]
 94 |   },
 95 | ]
 96 | ```
 97 | ### anchor
 98 | >anchor 是 picker 展开时每一列默认滚动的锚点位置或值的数组, 兼容两种数据结构, 未匹配到默认选中第0项
 99 | 
100 | [推荐]数组对象形式: 与事件 confirm 返回的参数数据结构相同, 对象里可以只存在 index 或 value, 当存在 index 时优先匹配 index
101 | ```javascript
102 | [
103 |   { 
104 |     index: 0,
105 |     value: 'A'
106 |   },
107 |   {
108 |     index: 0,
109 |     value: 'A-a'
110 |   } 
111 | ]
112 | ```
113 | 单层数组形式: index 组成的数组
114 | ```javascript
115 | [0, 0]
116 | ```
117 | 
118 | ## Methods
119 | | 方法 | 描述 |
120 | | ----- | ----- |
121 | | show | 展开显示 picker | 
122 | 
123 | ## Events
124 | | 事件 | 描述 | 参数
125 | | ----- | ----- | -----
126 | | confirm | 点击 confirm 按钮后触发 | [{ index: xxx, value: xxx }...] <br> index: 当前选中的 item 在当列的 index <br> value: 当前选中 item 的 value
127 | | cancel | 点击 cancel 按钮后触发 |
128 | 
129 | ## Development
130 | 
131 | ``` bash
132 | git clone git@github.com:Fyerl/vue-awesome-picker.git
133 | cd vue-awesome-picker
134 | npm install
135 | npm run dev
136 | ```
137 | 
138 | [npm-image]: https://img.shields.io/npm/v/vue-awesome-picker.svg?style=flat
139 | [npm-url]: https://npmjs.org/package/vue-awesome-picker
140 | [downloads-image]: https://img.shields.io/npm/dt/vue-awesome-picker.svg?style=flat
141 | [downloads-url]: https://npmjs.org/package/vue-awesome-picker
142 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no,viewport-fit=cover">
 6 |     <link rel="icon" href="./static/img/vue-logo.png" type="image/png">
 7 |     <link rel="manifest" href="manifest.json" />
 8 |     <title>vue-awesome-picker</title>
 9 |   </head>
10 |   <body>
11 |     <div id="app"></div>
12 |     <script>
13 |       navigator.serviceWorker && navigator.serviceWorker.register('./sw.js').then(() => {
14 |         console.log('service worker 注册成功')
15 |       }).catch((e) => {
16 |         console.log(`service worker 存在但注册失败：${e}`)
17 |       });
18 |     </script>
19 |     <script src="./dist/vue-awesome-picker.js"></script>
20 |   </body>
21 | </html>
22 | 


--------------------------------------------------------------------------------
/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-awesome-picker",
 3 |   "short_name": "AwesomePicker",
 4 |   "display": "standalone",
 5 |   "start_url": "./",
 6 |   "theme_color": "#ffffff",
 7 |   "background_color": "#ffffff",
 8 |   "icons": [
 9 |     {
10 |       "src": "./static/img/vue-logo.png",
11 |       "sizes": "256x256",
12 |       "type": "image/png" 
13 |     }
14 |   ]
15 | }


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-awesome-picker",
 3 |   "description": "A Vue.js Picker Component",
 4 |   "version": "1.1.0",
 5 |   "author": "Fyerl <fyerl@foxmail.com>",
 6 |   "license": "MIT",
 7 |   "private": false,
 8 |   "main": "dist/vue-awesome-picker.js",
 9 |   "keywords": [
10 |     "vue",
11 |     "awesome",
12 |     "picker",
13 |     "cascade",
14 |     "components",
15 |     "better-scroll"
16 |   ],
17 |   "scripts": {
18 |     "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot --host 0.0.0.0",
19 |     "build": "cross-env NODE_ENV=production webpack --progress --hide-modules",
20 |     "lint": "eslint --ext .js,.vue src"
21 |   },
22 |   "repository": {
23 |     "type": "git",
24 |     "url": "https://github.com/Fyerl/vue-awesome-picker"
25 |   },
26 |   "dependencies": {
27 |     "better-scroll": "^1.9.0",
28 |     "reset-css": "^2.2.1",
29 |     "vue": "^2.5.11"
30 |   },
31 |   "devDependencies": {
32 |     "babel-core": "^6.26.0",
33 |     "babel-eslint": "^8.2.1",
34 |     "babel-loader": "^7.1.2",
35 |     "babel-preset-env": "^1.6.1",
36 |     "babel-preset-es2015": "^6.24.1",
37 |     "babel-preset-stage-2": "^6.24.1",
38 |     "babel-preset-stage-3": "^6.24.1",
39 |     "cross-env": "^5.0.5",
40 |     "css-loader": "^0.28.7",
41 |     "eslint": "^4.15.0",
42 |     "eslint-config-standard": "^10.2.1",
43 |     "eslint-friendly-formatter": "^3.0.0",
44 |     "eslint-loader": "^1.7.1",
45 |     "eslint-plugin-import": "^2.7.0",
46 |     "eslint-plugin-node": "^5.2.0",
47 |     "eslint-plugin-promise": "^3.4.0",
48 |     "eslint-plugin-standard": "^3.0.1",
49 |     "eslint-plugin-vue": "^4.0.0",
50 |     "file-loader": "^1.1.4",
51 |     "node-sass": "^4.5.3",
52 |     "sass-loader": "^6.0.6",
53 |     "vue-loader": "^13.0.5",
54 |     "vue-template-compiler": "^2.4.4",
55 |     "webpack": "^3.6.0",
56 |     "webpack-dev-server": "^2.9.1"
57 |   }
58 | }
59 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div id="app" class="main-wrapper">
  3 |     <textarea v-model="value"></textarea>
  4 |     <p class="btn" @click="showPicker0">多列</p>
  5 |     <p class="btn" @click="showPicker1">联级</p>
  6 |     <p class="btn" @click="showPicker4">区域</p>
  7 |     <p class="btn" @click="showPicker2">时间(内置)</p>
  8 |     <p class="btn" @click="showPicker3">日期(内置)</p>
  9 |     <awesome-picker
 10 |       ref="picker0"
 11 |       :textTitle="picker0.textTitle"
 12 |       :data="picker0.data"
 13 |       :anchor="picker0.anchor"
 14 |       @confirm="handlePicker0Confirm">
 15 |     </awesome-picker>
 16 | 
 17 |     <awesome-picker
 18 |       ref="picker1"
 19 |       :textTitle="picker1.textTitle"
 20 |       :data="picker1.data"
 21 |       :anchor="picker1.anchor"
 22 |       @confirm="handlePicker1Confirm">
 23 |     </awesome-picker>
 24 | 
 25 |     <awesome-picker
 26 |       ref="picker2"
 27 |       :textTitle="picker2.textTitle"
 28 |       :type="picker2.type"
 29 |       :anchor="picker2.anchor"
 30 |       @confirm="handlePicker2Confirm">
 31 |     </awesome-picker>
 32 | 
 33 |     <awesome-picker
 34 |       ref="picker3"
 35 |       :textTitle="picker3.textTitle"
 36 |       :type="picker3.type"
 37 |       :anchor="picker3.anchor"
 38 |       @confirm="handlePicker3Confirm">
 39 |     </awesome-picker>
 40 | 
 41 |     <awesome-picker
 42 |       ref="picker4"
 43 |       :textTitle="picker4.textTitle"
 44 |       :data="picker4.data"
 45 |       :anchor="picker4.anchor"
 46 |       @confirm="handlePicker4Confirm">
 47 |     </awesome-picker>
 48 |   </div>
 49 | </template>
 50 | 
 51 | <script>
 52 | import areaData from './area.js'
 53 | 
 54 | const data1 = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z']
 55 | const data2 = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']
 56 | 
 57 | export default {
 58 |   name: 'app',
 59 |   data () {
 60 |     return {
 61 |       value: null,
 62 |       picker0: {
 63 |         anchor: [],
 64 |         textTitle: '多列选择器',
 65 |         data: [data1, data2]
 66 |       },
 67 |       picker1: {
 68 |         anchor: [],
 69 |         textTitle: '联级选择器',
 70 |         data: [
 71 |           {
 72 |             value: 'A',
 73 |             children: [
 74 |               { value: 'A-a' },
 75 |               { value: 'A-b' },
 76 |               { value: 'A-c' }
 77 |             ]
 78 |           },
 79 |           {
 80 |             value: 'B',
 81 |             children: [
 82 |               { value: 'B-a' },
 83 |               { value: 'B-b' }
 84 |             ]
 85 |           },
 86 |           {
 87 |             value: 'C',
 88 |             children: [
 89 |               { value: 'C-a' },
 90 |               { value: 'C-b' },
 91 |               { value: 'C-c' },
 92 |               { value: 'C-d' }
 93 |             ]
 94 |           },
 95 |           {
 96 |             value: 'D',
 97 |             children: [
 98 |               { value: 'D-a' }
 99 |             ]
100 |           }
101 |         ]
102 |       },
103 |       picker2: {
104 |         anchor: [],
105 |         textTitle: '时间选择器(内置)',
106 |         type: 'time'
107 |       },
108 |       picker3: {
109 |         anchor: [],
110 |         textTitle: '日期选择器(内置)',
111 |         type: 'date'
112 |       },
113 |       picker4: {
114 |         anchor: [],
115 |         textTitle: '区域选择器',
116 |         data: areaData
117 |       }
118 |     }
119 |   },
120 |   methods: {
121 |     showPicker0 () {
122 |       this.$refs.picker0.show()
123 |     },
124 |     handlePicker0Confirm (v) {
125 |       this.picker0.anchor = v
126 |       this.value = v ? JSON.stringify(v) : null
127 |     },
128 | 
129 |     showPicker1 () {
130 |       this.$refs.picker1.show()
131 |     },
132 |     handlePicker1Confirm (v) {
133 |       this.picker1.anchor = v
134 |       this.value = v ? JSON.stringify(v) : null
135 |     },
136 | 
137 |     showPicker2 () {
138 |       this.$refs.picker2.show()
139 |     },
140 |     handlePicker2Confirm (v) {
141 |       this.picker2.anchor = v
142 |       this.value = v ? JSON.stringify(v) : null
143 |     },
144 | 
145 |     showPicker3 () {
146 |       this.$refs.picker3.show()
147 |     },
148 |     handlePicker3Confirm (v) {
149 |       this.picker3.anchor = v
150 |       this.value = v ? JSON.stringify(v) : null
151 |     },
152 | 
153 |     showPicker4 () {
154 |       this.$refs.picker4.show()
155 |     },
156 |     handlePicker4Confirm (v) {
157 |       this.picker4.anchor = v
158 |       this.value = v ? JSON.stringify(v) : null
159 |     }
160 |   }
161 | }
162 | </script>
163 | 
164 | <style lang="scss">
165 |   .main-wrapper {
166 |     padding: 12px;
167 |   }
168 | 
169 |   textarea {
170 |     height: 88px;
171 |     width: 100%;
172 |     margin-bottom: 12px;
173 |     padding: 12px;
174 |     border: 2px solid #35495d;
175 |     border-radius: 4px;
176 |     box-sizing: border-box;
177 |     outline: none;
178 |     color: #35495d;
179 |     font-size: 14px;
180 |     resize: none;
181 |   }
182 | 
183 |   .btn {
184 |     width: 100%;
185 |     height: 44px;
186 |     margin-bottom: 12px;
187 |     line-height: 44px;
188 |     text-align: center;
189 |     color: #fff;
190 |     background: #42b983;
191 |   }
192 | </style>
193 | 


--------------------------------------------------------------------------------
/src/lib/data/date.js:
--------------------------------------------------------------------------------
 1 | import range from './range'
 2 | 
 3 | const START_YEAR = 1900
 4 | const END_YEAR = 2100
 5 | 
 6 | const UNIT_YEAR = '年'
 7 | const UNIT_MONTH = '月'
 8 | const UNIT_DAY = '日'
 9 | 
10 | function isLeapYear (y) {
11 |   return (y % 4 === 0) && (y % 100 !== 0 || y % 400 === 0)
12 | };
13 | 
14 | function getDays (y, m) {
15 |   y = Number(y)
16 |   m = Number(m)
17 |   let endDay = null
18 |   switch (m) {
19 |     case 2:
20 |       endDay = isLeapYear(y) ? 29 : 28; break
21 |     case 1:
22 |     case 3:
23 |     case 5:
24 |     case 7:
25 |     case 8:
26 |     case 10:
27 |     case 12:
28 |       endDay = 31; break
29 |     case 4:
30 |     case 6:
31 |     case 9:
32 |     case 11:
33 |     default:
34 |       endDay = 30; break
35 |   }
36 |   const days = range(1, endDay, false, UNIT_DAY)
37 |   return days.map((day) => {
38 |     return { value: day }
39 |   })
40 | };
41 | 
42 | const yearData = range(START_YEAR, END_YEAR, false, UNIT_YEAR)
43 | const monthData = range(1, 12, false, UNIT_MONTH)
44 | 
45 | const cascadeMonthData = monthData.map((month) => {
46 |   return {
47 |     value: month,
48 |     children: []
49 |   }
50 | })
51 | 
52 | const dateData = yearData.map((year) => {
53 |   const item = {
54 |     value: year,
55 |     children: cascadeMonthData.slice()
56 |   }
57 |   item.children.forEach((month) => {
58 |     month.children = getDays(year.slice(0, -1), month.value.slice(0, -1))
59 |   })
60 |   return item
61 | })
62 | 
63 | const date = new Date()
64 | const dateAnchor = [
65 |   { value: `${date.getFullYear()}${UNIT_YEAR}` },
66 |   { value: `${date.getMonth() + 1}${UNIT_MONTH}` },
67 |   { value: `${date.getDate()}${UNIT_DAY}` }
68 | ]
69 | 
70 | export {
71 |   dateAnchor,
72 |   dateData
73 | }
74 | 


--------------------------------------------------------------------------------
/src/lib/data/range.js:
--------------------------------------------------------------------------------
1 | export default function (n, m, polyfill = false, unit = '') {
2 |   let arr = []
3 |   for (let i = n; i <= m; i++) {
4 |     let value = (polyfill && i < 10 ? '0' + i : i) + unit
5 |     arr.push(value)
6 |   }
7 |   return arr
8 | }
9 | 


--------------------------------------------------------------------------------
/src/lib/data/time.js:
--------------------------------------------------------------------------------
1 | import range from './range'
2 | 
3 | export default [range(0, 23, true, '点'), range(0, 59, true, '分'), range(0, 59, true, '秒')]
4 | 


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


--------------------------------------------------------------------------------
/src/lib/vue-awesome-picker.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <transition name="fade">
  4 |       <div class="mask" v-show="display" @click="hide"></div>
  5 |     </transition>
  6 |     <transition name="slide">
  7 |       <div class="picker" v-show="display">
  8 |       <div class="picker-title">
  9 |         <span class="pt-cancel" @click="cancel" :style="{ color: colorCancel }">{{textCancel}}</span>
 10 |         <span class="pt-submit" @click="confirm" :style="{ color: colorConfirm }">{{textConfirm}}</span>
 11 |         <h4 :style="{ color: colorTitle }">{{textTitle}}</h4>
 12 |       </div>
 13 |       <div class="picker-panel">
 14 |         <div class="picker-mask-top"></div>
 15 |         <div class="picker-mask-bottom"></div>
 16 |         <div class="picker-wheel-wrapper" ref="wheelWrapper">
 17 |           <div class="picker-wheel" v-for="(wheel, index) in pickerData" :key="index">
 18 |             <ul class="wheel-scroll">
 19 |               <li class="wheel-item" v-for="(item, index) in wheel" :key="index">{{item}}</li>
 20 |             </ul>
 21 |           </div>
 22 |         </div>
 23 |       </div>
 24 |     </div>
 25 |     </transition>
 26 |   </div>
 27 | </template>
 28 | 
 29 | <script>
 30 | import BScroll from 'better-scroll'
 31 | import timeData from './data/time.js'
 32 | import { dateData, dateAnchor } from './data/date.js'
 33 | 
 34 | const DATA_NORMAL = 'normal'
 35 | const DATA_CASCADE = 'cascade'
 36 | 
 37 | const TYPE_NORMAL = 'normal'
 38 | const TYPE_TIME = 'time'
 39 | const TYPE_DATE = 'date'
 40 | 
 41 | const TEXT_TITLE = ''
 42 | const TEXT_CONFIRM = '确定'
 43 | const TEXT_CANCEL = '取消'
 44 | 
 45 | const COLOR_TITLE = '#000000'
 46 | const COLOR_CONFIRM = '#42b983'
 47 | const COLOR_CANCEL = '#999999'
 48 | 
 49 | const EVENT_CONFIRM = 'confirm'
 50 | const EVENT_CANCEL = 'cancel'
 51 | 
 52 | export default {
 53 |   name: 'awesome-picker',
 54 |   props: {
 55 |     data: {
 56 |       type: Array,
 57 |       default () {
 58 |         return []
 59 |       }
 60 |     },
 61 |     anchor: {
 62 |       type: Array,
 63 |       default () {
 64 |         return []
 65 |       }
 66 |     },
 67 |     type: {
 68 |       type: String,
 69 |       default: TYPE_NORMAL
 70 |     },
 71 |     textTitle: {
 72 |       type: String,
 73 |       default: TEXT_TITLE
 74 |     },
 75 |     textConfirm: {
 76 |       type: String,
 77 |       default: TEXT_CONFIRM
 78 |     },
 79 |     textCancel: {
 80 |       type: String,
 81 |       default: TEXT_CANCEL
 82 |     },
 83 |     colorTitle: {
 84 |       type: String,
 85 |       default: COLOR_TITLE
 86 |     },
 87 |     colorConfirm: {
 88 |       type: String,
 89 |       default: COLOR_CONFIRM
 90 |     },
 91 |     colorCancel: {
 92 |       type: String,
 93 |       default: COLOR_CANCEL
 94 |     },
 95 |     swipeTime: {
 96 |       type: Number,
 97 |       default: 1800
 98 |     }
 99 |   },
100 |   data () {
101 |     return {
102 |       display: false,
103 |       dataChange: false,
104 |       pickerData: this._dataGetter(),
105 |       pickerAnchor: this._anchorGetter(),
106 |       wheels: []
107 |     }
108 |   },
109 |   watch: {
110 |     data () {
111 |       this._setPickerData()
112 |     }
113 |   },
114 |   computed: {
115 |     proxyData () {
116 |       return this._dataGetter()
117 |     },
118 |     proxyAnchor () {
119 |       return this._anchorGetter()
120 |     },
121 |     dataType () {
122 |       return !Array.isArray(this.proxyData[0]) ? DATA_CASCADE : DATA_NORMAL
123 |     }
124 |   },
125 |   methods: {
126 |     _dataGetter () {
127 |       let data = null
128 |       switch (this.type) {
129 |         case TYPE_TIME:
130 |           data = timeData; break
131 |         case TYPE_DATE:
132 |           data = dateData; break
133 |         case TYPE_NORMAL:
134 |         default:
135 |           data = this.data; break
136 |       }
137 |       return [...data]
138 |     },
139 | 
140 |     _anchorGetter () {
141 |       let anchor = []
142 |       if (this.anchor.length) {
143 |         anchor = this.anchor
144 |       } else {
145 |         switch (this.type) {
146 |           case TYPE_DATE:
147 |             anchor = dateAnchor; break
148 |           default:
149 |             anchor = this.anchor; break
150 |         }
151 |       }
152 | 
153 |       anchor = anchor.map((item, i) => {
154 |         let index = 0
155 |         if (item.index) {
156 |           index = item.index
157 |         } else if (item.value) {
158 |           index = this.pickerData && this.pickerData[i] && this.pickerData[i].indexOf(item.value) > -1
159 |             ? this.pickerData[i].indexOf(item.value) : 0
160 |         } else {
161 |           index = item
162 |         }
163 |         return index
164 |       })
165 |       return [...anchor]
166 |     },
167 | 
168 |     show () {
169 |       this.display = true
170 |       if (!this.wheels.length || this.dataChange) {
171 |         this.dataType === DATA_CASCADE && this._updatePickerData()
172 |         this.$nextTick(() => {
173 |           const wheelWrapper = this.$refs.wheelWrapper
174 |           this.pickerData.forEach((item, index) => {
175 |             this._createWheel(wheelWrapper, index).enable()
176 |           })
177 |           this._wheelToAnchor(this.proxyAnchor)
178 | 
179 |           this.dataChange && this._destroyExtraWheels()
180 |           this.dataChange = false
181 |         })
182 |       } else {
183 |         this.wheels.forEach((wheel) => {
184 |           wheel.enable()
185 |         })
186 |       }
187 |     },
188 | 
189 |     hide () {
190 |       this.wheels.forEach((wheel) => {
191 |         wheel.disable()
192 |       })
193 |       this.display = false
194 |     },
195 | 
196 |     _createWheel (wheelWrapper, i) {
197 |       if (!this.wheels[i]) {
198 |         const wheel = this.wheels[i] = new BScroll(wheelWrapper.children[i], {
199 |           wheel: {
200 |             selectedIndex: 0,
201 |             rotate: 25
202 |           },
203 |           swipeTime: this.swipeTime
204 |         })
205 |         wheel.on('scrollEnd', () => {
206 |           this._cascadePickerChange(i)
207 |         })
208 |       } else {
209 |         this.wheels[i].refresh()
210 |       }
211 |       return this.wheels[i]
212 |     },
213 | 
214 |     _cascadePickerChange (i) {
215 |       if (this.dataType !== DATA_CASCADE) {
216 |         return
217 |       }
218 |       const newIndex = this._getCurrentValue()[i].index
219 |       if (newIndex !== this.pickerAnchor[i]) {
220 |         this.pickerAnchor.splice(i, 1, newIndex)
221 |         this._updatePickerData(i + 1)
222 |       }
223 |     },
224 | 
225 |     _wheelToAnchor (data) {
226 |       this.wheels.forEach((wheel, i) => {
227 |         wheel.wheelTo(data[i] || 0)
228 |       })
229 |     },
230 | 
231 |     _getCurrentValue () {
232 |       const value = []
233 |       this.wheels.forEach((wheel, i) => {
234 |         const j = wheel.getSelectedIndex()
235 |         value.push({
236 |           index: j,
237 |           value: this.pickerData[i][j]
238 |         })
239 |       })
240 |       return value
241 |     },
242 | 
243 |     _setPickerData () {
244 |       this.pickerData = this._dataGetter()
245 |       this.pickerAnchor = this._anchorGetter()
246 |       if (this.display) {
247 |         this.$nextTick(() => {
248 |           const wheelWrapper = this.$refs.wheelWrapper
249 |           this.pickerData.forEach((item, i) => {
250 |             this._createWheel(wheelWrapper, i)
251 |           })
252 |           this._wheelToAnchor(this.proxyAnchor)
253 |           this._destroyExtraWheels()
254 |         })
255 |       } else {
256 |         this.dataChange = true
257 |       }
258 |     },
259 | 
260 |     _destroyExtraWheels () {
261 |       const dataLength = this.pickerData.length
262 |       if (dataLength < this.wheels.length) {
263 |         const extraWheels = this.wheels.splice(dataLength)
264 |         extraWheels.forEach((wheel) => {
265 |           wheel.destroy()
266 |         })
267 |       }
268 |     },
269 | 
270 |     _updatePickerData (wheelIndex = 0) {
271 |       let data = [...this.proxyData]
272 |       let i = 0
273 |       while (data) {
274 |         if (i >= wheelIndex) {
275 |           let wheelData = []
276 |           data.forEach((item) => {
277 |             wheelData.push(item.value)
278 |           })
279 |           this.pickerData[i] = wheelData
280 |           this.pickerAnchor[i] = wheelIndex === 0
281 |             ? (this.pickerAnchor[i] < data.length ? this.pickerAnchor[i] || 0 : 0)
282 |             : this._reloadWheel(i, wheelData)
283 |         }
284 |         data = data.length ? data[this.pickerAnchor[i]].children : null
285 |         i++
286 |       }
287 |       this.pickerData = this.pickerData.slice(0, i)
288 |     },
289 | 
290 |     _reloadWheel (index, data) {
291 |       const wheelWrapper = this.$refs.wheelWrapper
292 |       let scroll = wheelWrapper.children[index].querySelector('.wheel-scroll')
293 |       let wheel = this.wheels ? this.wheels[index] : false
294 |       let dist = 0
295 |       if (scroll && wheel) {
296 |         this.$set(this.pickerData, index, data)
297 |         this.pickerAnchor[index] = dist
298 |         this.$nextTick(() => {
299 |           wheel = this._createWheel(wheelWrapper, index)
300 |           wheel.wheelTo(dist)
301 |         })
302 |       }
303 |       return dist
304 |     },
305 | 
306 |     confirm () {
307 |       const isInTransition = this.wheels.some((wheel) => {
308 |         return wheel.isInTransition
309 |       })
310 |       if (isInTransition) {
311 |         return
312 |       }
313 |       const selectedValues = this._getCurrentValue()
314 |       this.$emit(EVENT_CONFIRM, selectedValues)
315 |       this.hide()
316 |     },
317 | 
318 |     cancel () {
319 |       this.$emit(EVENT_CANCEL)
320 |       this.hide()
321 |     }
322 |   }
323 | }
324 | </script>
325 | 
326 | <style lang="scss" scoped>
327 |   /* fade */
328 |   .fade-enter, .fade-leave-to {
329 |     opacity: 0;
330 |   }
331 | 
332 |   .fade-enter-active, .fade-leave-active {
333 |     transition: all .3s ease;
334 |   }
335 | 
336 |   /* slide */
337 |   .slide-enter, .slide-leave-to {
338 |     opacity: 0.5;
339 |     transform: translate3d(0, 270px, 0)
340 |   }
341 | 
342 |   .slide-enter-active, .slide-leave-active {
343 |     transition: all .3s ease;
344 |   }
345 | 
346 |   .mask {
347 |     position: fixed;
348 |     top: 0;
349 |     right: 0;
350 |     bottom: 0;
351 |     left: 0;
352 |     z-index: 9999;
353 |     background: rgba(0,0,0,.2);
354 |   }
355 | 
356 |   .picker {
357 |     position: fixed;
358 |     left: 0;
359 |     right: 0;
360 |     bottom: 0;
361 |     height: 270px;
362 |     z-index: 10000;
363 |     background: #fff;
364 |   }
365 | 
366 |   .picker-title {
367 |     position: relative;
368 |     height: 44px;
369 |     color: #333;
370 | 
371 |     &:after {
372 |       content: '';
373 |       display: block;
374 |       border-bottom: 1px solid #ebebeb;
375 |       left: 0;
376 |       right: 0;
377 |       transform: scaleY(.5);
378 |     }
379 | 
380 |     span {
381 |       position: absolute;
382 |       height: 44px;
383 |       line-height: 44px;
384 |       padding: 0 12px;
385 |       font-size: 14px;
386 |     }
387 | 
388 |     .pt-cancel {
389 |       left: 0;
390 |       color: #999;
391 |     }
392 | 
393 |     .pt-submit {
394 |       right: 0;
395 |       color: #42b983;
396 |     }
397 | 
398 |     h4 {
399 |       margin: 0;
400 |       font-size: 16px;
401 |       font-weight: normal;
402 |       height: 44px;
403 |       line-height: 44px;
404 |       text-align: center;
405 |     }
406 |   }
407 | 
408 |   .picker-panel {
409 |     position: relative;
410 |     height: 226px;
411 |     padding: 24px 12px;
412 |     box-sizing: border-box;
413 | 
414 |     .picker-mask-top, .picker-mask-bottom {
415 |       position: absolute;
416 |       left: 0;
417 |       right: 0;
418 |       height: 72px;
419 |       background: #fff;
420 |       transform: translateZ(0);
421 |       z-index: 1;
422 |       pointer-events: none;
423 |     }
424 | 
425 |     .picker-mask-top {
426 |       top: 24px;
427 |       background: linear-gradient(to bottom, rgba(255,255,255,.9), rgba(255,255,255,.5));
428 | 
429 |       &:after {
430 |         content: '';
431 |         display: block;
432 |         position: absolute;
433 |         left: 0;
434 |         right: 0;
435 |         bottom: 0;
436 |         border-bottom: 1px solid #ebebeb;
437 |         transform: scaleY(.5);
438 |       }
439 |     }
440 | 
441 |     .picker-mask-bottom {
442 |       bottom: 24px;
443 |       background: linear-gradient(to top, rgba(255,255,255,.9), rgba(255,255,255,.5));
444 | 
445 |       &:before {
446 |         content: '';
447 |         display: block;
448 |         position: absolute;
449 |         left: 0;
450 |         right: 0;
451 |         top: 0;
452 |         border-bottom: 1px solid #ebebeb;
453 |         transform: scaleY(.5);
454 |       }
455 |     }
456 |   }
457 | 
458 |   .picker-wheel-wrapper {
459 |     display: flex;
460 |     align-items: stretch;
461 |     height: 100%;
462 | 
463 |     .picker-wheel {
464 |       flex: 1;
465 |       overflow: hidden;
466 |     }
467 | 
468 |     .wheel-scroll {
469 |       margin-top: 72px;
470 | 
471 |       .wheel-item {
472 |         height: 34px;
473 |         line-height: 34px;
474 |         font-size: 17px;
475 |         text-align: center;
476 |         overflow: hidden;
477 |         text-overflow: ellipsis;
478 |         white-space: nowrap;
479 |         color: #333;
480 |       }
481 |     }
482 |   }
483 | </style>
484 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | /* eslint-disable */
 2 | import Vue from 'vue'
 3 | import App from './App.vue'
 4 | import AwesomePicker from './lib/index.js'
 5 | import 'reset-css'
 6 | 
 7 | Vue.use(AwesomePicker)
 8 | new Vue({
 9 |   el: '#app',
10 |   render: h => h(App)
11 | })
12 | 


--------------------------------------------------------------------------------
/static/img/qr-code.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Fyerl/vue-awesome-picker/ae463ff1231d8ca10414a96ead4f2cc9fd2ea698/static/img/qr-code.png


--------------------------------------------------------------------------------
/static/img/vue-logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Fyerl/vue-awesome-picker/ae463ff1231d8ca10414a96ead4f2cc9fd2ea698/static/img/vue-logo.png


--------------------------------------------------------------------------------
/sw.js:
--------------------------------------------------------------------------------
 1 | const CACHE_NAME = 'vap-cache-7'
 2 | const cacheUrls = [
 3 |   './',
 4 |   './dist/vue-awesome-picker.js',
 5 |   './static/img/vue-logo.png'
 6 | ]
 7 | 
 8 | self.addEventListener('install', (event) => {
 9 |   event.waitUntil( // 确保在缓存之后完成 install
10 |     caches.open(CACHE_NAME).then(cache => cache.addAll(cacheUrls))
11 |   )
12 | })
13 | 
14 | self.addEventListener('fetch', (event) => {
15 |   event.respondWith(
16 |     caches.match(event.request).then((response) => {
17 |       return response || fetch(event.request)
18 |     })
19 |   )
20 | })
21 | 
22 | self.addEventListener('activate', (event) => {
23 |   event.waitUntil(
24 |     caches.keys().then((cacheKeys) => {
25 |       return Promise.all(
26 |         cacheKeys.map((cacheKey) => {
27 |           if (cacheKey !== CACHE_NAME) {
28 |             return caches.delete(cacheKey)
29 |           }
30 |         })
31 |       )
32 |     })
33 |   )
34 | })


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
  1 | var path = require('path')
  2 | var webpack = require('webpack')
  3 | 
  4 | module.exports = {
  5 |   entry: './src/main.js', // dev
  6 |   // entry: './src/lib/index.js', // npm
  7 |   output: {
  8 |     path: path.resolve(__dirname, './dist'),
  9 |     publicPath: 'dist/',
 10 |     filename: 'vue-awesome-picker.js',
 11 |     library: 'VueAwesomePicker',
 12 |     libraryTarget: 'umd',
 13 |     umdNamedDefine: true
 14 |   },
 15 |   module: {
 16 |     rules: [
 17 |       {
 18 |         test: /\.css$/,
 19 |         use: [
 20 |           'vue-style-loader',
 21 |           'css-loader'
 22 |         ],
 23 |       },
 24 |       {
 25 |         test: /\.scss$/,
 26 |         use: [
 27 |           'vue-style-loader',
 28 |           'css-loader',
 29 |           'sass-loader'
 30 |         ],
 31 |       },
 32 |       {
 33 |         test: /\.sass$/,
 34 |         use: [
 35 |           'vue-style-loader',
 36 |           'css-loader',
 37 |           'sass-loader?indentedSyntax'
 38 |         ],
 39 |       },
 40 |       {
 41 |         test: /\.vue$/,
 42 |         loader: 'vue-loader',
 43 |         options: {
 44 |           loaders: {
 45 |             // Since sass-loader (weirdly) has SCSS as its default parse mode, we map
 46 |             // the "scss" and "sass" values for the lang attribute to the right configs here.
 47 |             // other preprocessors should work out of the box, no loader config like this necessary.
 48 |             'scss': [
 49 |               'vue-style-loader',
 50 |               'css-loader',
 51 |               'sass-loader'
 52 |             ],
 53 |             'sass': [
 54 |               'vue-style-loader',
 55 |               'css-loader',
 56 |               'sass-loader?indentedSyntax'
 57 |             ]
 58 |           }
 59 |           // other vue-loader options go here
 60 |         }
 61 |       },
 62 |       {
 63 |         test: /\.js$/,
 64 |         loader: 'babel-loader',
 65 |         exclude: /node_modules/
 66 |       },
 67 |       {
 68 |         test: /\.(png|jpg|gif|svg)$/,
 69 |         loader: 'file-loader',
 70 |         options: {
 71 |           name: '[name].[ext]?[hash]'
 72 |         }
 73 |       }
 74 |     ]
 75 |   },
 76 |   resolve: {
 77 |     alias: {
 78 |       'vue$': 'vue/dist/vue.esm.js'
 79 |     },
 80 |     extensions: ['*', '.js', '.vue', '.json']
 81 |   },
 82 |   devServer: {
 83 |     historyApiFallback: true,
 84 |     noInfo: true,
 85 |     overlay: true
 86 |   },
 87 |   performance: {
 88 |     hints: false
 89 |   },
 90 |   devtool: '#eval-source-map'
 91 | }
 92 | 
 93 | if (process.env.NODE_ENV === 'production') {
 94 |   module.exports.devtool = '#source-map'
 95 |   // http://vue-loader.vuejs.org/en/workflow/production.html
 96 |   module.exports.plugins = (module.exports.plugins || []).concat([
 97 |     new webpack.DefinePlugin({
 98 |       'process.env': {
 99 |         NODE_ENV: '"production"'
100 |       }
101 |     }),
102 |     new webpack.optimize.UglifyJsPlugin({
103 |       sourceMap: true,
104 |       compress: {
105 |         warnings: false
106 |       }
107 |     }),
108 |     new webpack.LoaderOptionsPlugin({
109 |       minimize: true
110 |     })
111 |   ])
112 | }
113 | 


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