├── .babelrc
├── .circleci
└── config.yml
├── .editorconfig
├── .eslintignore
├── .eslintrc.js
├── .github
└── ISSUE_TEMPLATE
│ └── bug_report.md
├── .gitignore
├── .postcssrc.js
├── .prettierrc
├── LICENSE
├── README.md
├── README_1.x.x.md
├── build
├── build.js
├── check-versions.js
├── dev-client.js
├── dev-server.js
├── utils.js
├── vue-loader.conf.js
├── webpack.base.conf.js
├── webpack.dev.conf.js
└── webpack.prod.conf.js
├── config
├── dev.env.js
├── index.js
└── prod.env.js
├── index.html
├── package.json
├── project.config.json
├── release.sh
├── src
├── App.vue
├── app.json
├── main.js
├── mpvue-picker
│ └── mpvuePicker.vue
├── pages
│ ├── demo
│ │ ├── index.vue
│ │ └── main.js
│ ├── img
│ │ ├── picker01.gif
│ │ ├── picker02.gif
│ │ ├── picker03.gif
│ │ └── picker04.gif
│ ├── mpvue-city-picker
│ │ ├── data.js
│ │ ├── index.vue
│ │ └── main.js
│ └── test
│ │ ├── index.vue
│ │ └── main.js
└── utils
│ └── index.js
├── static
└── .gitkeep
└── yarn.lock
/.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 | "plugins": ["transform-runtime"],
12 | "env": {
13 | "test": {
14 | "presets": ["env", "stage-2"],
15 | "plugins": ["istanbul"]
16 | }
17 | }
18 | }
19 |
--------------------------------------------------------------------------------
/.circleci/config.yml:
--------------------------------------------------------------------------------
1 | # iOS CircleCI 2.0 configuration file
2 | #
3 | # Check https://circleci.com/docs/2.0/ios-migrating-from-1-2/ for more details
4 | #
5 | version: 2
6 | jobs:
7 | build:
8 |
9 | # Specify the Xcode version to use
10 | macos:
11 | xcode: "8.3.3"
12 |
13 | steps:
14 | - checkout
15 |
16 | # Install CocoaPods
17 | - run:
18 | name: Install CocoaPods
19 | command: pod install
20 |
21 | # Build the app and run tests
22 | - run:
23 | name: Build and run tests
24 | command: fastlane scan
25 | environment:
26 | SCAN_DEVICE: iPhone 6
27 | SCAN_SCHEME: WebTests
28 |
29 | # Collect XML test results data to show in the UI,
30 | # and save the same XML files under test-results folder
31 | # in the Artifacts tab
32 | - store_test_results:
33 | path: test_output/report.xml
34 | - store_artifacts:
35 | path: /tmp/test-results
36 | destination: scan-test-results
37 | - store_artifacts:
38 | path: ~/Library/Logs/scan
39 | destination: scan-logs
40 |
41 |
--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
1 | root = true
2 |
3 | [*]
4 | charset = utf-8
5 | indent_style = space
6 | indent_size = 2
7 | end_of_line = lf
8 | insert_final_newline = true
9 | trim_trailing_whitespace = true
10 | max_line_length = off
11 |
--------------------------------------------------------------------------------
/.eslintignore:
--------------------------------------------------------------------------------
1 | build/*.js
2 | config/*.js
3 |
--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
1 | // http://eslint.org/docs/user-guide/configuring
2 |
3 | module.exports = {
4 | root: true,
5 | parser: 'babel-eslint',
6 | parserOptions: {
7 | sourceType: 'module'
8 | },
9 | env: {
10 | browser: false,
11 | node: true,
12 | es6: true
13 | },
14 | // https://github.com/standard/standard/blob/master/docs/RULES-en.md
15 | extends: 'standard',
16 | // required to lint *.vue files
17 | plugins: ['html'],
18 | // add your custom rules here
19 | rules: {
20 | // allow async-await
21 | 'generator-star-spacing': 'off',
22 | // allow debugger during development
23 | 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
24 | semi: ['error', 'always'],
25 | 'func-call-spacing': 'off',
26 | 'space-before-function-paren': 'off',
27 | 'semi':'off'
28 | },
29 | globals: {
30 | App: true,
31 | Page: true,
32 | wx: true,
33 | getApp: true,
34 | getPage: true
35 | }
36 | };
37 |
--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/bug_report.md:
--------------------------------------------------------------------------------
1 | ---
2 | name: Bug report
3 | about: 创建一个错误报告
4 | title: ''
5 | labels: ''
6 | assignees: ''
7 |
8 | ---
9 |
10 | **问题描述**
11 |
12 | [问题描述:站在其它人的角度尽可能清晰地、简洁地把问题描述清楚].
13 |
14 | **复现步骤**
15 |
16 | [复现问题的步骤]
17 |
18 | 1. Go to '...'
19 | 2. Click on '....'
20 | 3. Scroll down to '....'
21 | 4. See error
22 |
23 | 代码请写成 markdown 的形式，不要贴截图
24 |
25 | ``` vue
26 | // some code ...
27 | ```
28 |
29 | **期望行为**
30 |
31 | [这里请用简洁清晰的语言描述你期望的行为]
32 |
33 | **报错信息**
34 |
35 | [这里请贴上你的完整报错截图或文字]
36 |
37 | **系统信息**
38 | * mpvue-picker 版本号：[eg. 2.1.5]
39 | * mpvue 版本号：[eg. 1.4.6]
40 | * 运行平台：[eg. 微信开发者工具 ios Android 浏览器(uni-app)]
41 |
42 |
43 | **补充信息**
44 |
45 | [可选]
46 | [根据你的调查研究，出现这个问题的原因可能在哪里？]
47 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules/
3 | dist/
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 |
8 | # Editor directories and files
9 | .idea
10 | *.suo
11 | *.ntvs*
12 | *.njsproj
13 | *.sln
14 |
--------------------------------------------------------------------------------
/.postcssrc.js:
--------------------------------------------------------------------------------
1 | // https://github.com/michael-ciniawsky/postcss-load-config
2 |
3 | module.exports = {
4 | "plugins": {
5 | "postcss-mpvue-wxss": {}
6 | }
7 | }
8 |
--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 | "semi": true,
3 | "singleQuote": true,
4 | "printWidth": 300
5 | }
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2018-present, KuangPF
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
13 | all 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
21 | THE SOFTWARE.
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # mpvue-picker
2 |
3 | > 基于 mpvue 框架的小程序选择控件
4 |
5 | > 支持单列、多列以及级联
6 |
7 | > 目前版本为 2.0，1.0 使用请[点击](./README_1.x.x.md)
8 |
9 | > citypicker 已支持，详情点击 [mpvue-citypicker](https://github.com/MPComponent/mpvue-citypicker)
10 |
11 |
12 | 
13 | 
14 | [](http://makeapullrequest.com)
15 | 
16 |
17 | ## 前言
18 | 在 [mpvue](https://github.com/Meituan-Dianping/mpvue)开源之初写了 [用 vue 写小程序，基于 mpvue 框架重写 weui](https://github.com/KuangPF/mpvue-weui)。当时用的是小程序的原生组件，没有对其进行封装和组件化。而对于现在的前端开发环境，`组件化`，`模块化`，`工程化`以及`自动化`已经是一种标配。而`mpvue`框架又提供了一个很好的组件化开发平台，因此就对小程序中的 `picker` 组件进行封装，使其在用`mpvue`开发的时候能够用快速的实现 `picker`的功能。
19 |
20 | :warning:[`uni-app` 插件市场的 `mpvue-picker`](https://ext.dcloud.net.cn/search?q=mpvue-picker) 不是本人在维护，如果要在 `uni-app` 中使用的话推荐通过 `npm` 包的方式引入。
21 |
22 | ## 为什么封装 `picker` 组件
23 |
24 | * 其实小程序提供了原生的 `picker` 组件，但是在开发的时候会发现在 android 手机上看到的 `picker`效果与`微信开发者工具`预览的效果不一样，其实就是丑了一点点...
25 |
26 | * 在小程序中使用 `picker` 的地方很多，很常见。
27 |
28 | ## 使用
29 |
30 | * 安装
31 | ``` bash
32 | npm install mpvue-picker --save
33 | ```
34 |
35 | * 在页面中使用
36 | ``` javascript
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
90 |
91 |
94 |
95 | ```
96 | * [更多 demo](https://github.com/KuangPF/mpvue-picker/blob/master/src/pages/demo/index.vue)
97 | * 初始化
98 |
99 | 在父组件中调用 ` mpvuePicker` 实例中的 `show` 方法即可
100 |
101 | ``` javascript
102 | this.$refs.mpvuePicker.show();
103 | ```
104 |
105 | ## 效果
106 |
107 | 
108 | 
109 | 
110 | 
111 |
112 | ## 参数说明
113 |
114 | ### mode
115 | * 说明：picker 组件类型
116 | * 类型：String
117 | * 可选值：
118 | * selector（单列）
119 | * timeSelector（时间选择）
120 | * dateSelector (日期选择)
121 | * multiSelector（多列）
122 | * multiLinkageSelector（级联）
123 | * 是否必填： 否
124 | * 默认值：selector
125 |
126 | ### pickerValueArray
127 | * 说明：picker 渲染数据
128 | * 类型：Array
129 | * 可选值：-
130 | * 是否必填： 是（当 mode 值为 timeSelector 不用填）
131 | * 默认值：-
132 |
133 | ### pickerValueDefault
134 | * 说明：picker 默认选中值
135 | * 类型：Array || Date （类型为 Date 仅限 mode 为 dateSelector 的情形）
136 | * 可选值：-
137 | * 是否必填： 否 (当同一个组件使用多种 mode 来回切换使用时 pickerValueDefault 必填)
138 | * 默认值：[]
139 | * 相关说明：如果 mode 为 dateSelector，默认值为当前日期，初始值支持 Date 对象或者数组，以 2019-4-5 为例，`new Date('2019-04-05')` 和 `[2019, 4, 5]` 均可以
140 |
141 | ### deepLength
142 | * 说明：几级联动
143 | * 类型：Number
144 | * 可选值：
145 | * 2
146 | * 3
147 | * 是否必填： 否
148 | * 默认值：2
149 |
150 | ### themeColor
151 | * 说明：主题颜色
152 | * 类型：Color
153 | * 是否必填： 否
154 | * 默认值：#1aad19
155 |
156 | ### onChange
157 | * 说明：picker 组件滚动时回调，返回选中的 label, value 和数组索引 index 的值
158 | * 类型：EventHandle
159 | * 可选值：-
160 | * 是否必填： 否
161 | * 默认值：-
162 |
163 | ### onConfirm
164 | * 说明：picker 组件点击确定时回调，返回选中的 label, value 和数组索引 index 的值
165 | * 类型：EventHandle
166 | * 可选值：-
167 | * 是否必填： 否
168 | * 默认值：-
169 |
170 | ### onCancel
171 | * 说明：picker 组件点击取消时回调，返回选中的 label, value 和数组索引 index 的值
172 | * 类型：EventHandle
173 | * 可选值：-
174 | * 是否必填： 否
175 | * 默认值：-
176 |
177 | ## 相关数据结构说明
178 |
179 | #### **单列**
180 |
181 | 点击展开单列数据结构
182 |
183 | ``` javascript
184 | pickerValueArray: [
185 | {
186 | label: '住宿费',
187 | value: 1
188 | },
189 | {
190 | label: '活动费',
191 | value: 2
192 | },
193 | {
194 | label: '通讯费',
195 | value: 3
196 | },
197 | {
198 | label: '补助',
199 | value: 4
200 | }
201 | ],
202 | ```
203 |
204 |
205 |
206 | #### **多列**
207 |
208 | 点击展开多列数据结构
209 |
210 | ``` javascript
211 | pickerMulArray: [
212 | [
213 | { label: '中国', value: 1 },
214 | { label: '美国', value: 2 },
215 | { label: '日本', value: 3 },
216 | { label: '俄罗斯', value: 4 }
217 | ],
218 | [
219 | { label: '茶', value: 1 },
220 | { label: '咖啡', value: 2 },
221 | { label: '寿司', value: 3 },
222 | { label: '奶酪', value: 4 }
223 | ],
224 | [
225 | { label: '歼20', value: 1 },
226 | { label: 'F22', value: 2 },
227 | { label: '秋月级', value: 3 },
228 | { label: 'T50', value: 4 }
229 | ]
230 | ]
231 | ```
232 |
233 |
234 | #### **二级联动**
235 |
236 | 点击展开二级联动数据结构
237 |
238 | ``` javascript
239 | pickerValueArray:
240 | [
241 | {
242 | label: '飞机票',
243 | value: 0,
244 | children: [{
245 | label: '经济舱',
246 | value: 1
247 | },
248 | {
249 | label: '商务舱',
250 | value: 2
251 | }
252 | ]
253 | },
254 | {
255 | label: '火车票',
256 | value: 1,
257 | children: [{
258 | label: '卧铺',
259 | value: 1
260 | },
261 | {
262 | label: '坐票',
263 | value: 2
264 | },
265 | {
266 | label: '站票',
267 | value: 3
268 | }
269 | ]
270 | },
271 | {
272 | label: '汽车票',
273 | value: 3,
274 | children: [{
275 | label: '快班',
276 | value: 1
277 | },
278 | {
279 | label: '普通',
280 | value: 2
281 | }
282 | ]
283 | }
284 | ]
285 | ```
286 |
287 |
288 |
289 | #### **三级联动**
290 |
291 | 点击展开三级联动数据结构
292 |
293 | ``` javascript
294 | pickerValueArray:
295 | [
296 | {
297 | label: 'phone',
298 | value: 0,
299 | children: [
300 | {
301 | label: 'iphone',
302 | value: 1,
303 | children: [{
304 | label: 'iphoneX',
305 | value: 1
306 | },
307 | {
308 | label: 'iphone8',
309 | value: 2
310 | }, {
311 | label: 'iphone8 Plus',
312 | value: 3
313 | }]
314 | },
315 | {
316 | label: 'android',
317 | value: 1,
318 | children: [
319 | {
320 | label: 'vivo',
321 | value: 1
322 | },
323 | {
324 | label: '魅族',
325 | value: 2
326 | }, {
327 | label: '小米',
328 | value: 3
329 | }
330 | ]
331 | }
332 | ]
333 | },
334 | {
335 | label: 'PC',
336 | value: 0,
337 | children: [
338 | {
339 | label: 'mac',
340 | value: 1,
341 | children: [
342 | {
343 | label: 'macbook Pro',
344 | value: 1
345 | },
346 | {
347 | label: 'iMac',
348 | value: 2
349 | }, {
350 | label: 'mackbook',
351 | value: 3
352 | }, {
353 | label: 'mackbook air',
354 | value: 3
355 | }
356 | ]
357 | },
358 | {
359 | label: 'windows',
360 | value: 1,
361 | children: [
362 | {
363 | label: 'dell',
364 | value: 1
365 | },
366 | {
367 | label: 'surface',
368 | value: 2
369 | }, {
370 | label: 'thinkpad',
371 | value: 3
372 | }
373 | ]
374 | }
375 | ]
376 | }
377 | ]
378 | ```
379 |
380 |
381 |
382 | ## 相关说明
383 |
384 | 对于多级联动，由于没有动态添加 picker 列数以及动态渲染其值，因此目前只支持 二级联动和三级联动。
385 |
386 |
387 | ## 版本日志
388 |
389 | [version logs](https://github.com/KuangPF/mpvue-picker/releases)
390 |
--------------------------------------------------------------------------------
/README_1.x.x.md:
--------------------------------------------------------------------------------
1 | # mpvue-picker
2 |
3 | > 基于 mpvue 框架的小程序选择控件
4 | > 支持单列、多列以及级联
5 |
6 | 
7 | 
8 | 
9 | 
10 |
11 | ## 前言
12 | 在 [mpvue](https://github.com/Meituan-Dianping/mpvue)开源之初写了 [用 vue 写小程序，基于 mpvue 框架重写 weui](https://github.com/KuangPF/mpvue-weui)。当时用的是小程序的原生组件，没有对其进行封装和组件化。而对于现在的前端开发环境，`组件化`，`模块化`，`工程化`以及`自动化`已经是一种标配。而`mpvue`框架又提供了一个很好的组件化开发平台，因此就对小程序中的 `picker` 组件进行封装，使其在用`mpvue`开发的时候能够用快速的实现 `picker`的功能。
13 |
14 | ## 为什么封装 `picker` 组件
15 |
16 | * 其实小程序提供了原生的 `picker` 组件，但是在开发的时候会发现在 android 手机上看到的 `picker`效果与`微信开发者工具`预览的效果不一样，其实就是丑了一点点...
17 |
18 | * 在小程序中使用 `picker` 的地方很多，很常见。
19 |
20 | ## 使用
21 |
22 | * 安装
23 | ``` bash
24 | npm install mpvue-picker --save 或者 cnpm install mpvue-picker --save
25 | ```
26 |
27 | * 在页面中使用
28 | ``` javascript
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
58 |
59 |
62 |
63 | ```
64 |
65 | * 初始化
66 |
67 | 在父组件中调用 ` mpvuePicker` 实例中的 `show` 方法即可
68 |
69 | ## 效果
70 |
71 | 
72 | 
73 | 
74 | 
75 |
76 | ## 参数说明
77 |
78 | ### mode
79 | * 说明：picker 组件类型
80 | * 类型：String
81 | * 可选值：
82 | * selector（单列）
83 | * timeSelector（时间选择）
84 | * multiSelector（多列）
85 | * multiLinkageSelector（级联）
86 | * 是否必填： 否
87 | * 默认值：selector
88 |
89 | ### pickerValueArray
90 | * 说明：picker 渲染数据
91 | * 类型：Array
92 | * 可选值：-
93 | * 是否必填： 是（当 mode 值为 timeSelector 不用填）
94 | * 默认值：-
95 |
96 | ### pickerValueDefault
97 | * 说明：picker 默认选中值
98 | * 类型：Array
99 | * 可选值：-
100 | * 是否必填： 否
101 | * 默认值：[]
102 |
103 | ### deepLength
104 | * 说明：几级联动
105 | * 类型：Number
106 | * 可选值：
107 | * 2
108 | * 3
109 | * 是否必填： 否
110 | * 默认值：2
111 |
112 | ### onChange
113 | * 说明：picer 组件滚动时回调，返回选中的数组索引
114 | * 类型：EventHandle
115 | * 可选值：-
116 | * 是否必填： 否
117 | * 默认值：-
118 |
119 | ### onConfirm
120 | * 说明：picer 组件点击确定时回调，返回选中的数组索引
121 | * 类型：EventHandle
122 | * 可选值：-
123 | * 是否必填： 否
124 | * 默认值：-
125 |
126 |
127 | ## 相关数据结构说明
128 |
129 | #### **单列**
130 |
131 | ``` javascript
132 | pickerValueArray: ['住宿费', '礼品费', '活动费', '通讯费', '补助']
133 | ```
134 |
135 | #### **多列**
136 | ``` javascript
137 | pickerValueArray: [
138 | ['中国', '美国', '日本', '俄罗斯'],
139 | ['茶', '咖啡', '寿司', '奶酪'],
140 | ['歼20', 'F22', '秋月级', 'T50']
141 | ]
142 | ```
143 |
144 |
145 | 点击展开二级联动数据结构
146 |
147 | ``` javascript
148 | pickerValueArray:
149 | [
150 | {
151 | label: '飞机票',
152 | value: 0,
153 | children: [{
154 | label: '经济舱',
155 | value: 1
156 | },
157 | {
158 | label: '商务舱',
159 | value: 2
160 | }
161 | ]
162 | },
163 | {
164 | label: '火车票',
165 | value: 1,
166 | children: [{
167 | label: '卧铺',
168 | value: 1
169 | },
170 | {
171 | label: '坐票',
172 | value: 2
173 | },
174 | {
175 | label: '站票',
176 | value: 3
177 | }
178 | ]
179 | },
180 | {
181 | label: '汽车票',
182 | value: 3,
183 | children: [{
184 | label: '快班',
185 | value: 1
186 | },
187 | {
188 | label: '普通',
189 | value: 2
190 | }
191 | ]
192 | }
193 | ]
194 | ```
195 |
196 |
197 |
198 | 点击展开三级联动数据结构
199 |
200 | ``` javascript
201 | pickerValueArray:
202 | [
203 | {
204 | label: 'phone',
205 | value: 0,
206 | children: [
207 | {
208 | label: 'iphone',
209 | value: 1,
210 | children: [{
211 | label: 'iphoneX',
212 | value: 1
213 | },
214 | {
215 | label: 'iphone8',
216 | value: 2
217 | }, {
218 | label: 'iphone8 Plus',
219 | value: 3
220 | }]
221 | },
222 | {
223 | label: 'android',
224 | value: 1,
225 | children: [
226 | {
227 | label: 'vivo',
228 | value: 1
229 | },
230 | {
231 | label: '魅族',
232 | value: 2
233 | }, {
234 | label: '小米',
235 | value: 3
236 | }
237 | ]
238 | }
239 | ]
240 | },
241 | {
242 | label: 'PC',
243 | value: 0,
244 | children: [
245 | {
246 | label: 'mac',
247 | value: 1,
248 | children: [
249 | {
250 | label: 'macbook Pro',
251 | value: 1
252 | },
253 | {
254 | label: 'iMac',
255 | value: 2
256 | }, {
257 | label: 'mackbook',
258 | value: 3
259 | }, {
260 | label: 'mackbook air',
261 | value: 3
262 | }
263 | ]
264 | },
265 | {
266 | label: 'windows',
267 | value: 1,
268 | children: [
269 | {
270 | label: 'dell',
271 | value: 1
272 | },
273 | {
274 | label: 'surface',
275 | value: 2
276 | }, {
277 | label: 'thinkpad',
278 | value: 3
279 | }
280 | ]
281 | }
282 | ]
283 | }
284 | ]
285 | ```
286 |
287 |
288 | ## 相关说明
289 |
290 | 对于多级联动，由于没有动态添加 picker 列数以及动态渲染其值，因此目前只支持 二级联动和三级联动。
291 |
292 | ## 版本日志
293 |
294 | [version logs](https://github.com/KuangPF/mpvue-picker/releases)
295 |
296 | ## TODO
297 |
298 | * 增加日期选择 mode
299 | * 增加城市选择 mode
--------------------------------------------------------------------------------
/build/build.js:
--------------------------------------------------------------------------------
1 | require('./check-versions')()
2 |
3 | process.env.NODE_ENV = 'production'
4 |
5 | var ora = require('ora')
6 | var rm = require('rimraf')
7 | var path = require('path')
8 | var chalk = require('chalk')
9 | var webpack = require('webpack')
10 | var config = require('../config')
11 | var webpackConfig = require('./webpack.prod.conf')
12 |
13 | var spinner = ora('building for production...')
14 | spinner.start()
15 |
16 | rm(path.join(config.build.assetsRoot, '*'), err => {
17 | if (err) throw err
18 | webpack(webpackConfig, function (err, stats) {
19 | spinner.stop()
20 | if (err) throw err
21 | process.stdout.write(stats.toString({
22 | colors: true,
23 | modules: false,
24 | children: false,
25 | chunks: false,
26 | chunkModules: false
27 | }) + '\n\n')
28 |
29 | if (stats.hasErrors()) {
30 | console.log(chalk.red(' Build failed with errors.\n'))
31 | process.exit(1)
32 | }
33 |
34 | console.log(chalk.cyan(' Build complete.\n'))
35 | console.log(chalk.yellow(
36 | ' Tip: built files are meant to be served over an HTTP server.\n' +
37 | ' Opening index.html over file:// won\'t work.\n'
38 | ))
39 | })
40 | })
41 |
--------------------------------------------------------------------------------
/build/check-versions.js:
--------------------------------------------------------------------------------
1 | var chalk = require('chalk')
2 | var semver = require('semver')
3 | var packageConfig = require('../package.json')
4 | var shell = require('shelljs')
5 | function exec (cmd) {
6 | return require('child_process').execSync(cmd).toString().trim()
7 | }
8 |
9 | var versionRequirements = [
10 | {
11 | name: 'node',
12 | currentVersion: semver.clean(process.version),
13 | versionRequirement: packageConfig.engines.node
14 | }
15 | ]
16 |
17 | if (shell.which('npm')) {
18 | versionRequirements.push({
19 | name: 'npm',
20 | currentVersion: exec('npm --version'),
21 | versionRequirement: packageConfig.engines.npm
22 | })
23 | }
24 |
25 | module.exports = function () {
26 | var warnings = []
27 | for (var i = 0; i < versionRequirements.length; i++) {
28 | var mod = versionRequirements[i]
29 | if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) {
30 | warnings.push(mod.name + ': ' +
31 | chalk.red(mod.currentVersion) + ' should be ' +
32 | chalk.green(mod.versionRequirement)
33 | )
34 | }
35 | }
36 |
37 | if (warnings.length) {
38 | console.log('')
39 | console.log(chalk.yellow('To use this template, you must update following to modules:'))
40 | console.log()
41 | for (var i = 0; i < warnings.length; i++) {
42 | var warning = warnings[i]
43 | console.log(' ' + warning)
44 | }
45 | console.log()
46 | process.exit(1)
47 | }
48 | }
49 |
--------------------------------------------------------------------------------
/build/dev-client.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable */
2 | require('eventsource-polyfill')
3 | var hotClient = require('webpack-hot-middleware/client?noInfo=true&reload=true')
4 |
5 | hotClient.subscribe(function (event) {
6 | if (event.action === 'reload') {
7 | window.location.reload()
8 | }
9 | })
10 |
--------------------------------------------------------------------------------
/build/dev-server.js:
--------------------------------------------------------------------------------
1 | require("./check-versions")();
2 |
3 | var config = require("../config");
4 | if (!process.env.NODE_ENV) {
5 | process.env.NODE_ENV = JSON.parse(config.dev.env.NODE_ENV);
6 | }
7 |
8 | // var opn = require('opn')
9 | var path = require("path");
10 | var express = require("express");
11 | var webpack = require("webpack");
12 | var proxyMiddleware = require("http-proxy-middleware");
13 | var portfinder = require("portfinder");
14 | var webpackConfig = require("./webpack.dev.conf");
15 |
16 | // default port where dev server listens for incoming traffic
17 | var port = process.env.PORT || config.dev.port;
18 | // automatically open browser, if not set will be false
19 | var autoOpenBrowser = !!config.dev.autoOpenBrowser;
20 | // Define HTTP proxies to your custom API backend
21 | // https://github.com/chimurai/http-proxy-middleware
22 | var proxyTable = config.dev.proxyTable;
23 |
24 | var app = express();
25 | var compiler = webpack(webpackConfig);
26 |
27 | // var devMiddleware = require('webpack-dev-middleware')(compiler, {
28 | // publicPath: webpackConfig.output.publicPath,
29 | // quiet: true
30 | // })
31 |
32 | // var hotMiddleware = require('webpack-hot-middleware')(compiler, {
33 | // log: false,
34 | // heartbeat: 2000
35 | // })
36 | // force page reload when html-webpack-plugin template changes
37 | // compiler.plugin('compilation', function (compilation) {
38 | // compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) {
39 | // hotMiddleware.publish({ action: 'reload' })
40 | // cb()
41 | // })
42 | // })
43 |
44 | // proxy api requests
45 | Object.keys(proxyTable).forEach(function(context) {
46 | var options = proxyTable[context];
47 | if (typeof options === "string") {
48 | options = { target: options };
49 | }
50 | app.use(proxyMiddleware(options.filter || context, options));
51 | });
52 |
53 | // handle fallback for HTML5 history API
54 | app.use(require("connect-history-api-fallback")());
55 |
56 | // serve webpack bundle output
57 | // app.use(devMiddleware)
58 |
59 | // enable hot-reload and state-preserving
60 | // compilation error display
61 | // app.use(hotMiddleware)
62 |
63 | // serve pure static assets
64 | var staticPath = path.posix.join(
65 | config.dev.assetsPublicPath,
66 | config.dev.assetsSubDirectory
67 | );
68 | app.use(staticPath, express.static("./static"));
69 |
70 | // var uri = 'http://localhost:' + port
71 |
72 | var _resolve;
73 | var readyPromise = new Promise(resolve => {
74 | _resolve = resolve;
75 | });
76 |
77 | // console.log('> Starting dev server...')
78 | // devMiddleware.waitUntilValid(() => {
79 | // console.log('> Listening at ' + uri + '\n')
80 | // // when env is testing, don't need open it
81 | // if (autoOpenBrowser && process.env.NODE_ENV !== 'testing') {
82 | // opn(uri)
83 | // }
84 | // _resolve()
85 | // })
86 |
87 | module.exports = new Promise((resolve, reject) => {
88 | portfinder.basePort = port;
89 | portfinder
90 | .getPortPromise()
91 | .then(newPort => {
92 | if (port !== newPort) {
93 | console.log(`${port}端口被占用，开启新端口${newPort}`);
94 | }
95 | var server = app.listen(newPort, "localhost");
96 | // for 小程序的文件保存机制
97 | require("webpack-dev-middleware-hard-disk")(compiler, {
98 | publicPath: webpackConfig.output.publicPath,
99 | quiet: true
100 | });
101 | resolve({
102 | ready: readyPromise,
103 | close: () => {
104 | server.close();
105 | }
106 | });
107 | })
108 | .catch(error => {
109 | console.log("没有找到空闲端口，请打开任务管理器杀死进程端口再试", error);
110 | });
111 | });
112 |
--------------------------------------------------------------------------------
/build/utils.js:
--------------------------------------------------------------------------------
1 | var path = require("path");
2 | var config = require("../config");
3 | var ExtractTextPlugin = require("extract-text-webpack-plugin");
4 |
5 | exports.assetsPath = function(_path) {
6 | var assetsSubDirectory =
7 | process.env.NODE_ENV === "production"
8 | ? config.build.assetsSubDirectory
9 | : config.dev.assetsSubDirectory;
10 | return path.posix.join(assetsSubDirectory, _path);
11 | };
12 |
13 | exports.cssLoaders = function(options) {
14 | options = options || {};
15 |
16 | var cssLoader = {
17 | loader: "css-loader",
18 | options: {
19 | minimize: process.env.NODE_ENV === "production",
20 | sourceMap: options.sourceMap
21 | }
22 | };
23 |
24 | var postcssLoader = {
25 | loader: "postcss-loader",
26 | options: {
27 | sourceMap: true
28 | }
29 | };
30 |
31 | var px2rpxLoader = {
32 | loader: "px2rpx-loader",
33 | options: {
34 | baseDpr: 1,
35 | rpxUnit: 0.5
36 | }
37 | };
38 |
39 | // generate loader string to be used with extract text plugin
40 | function generateLoaders(loader, loaderOptions) {
41 | var loaders = [cssLoader, px2rpxLoader, postcssLoader];
42 | if (loader) {
43 | loaders.push({
44 | loader: loader + "-loader",
45 | options: Object.assign({}, loaderOptions, {
46 | sourceMap: options.sourceMap
47 | })
48 | });
49 | }
50 |
51 | // Extract CSS when that option is specified
52 | // (which is the case during production build)
53 | if (options.extract) {
54 | return ExtractTextPlugin.extract({
55 | use: loaders,
56 | fallback: "vue-style-loader"
57 | });
58 | } else {
59 | return ["vue-style-loader"].concat(loaders);
60 | }
61 | }
62 |
63 | // https://vue-loader.vuejs.org/en/configurations/extract-css.html
64 | return {
65 | css: generateLoaders(),
66 | wxss: generateLoaders(),
67 | postcss: generateLoaders(),
68 | less: generateLoaders("less"),
69 | sass: generateLoaders("sass", { indentedSyntax: true }),
70 | scss: generateLoaders("sass"),
71 | stylus: generateLoaders("stylus"),
72 | styl: generateLoaders("stylus")
73 | };
74 | };
75 |
76 | // Generate loaders for standalone style files (outside of .vue)
77 | exports.styleLoaders = function(options) {
78 | var output = [];
79 | var loaders = exports.cssLoaders(options);
80 | for (var extension in loaders) {
81 | var loader = loaders[extension];
82 | output.push({
83 | test: new RegExp("\\." + extension + "$"),
84 | use: loader
85 | });
86 | }
87 | return output;
88 | };
89 |
--------------------------------------------------------------------------------
/build/vue-loader.conf.js:
--------------------------------------------------------------------------------
1 | var utils = require("./utils");
2 | var config = require("../config");
3 | // var isProduction = process.env.NODE_ENV === 'production'
4 | // for mp
5 | var isProduction = true;
6 |
7 | module.exports = {
8 | loaders: utils.cssLoaders({
9 | sourceMap: isProduction
10 | ? config.build.productionSourceMap
11 | : config.dev.cssSourceMap,
12 | extract: isProduction
13 | }),
14 | transformToRequire: {
15 | video: "src",
16 | source: "src",
17 | img: "src",
18 | image: "xlink:href"
19 | }
20 | };
21 |
--------------------------------------------------------------------------------
/build/webpack.base.conf.js:
--------------------------------------------------------------------------------
1 | var path = require("path");
2 | var fs = require("fs");
3 | var utils = require("./utils");
4 | var config = require("../config");
5 | var vueLoaderConfig = require("./vue-loader.conf");
6 | var MpvuePlugin = require("webpack-mpvue-asset-plugin");
7 | var glob = require("glob");
8 | var CopyWebpackPlugin = require("copy-webpack-plugin");
9 | var relative = require("relative");
10 |
11 | function resolve(dir) {
12 | return path.join(__dirname, "..", dir);
13 | }
14 |
15 | function getEntry(rootSrc) {
16 | var map = {};
17 | glob.sync(rootSrc + "/pages/**/main.js").forEach(file => {
18 | var key = relative(rootSrc, file).replace(".js", "");
19 | map[key] = file;
20 | });
21 | return map;
22 | }
23 |
24 | const appEntry = { app: resolve("./src/main.js") };
25 | const pagesEntry = getEntry(resolve("./src"), "pages/**/main.js");
26 | const entry = Object.assign({}, appEntry, pagesEntry);
27 |
28 | module.exports = {
29 | // 如果要自定义生成的 dist 目录里面的文件路径，
30 | // 可以将 entry 写成 {'toPath': 'fromPath'} 的形式，
31 | // toPath 为相对于 dist 的路径, 例：index/demo，则生成的文件地址为 dist/index/demo.js
32 | entry,
33 | target: require("mpvue-webpack-target"),
34 | output: {
35 | path: config.build.assetsRoot,
36 | filename: "[name].js",
37 | publicPath:
38 | process.env.NODE_ENV === "production"
39 | ? config.build.assetsPublicPath
40 | : config.dev.assetsPublicPath
41 | },
42 | resolve: {
43 | extensions: [".js", ".vue", ".json"],
44 | alias: {
45 | vue: "mpvue",
46 | "@": resolve("src")
47 | },
48 | symlinks: false,
49 | aliasFields: ["mpvue", "weapp", "browser"],
50 | mainFields: ["browser", "module", "main"]
51 | },
52 | module: {
53 | rules: [
54 | {
55 | test: /\.(js|vue)$/,
56 | loader: "eslint-loader",
57 | enforce: "pre",
58 | include: [resolve("src"), resolve("test")],
59 | options: {
60 | formatter: require("eslint-friendly-formatter")
61 | }
62 | },
63 | {
64 | test: /\.vue$/,
65 | loader: "mpvue-loader",
66 | options: vueLoaderConfig
67 | },
68 | {
69 | test: /\.js$/,
70 | include: [resolve("src"), resolve("test")],
71 | use: [
72 | "babel-loader",
73 | {
74 | loader: "mpvue-loader",
75 | options: {
76 | checkMPEntry: true
77 | }
78 | }
79 | ]
80 | },
81 | {
82 | test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
83 | loader: "url-loader",
84 | options: {
85 | limit: 10000,
86 | name: utils.assetsPath("img/[name].[ext]")
87 | }
88 | },
89 | {
90 | test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
91 | loader: "url-loader",
92 | options: {
93 | limit: 10000,
94 | name: utils.assetsPath("media/[name].[ext]")
95 | }
96 | },
97 | {
98 | test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
99 | loader: "url-loader",
100 | options: {
101 | limit: 10000,
102 | name: utils.assetsPath("fonts/[name].[ext]")
103 | }
104 | }
105 | ]
106 | },
107 | plugins: [
108 | new MpvuePlugin(),
109 | new CopyWebpackPlugin(
110 | [
111 | {
112 | from: "**/*.json",
113 | to: ""
114 | }
115 | ],
116 | {
117 | context: "src/"
118 | }
119 | ),
120 | new CopyWebpackPlugin([
121 | {
122 | from: path.resolve(__dirname, "../static"),
123 | to: path.resolve(__dirname, "../dist/static"),
124 | ignore: [".*"]
125 | }
126 | ])
127 | ]
128 | };
129 |
--------------------------------------------------------------------------------
/build/webpack.dev.conf.js:
--------------------------------------------------------------------------------
1 | var utils = require("./utils");
2 | var webpack = require("webpack");
3 | var config = require("../config");
4 | var merge = require("webpack-merge");
5 | var baseWebpackConfig = require("./webpack.base.conf");
6 | // var HtmlWebpackPlugin = require('html-webpack-plugin')
7 | var FriendlyErrorsPlugin = require("friendly-errors-webpack-plugin");
8 |
9 | // copy from ./webpack.prod.conf.js
10 | var path = require("path");
11 | var ExtractTextPlugin = require("extract-text-webpack-plugin");
12 | var CopyWebpackPlugin = require("copy-webpack-plugin");
13 | var OptimizeCSSPlugin = require("optimize-css-assets-webpack-plugin");
14 |
15 | // add hot-reload related code to entry chunks
16 | // Object.keys(baseWebpackConfig.entry).forEach(function (name) {
17 | // baseWebpackConfig.entry[name] = ['./build/dev-client'].concat(baseWebpackConfig.entry[name])
18 | // })
19 |
20 | module.exports = merge(baseWebpackConfig, {
21 | module: {
22 | rules: utils.styleLoaders({
23 | sourceMap: config.dev.cssSourceMap,
24 | extract: true
25 | })
26 | },
27 | // cheap-module-eval-source-map is faster for development
28 | // devtool: '#cheap-module-eval-source-map',
29 | devtool: "#source-map",
30 | output: {
31 | path: config.build.assetsRoot,
32 | // filename: utils.assetsPath('[name].[chunkhash].js'),
33 | // chunkFilename: utils.assetsPath('[id].[chunkhash].js')
34 | filename: utils.assetsPath("[name].js"),
35 | chunkFilename: utils.assetsPath("[id].js")
36 | },
37 | plugins: [
38 | new webpack.DefinePlugin({
39 | "process.env": config.dev.env
40 | }),
41 |
42 | // copy from ./webpack.prod.conf.js
43 | // extract css into its own file
44 | new ExtractTextPlugin({
45 | // filename: utils.assetsPath('[name].[contenthash].css')
46 | filename: utils.assetsPath("[name].wxss")
47 | }),
48 | // Compress extracted CSS. We are using this plugin so that possible
49 | // duplicated CSS from different components can be deduped.
50 | new OptimizeCSSPlugin({
51 | cssProcessorOptions: {
52 | safe: true
53 | }
54 | }),
55 | new webpack.optimize.CommonsChunkPlugin({
56 | name: "common/vendor",
57 | minChunks: function(module, count) {
58 | // any required modules inside node_modules are extracted to vendor
59 | return (
60 | (module.resource &&
61 | /\.js$/.test(module.resource) &&
62 | module.resource.indexOf("node_modules") >= 0) ||
63 | count > 1
64 | );
65 | }
66 | }),
67 | new webpack.optimize.CommonsChunkPlugin({
68 | name: "common/manifest",
69 | chunks: ["common/vendor"]
70 | }),
71 |
72 | // https://github.com/glenjamin/webpack-hot-middleware#installation--usage
73 | // new webpack.HotModuleReplacementPlugin(),
74 | new webpack.NoEmitOnErrorsPlugin(),
75 | // https://github.com/ampedandwired/html-webpack-plugin
76 | // new HtmlWebpackPlugin({
77 | // filename: 'index.html',
78 | // template: 'index.html',
79 | // inject: true
80 | // }),
81 | new FriendlyErrorsPlugin()
82 | ]
83 | });
84 |
--------------------------------------------------------------------------------
/build/webpack.prod.conf.js:
--------------------------------------------------------------------------------
1 | var path = require("path");
2 | var utils = require("./utils");
3 | var webpack = require("webpack");
4 | var config = require("../config");
5 | var merge = require("webpack-merge");
6 | var baseWebpackConfig = require("./webpack.base.conf");
7 | var UglifyJsPlugin = require("uglifyjs-webpack-plugin");
8 | var CopyWebpackPlugin = require("copy-webpack-plugin");
9 | // var HtmlWebpackPlugin = require('html-webpack-plugin')
10 | var ExtractTextPlugin = require("extract-text-webpack-plugin");
11 | var OptimizeCSSPlugin = require("optimize-css-assets-webpack-plugin");
12 |
13 | var env = config.build.env;
14 |
15 | var webpackConfig = merge(baseWebpackConfig, {
16 | module: {
17 | rules: utils.styleLoaders({
18 | sourceMap: config.build.productionSourceMap,
19 | extract: true
20 | })
21 | },
22 | devtool: config.build.productionSourceMap ? "#source-map" : false,
23 | output: {
24 | path: config.build.assetsRoot,
25 | // filename: utils.assetsPath('[name].[chunkhash].js'),
26 | // chunkFilename: utils.assetsPath('[id].[chunkhash].js')
27 | filename: utils.assetsPath("[name].js"),
28 | chunkFilename: utils.assetsPath("[id].js")
29 | },
30 | plugins: [
31 | // http://vuejs.github.io/vue-loader/en/workflow/production.html
32 | new webpack.DefinePlugin({
33 | "process.env": env
34 | }),
35 | new UglifyJsPlugin({
36 | sourceMap: true
37 | }),
38 | // extract css into its own file
39 | new ExtractTextPlugin({
40 | // filename: utils.assetsPath('[name].[contenthash].css')
41 | filename: utils.assetsPath("[name].wxss")
42 | }),
43 | // Compress extracted CSS. We are using this plugin so that possible
44 | // duplicated CSS from different components can be deduped.
45 | new OptimizeCSSPlugin({
46 | cssProcessorOptions: {
47 | safe: true
48 | }
49 | }),
50 | // generate dist index.html with correct asset hash for caching.
51 | // you can customize output by editing /index.html
52 | // see https://github.com/ampedandwired/html-webpack-plugin
53 | // new HtmlWebpackPlugin({
54 | // filename: config.build.index,
55 | // template: 'index.html',
56 | // inject: true,
57 | // minify: {
58 | // removeComments: true,
59 | // collapseWhitespace: true,
60 | // removeAttributeQuotes: true
61 | // // more options:
62 | // // https://github.com/kangax/html-minifier#options-quick-reference
63 | // },
64 | // // necessary to consistently work with multiple chunks via CommonsChunkPlugin
65 | // chunksSortMode: 'dependency'
66 | // }),
67 | // keep module.id stable when vender modules does not change
68 | new webpack.HashedModuleIdsPlugin(),
69 | // split vendor js into its own file
70 | new webpack.optimize.CommonsChunkPlugin({
71 | name: "common/vendor",
72 | minChunks: function(module, count) {
73 | // any required modules inside node_modules are extracted to vendor
74 | return (
75 | (module.resource &&
76 | /\.js$/.test(module.resource) &&
77 | module.resource.indexOf("node_modules") >= 0) ||
78 | count > 1
79 | );
80 | }
81 | }),
82 | // extract webpack runtime and module manifest to its own file in order to
83 | // prevent vendor hash from being updated whenever app bundle is updated
84 | new webpack.optimize.CommonsChunkPlugin({
85 | name: "common/manifest",
86 | chunks: ["common/vendor"]
87 | })
88 | ]
89 | });
90 |
91 | // if (config.build.productionGzip) {
92 | // var CompressionWebpackPlugin = require('compression-webpack-plugin')
93 |
94 | // webpackConfig.plugins.push(
95 | // new CompressionWebpackPlugin({
96 | // asset: '[path].gz[query]',
97 | // algorithm: 'gzip',
98 | // test: new RegExp(
99 | // '\\.(' +
100 | // config.build.productionGzipExtensions.join('|') +
101 | // ')$'
102 | // ),
103 | // threshold: 10240,
104 | // minRatio: 0.8
105 | // })
106 | // )
107 | // }
108 |
109 | if (config.build.bundleAnalyzerReport) {
110 | var BundleAnalyzerPlugin = require("webpack-bundle-analyzer")
111 | .BundleAnalyzerPlugin;
112 | webpackConfig.plugins.push(new BundleAnalyzerPlugin());
113 | }
114 |
115 | module.exports = webpackConfig;
116 |
--------------------------------------------------------------------------------
/config/dev.env.js:
--------------------------------------------------------------------------------
1 | var merge = require("webpack-merge");
2 | var prodEnv = require("./prod.env");
3 |
4 | module.exports = merge(prodEnv, {
5 | NODE_ENV: '"development"'
6 | });
7 |
--------------------------------------------------------------------------------
/config/index.js:
--------------------------------------------------------------------------------
1 | // see http://vuejs-templates.github.io/webpack for documentation.
2 | var path = require("path");
3 |
4 | module.exports = {
5 | build: {
6 | env: require("./prod.env"),
7 | index: path.resolve(__dirname, "../dist/index.html"),
8 | assetsRoot: path.resolve(__dirname, "../dist"),
9 | assetsSubDirectory: "",
10 | assetsPublicPath: "/",
11 | productionSourceMap: false,
12 | // Gzip off by default as many popular static hosts such as
13 | // Surge or Netlify already gzip all static assets for you.
14 | // Before setting to `true`, make sure to:
15 | // npm install --save-dev compression-webpack-plugin
16 | productionGzip: false,
17 | productionGzipExtensions: ["js", "css"],
18 | // Run the build command with an extra argument to
19 | // View the bundle analyzer report after build finishes:
20 | // `npm run build --report`
21 | // Set to `true` or `false` to always turn it on or off
22 | bundleAnalyzerReport: process.env.npm_config_report
23 | },
24 | dev: {
25 | env: require("./dev.env"),
26 | port: 8080,
27 | // 在小程序开发者工具中不需要自动打开浏览器
28 | autoOpenBrowser: false,
29 | assetsSubDirectory: "",
30 | assetsPublicPath: "/",
31 | proxyTable: {},
32 | // CSS Sourcemaps off by default because relative paths are "buggy"
33 | // with this option, according to the CSS-Loader README
34 | // (https://github.com/webpack/css-loader#sourcemaps)
35 | // In our experience, they generally work as expected,
36 | // just be aware of this issue when enabling this option.
37 | cssSourceMap: false
38 | }
39 | };
40 |
--------------------------------------------------------------------------------
/config/prod.env.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | NODE_ENV: '"production"'
3 | };
4 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | mpvue-picker
6 |
7 |
8 |
9 |
10 |
11 |
12 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "mpvue-picker",
3 | "version": "2.1.6",
4 | "description": "基于 mpvue 框架的小程序选择控件",
5 | "main": "src/mpvue-picker/mpvuePicker.vue",
6 | "author": "kuangpengfei <1633397286@qq.com>",
7 | "private": false,
8 | "repository": {
9 | "type": "git",
10 | "url": "https://github.com/KuangPF/mpvue-picker"
11 | },
12 | "files": [
13 | "src"
14 | ],
15 | "license": "MIT",
16 | "scripts": {
17 | "dev": "node build/dev-server.js",
18 | "start": "node build/dev-server.js",
19 | "build": "rimraf dist && node build/build.js",
20 | "lint": "eslint --ext .js,.vue src",
21 | "release": "sh ./release.sh"
22 | },
23 | "dependencies": {},
24 | "devDependencies": {
25 | "babel-core": "^6.22.1",
26 | "babel-eslint": "^8.2.3",
27 | "babel-loader": "^7.1.1",
28 | "babel-plugin-transform-runtime": "^6.22.0",
29 | "babel-preset-env": "^1.3.2",
30 | "babel-preset-stage-2": "^6.22.0",
31 | "babel-register": "^6.22.0",
32 | "chalk": "^2.4.0",
33 | "connect-history-api-fallback": "^1.3.0",
34 | "copy-webpack-plugin": "^4.5.1",
35 | "css-loader": "^0.28.11",
36 | "cssnano": "^3.10.0",
37 | "eslint": "^4.19.1",
38 | "eslint-config-standard": "^11.0.0",
39 | "eslint-friendly-formatter": "^4.0.1",
40 | "eslint-loader": "^2.0.0",
41 | "eslint-plugin-html": "^4.0.3",
42 | "eslint-plugin-import": "^2.11.0",
43 | "eslint-plugin-node": "^6.0.1",
44 | "eslint-plugin-promise": "^3.4.0",
45 | "eslint-plugin-standard": "^3.0.1",
46 | "eventsource-polyfill": "^0.9.6",
47 | "express": "^4.16.3",
48 | "extract-text-webpack-plugin": "^3.0.2",
49 | "file-loader": "^1.1.11",
50 | "friendly-errors-webpack-plugin": "^1.7.0",
51 | "glob": "^7.1.2",
52 | "html-webpack-plugin": "^3.2.0",
53 | "http-proxy-middleware": "^0.18.0",
54 | "mpvue": "^1.0.18",
55 | "mpvue-loader": "1.1.2",
56 | "mpvue-picker": "^2.1.2",
57 | "mpvue-template-compiler": "1.0.18",
58 | "mpvue-webpack-target": "^1.0.0",
59 | "optimize-css-assets-webpack-plugin": "^3.2.0",
60 | "ora": "^2.0.0",
61 | "portfinder": "^1.0.13",
62 | "postcss-loader": "^2.1.4",
63 | "postcss-mpvue-wxss": "^1.0.0",
64 | "prettier": "~1.12.1",
65 | "px2rpx-loader": "^0.1.10",
66 | "relative": "^3.0.2",
67 | "rimraf": "^2.6.0",
68 | "semver": "^5.3.0",
69 | "shelljs": "^0.8.1",
70 | "uglifyjs-webpack-plugin": "^1.2.5",
71 | "url-loader": "^1.0.1",
72 | "vue-style-loader": "^4.1.0",
73 | "webpack": "^3.11.0",
74 | "webpack-bundle-analyzer": "^2.2.1",
75 | "webpack-dev-middleware-hard-disk": "^1.12.0",
76 | "webpack-merge": "^4.1.0",
77 | "webpack-mpvue-asset-plugin": "^0.1.1"
78 | },
79 | "engines": {
80 | "node": ">= 4.0.0",
81 | "npm": ">= 3.0.0"
82 | },
83 | "browserslist": [
84 | "> 1%",
85 | "last 2 versions",
86 | "not ie <= 8"
87 | ]
88 | }
89 |
--------------------------------------------------------------------------------
/project.config.json:
--------------------------------------------------------------------------------
1 | {
2 | "description": "项目配置文件。",
3 | "setting": {
4 | "urlCheck": true,
5 | "es6": false,
6 | "postcss": true,
7 | "minified": true,
8 | "newFeature": true
9 | },
10 | "miniprogramRoot": "./dist/",
11 | "compileType": "miniprogram",
12 | "appid": "",
13 | "projectname": "mpvue-picker",
14 | "condition": {
15 | "search": {
16 | "current": -1,
17 | "list": []
18 | },
19 | "conversation": {
20 | "current": -1,
21 | "list": []
22 | },
23 | "game": {
24 | "currentL": -1,
25 | "list": []
26 | },
27 | "miniprogram": {
28 | "current": -1,
29 | "list": []
30 | }
31 | }
32 | }
33 |
--------------------------------------------------------------------------------
/release.sh:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env sh
2 | set -e
3 | echo "Enter release version: "
4 | read VERSION
5 |
6 | read -p "Releasing $VERSION - are you sure? (y/n)" -n 1 -r
7 | echo # (optional) move to a new line
8 | if [[ $REPLY =~ ^[Yy]$ ]]
9 | echo "Releasing $VERSION ..."
10 | then
11 | # build
12 | VERSION=$VERSION npm run build
13 | if [[ `git status --porcelain` ]];
14 | then
15 | git add -A
16 | git commit -am "build: release $VERSION"
17 | fi
18 |
19 | # commit
20 | npm version $VERSION --message "build: release $VERSION"
21 |
22 | # publish
23 | git push origin refs/tags/v"$VERSION"
24 | git push origin master
25 |
26 | npm publish --registry=https://registry.npmjs.org
27 | fi
28 |
--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
1 |
4 |
5 |
8 |
--------------------------------------------------------------------------------
/src/app.json:
--------------------------------------------------------------------------------
1 | {
2 | "pages": [
3 | "pages/demo/main",
4 | "pages/test/main",
5 | "pages/mpvue-city-picker/main"
6 | ],
7 | "window": {
8 | "backgroundTextStyle": "light",
9 | "navigationBarBackgroundColor": "#fff",
10 | "navigationBarTitleText": "mpvue-picker",
11 | "navigationBarTextStyle": "black"
12 | }
13 | }
--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue';
2 | import App from './App';
3 |
4 | Vue.config.productionTip = false;
5 | App.mpType = 'app';
6 |
7 | const app = new Vue(App);
8 | app.$mount();
9 |
--------------------------------------------------------------------------------
/src/mpvue-picker/mpvuePicker.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | 取消
7 | 确定
8 |
9 |
10 |
17 |
18 |
19 | {{item.label}}
24 |
25 |
26 |
27 |
28 |
35 |
36 |
37 | {{item.label}}
42 |
43 |
44 | {{item.label}}
49 |
50 |
51 | {{item.label}}
56 |
57 |
58 |
59 |
60 |
67 |
68 |
69 | {{item.label}}
74 |
75 |
76 | {{item.label}}
81 |
82 |
83 |
84 |
85 |
92 |
93 |
94 | {{item.label}}
99 |
100 |
101 |
102 |
103 |
110 |
111 |
112 | {{item.label}}
117 |
118 |
119 | {{item.label}}
124 |
125 |
126 |
127 |
128 |
135 |
136 |
137 | {{item.label}}
142 |
143 |
144 | {{item.label}}
149 |
150 |
151 | {{item.label}}
156 |
157 |
158 |
159 |
160 |
161 |
162 |
163 |
581 |
582 |
661 |
--------------------------------------------------------------------------------
/src/pages/demo/index.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
mvpue-picker 示例
5 |
选中的值:
6 |
{{pickerText}}
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
3 |
4 |
5 |
6 |
7 |
8 |
37 |
38 |
40 |
--------------------------------------------------------------------------------
/src/pages/mpvue-city-picker/main.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue';
2 | import App from './index';
3 |
4 | const app = new Vue(App);
5 | app.$mount();
6 |
--------------------------------------------------------------------------------
/src/pages/test/index.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
226 |
227 |
229 |
--------------------------------------------------------------------------------
/src/pages/test/main.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue';
2 | import App from './index';
3 |
4 | const app = new Vue(App);
5 | app.$mount();
6 |
--------------------------------------------------------------------------------
/src/utils/index.js:
--------------------------------------------------------------------------------
1 | const MIN_DATE = new Date(1900, 0, 1); // 最小支持日期 1990-01-01
2 | const NOW_DATE = new Date(); // 当前日期
3 |
4 | const transformDateToIndex = (ARG_DATE = NOW_DATE) => {
5 | let defaultDateIndex = [];
6 | defaultDateIndex.push(ARG_DATE.getFullYear() - MIN_DATE.getFullYear()); // 年
7 | defaultDateIndex.push(ARG_DATE.getMonth()); // 月
8 | defaultDateIndex.push(ARG_DATE.getDate() - 1); // 日
9 | return defaultDateIndex;
10 | };
11 |
12 | const getDatePickerIndex = pickerIndex => {
13 | let tempPickerIndex = [];
14 | // 支持传入 Date 对象
15 | /* eslint-disable-next-line */
16 | if (Object.prototype.toString.call(pickerIndex) === '[object Date]' && !isNaN(pickerIndex.getTime())) {
17 | tempPickerIndex = transformDateToIndex(pickerIndex);
18 | } else {
19 | if (isNaN(new Date(`${pickerIndex[0]}/${pickerIndex[1]}/${pickerIndex[2]}`).getTime())) {
20 | tempPickerIndex = transformDateToIndex(); // 兼容错误日期
21 | } else {
22 | tempPickerIndex = transformDateToIndex(new Date(`${pickerIndex[0]}/${pickerIndex[1]}/${pickerIndex[2]}`));
23 | }
24 | }
25 | if (tempPickerIndex[0] > 199) {
26 | console.warn('最大日期范围支持：1990-01-01 ~ 2099-12-31');
27 | tempPickerIndex[0] = 199;
28 | }
29 | return tempPickerIndex;
30 | };
31 |
32 | const getDays = (year, month) => {
33 | if (month > 12 || month < 0) {
34 | return -1;
35 | }
36 | month = parseInt(month, 10);
37 | var date = new Date(year, month, 0);
38 | return date.getDate();
39 | };
40 |
41 | /**
42 | * 兼容 pickerValueArray 值
43 | * @param {*} pickerValue 索引值
44 | * @param {*} mode 模式值
45 | * @param {*} pickerValueArray picker 数组
46 | */
47 | const fixPickerValueDefault = (pickerValue, mode, pickerValueArray) => {
48 | let fixPickerValue = pickerValue;
49 | // TODO
50 | if (mode === 'selector') {
51 | // 单列
52 | fixPickerValue[0] = Math.min(fixPickerValue[0], pickerValueArray.length - 1);
53 | } else if (mode === 'multiSelector') {
54 | // 多列
55 | fixPickerValue = fixPickerValue.map((item, index) => {
56 | return Math.min(item, pickerValueArray[index].length - 1);
57 | });
58 | } else if (mode === 'timeSelector') {
59 | // 时间选择器
60 | fixPickerValue = fixPickerValue.map((item, index) => {
61 | return index > 0 ? Math.min(item, 59) : Math.min(item, 23);
62 | });
63 | } else if (mode === 'multiLinkageSelector') {
64 | let tempIndexFirst, tempIndexSecond;
65 | fixPickerValue = fixPickerValue.map((item, index) => {
66 | if (index === 0) {
67 | tempIndexFirst = Math.min(item, pickerValueArray.length - 1);
68 | return tempIndexFirst;
69 | } else if (index === 1) {
70 | tempIndexSecond = Math.min(item, pickerValueArray[tempIndexFirst].children.length - 1);
71 | return tempIndexSecond;
72 | } else if (index === 2) {
73 | return Math.min(item, pickerValueArray[tempIndexFirst].children[tempIndexSecond].children.length - 1);
74 | }
75 | });
76 | }
77 | return fixPickerValue;
78 | };
79 | export { transformDateToIndex, getDatePickerIndex, getDays, fixPickerValueDefault };
80 |
--------------------------------------------------------------------------------
/static/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MPComponent/mpvue-picker/577e44cdc893e364993c67bd58afde93887a81ea/static/.gitkeep
--------------------------------------------------------------------------------