diff --git a/docs/demos/views/area.vue b/docs/demos/views/area.vue index 0848082c7..8d9249320 100644 --- a/docs/demos/views/area.vue +++ b/docs/demos/views/area.vue @@ -9,7 +9,7 @@ - + @@ -34,7 +34,6 @@ export default { data() { return { - areaList: AreaList, value: '110101' }; } diff --git a/docs/markdown/en-US/area.md b/docs/markdown/en-US/area.md index 058159b55..94f3fe315 100644 --- a/docs/markdown/en-US/area.md +++ b/docs/markdown/en-US/area.md @@ -32,7 +32,7 @@ To have a selected value,simply pass the `code` of target area to `value` prop Set `columnsNum` with 2, you'll have a 2 level picker. ```html - + ``` @@ -41,6 +41,7 @@ Set `columnsNum` with 2, you'll have a 2 level picker. | Attribute | Description | Type | Default | Accepted Values | |-----------|-----------|-----------|-------------|-------------| | value | the `code` of selected area | `String` | - | - | +| title | Toolbar title | `String` | `''` | - | | areaList | an object contains these properties: `province_list`, `city_list` and `county_list` | `Object` | - | - | | columnsNum | level of picker | `String`,`Number` | 3 | - | diff --git a/docs/markdown/zh-CN/area.md b/docs/markdown/zh-CN/area.md index dc44716ae..ebfcfaddd 100644 --- a/docs/markdown/zh-CN/area.md +++ b/docs/markdown/zh-CN/area.md @@ -33,7 +33,7 @@ Vue.use(Area); 可以通过`columnsNum`属性配置省市县显示的列数,默认情况下会显示省市县,当你设置为`2`,则只会显示省市选择。 ```html - + ``` ### API @@ -41,6 +41,7 @@ Vue.use(Area); | 参数 | 说明 | 类型 | 默认值 | 可选值 | |-----------|-----------|-----------|-------------|-------------| | value | 当前选中的省市区`code` | `String` | - | - | +| title | 顶部栏标题 | `String` | `''` | - | | areaList | 省市县数据,必须与`province_list`、`city_list`和`county_list`为key | `Object` | - | - | | columnsNum | 省市县显示列数,3-省市县,2-省市,1-省 | `String`,`Number` | 3 | - | diff --git a/package.json b/package.json index f8bb805be..4bddc9822 100644 --- a/package.json +++ b/package.json @@ -51,7 +51,7 @@ "vue": ">= 2.5.0" }, "devDependencies": { - "autoprefixer": "^7.2.2", + "autoprefixer": "^7.2.3", "avoriaz": "2.0.0", "babel-cli": "^6.26.0", "babel-core": "^6.26.0", @@ -90,11 +90,11 @@ "karma-phantomjs-launcher": "^1.0.4", "karma-sinon-chai": "^1.3.2", "karma-sourcemap-loader": "^0.3.7", - "karma-spec-reporter": "^0.0.31", - "karma-webpack": "^2.0.6", + "karma-spec-reporter": "^0.0.32", + "karma-webpack": "^2.0.9", "markdown-it": "^8.4.0", "markdown-it-container": "^2.0.0", - "mocha": "^3.4.2", + "mocha": "^4.0.1", "postcss": "^6.0.14", "postcss-calc": "^6.0.0", "postcss-easy-import": "^3.0.0", @@ -109,12 +109,12 @@ "uppercamelcase": "^3.0.0", "url-loader": "^0.6.2", "vant-doc": "0.3.19", - "vue": "^2.5.9", - "vue-loader": "^13.5.0", + "vue": "^2.5.11", + "vue-loader": "^13.6.0", "vue-router": "^3.0.1", "vue-sfc-compiler": "^0.0.6", "vue-style-loader": "^3.0.0", - "vue-template-compiler": "^2.5.9", + "vue-template-compiler": "^2.5.11", "vue-template-es2015-compiler": "^1.6.0", "webpack": "^3.10.0", "webpack-bundle-analyzer": "^2.9.1", diff --git a/packages/area/index.vue b/packages/area/index.vue index c9f19791c..8603c2767 100644 --- a/packages/area/index.vue +++ b/packages/area/index.vue @@ -3,11 +3,12 @@ @@ -29,6 +30,7 @@ export default create({ props: { value: {}, + title: String, areaList: Object, // 省市县显示列数,3-省市县,2-省市,1-省 columnsNum: { diff --git a/packages/picker/PickerColumn.vue b/packages/picker/PickerColumn.vue index ae90160ed..04dd10b3c 100644 --- a/packages/picker/PickerColumn.vue +++ b/packages/picker/PickerColumn.vue @@ -1,14 +1,15 @@ @@ -41,7 +42,10 @@ export default create({ type: String, default: 'text' }, - itemHeight: Number, + itemHeight: { + type: Number, + default: 44 + }, showToolbar: Boolean, visibileColumnCount: Number, columns: { @@ -67,6 +71,14 @@ export default create({ } }, + computed: { + frameStyle() { + return { + height: this.itemHeight + 'px' + }; + } + }, + methods: { initColumns() { const columns = this.columns.map(deepClone); diff --git a/packages/vant-css/src/picker.css b/packages/vant-css/src/picker.css index 6ddd9ac25..c24923b30 100644 --- a/packages/vant-css/src/picker.css +++ b/packages/vant-css/src/picker.css @@ -9,7 +9,6 @@ &__toolbar { height: 40px; line-height: 40px; - overflow: hidden; } &__cancel, @@ -39,18 +38,23 @@ display: flex; position: relative; } + + &__frame { + top: 50%; + left: 0; + width: 100%; + z-index: 1; + position: absolute; + pointer-events: none; + transform: translateY(-50%); + } &-column { flex: 1; overflow: hidden; font-size: 18px; - position: relative; text-align: center; - ul { - box-sizing: border-box; - } - li { padding: 0 10px; color: $gray-darker; @@ -64,15 +68,5 @@ li&--disabled { opacity: .3; } - - &__frame { - top: 50%; - left: 0; - width: 100%; - z-index: 1; - position: absolute; - pointer-events: none; - transform: translateY(-50%); - } } } diff --git a/packages/vant-css/src/submit-bar.css b/packages/vant-css/src/submit-bar.css index db50bd56b..4cbe39654 100644 --- a/packages/vant-css/src/submit-bar.css +++ b/packages/vant-css/src/submit-bar.css @@ -13,7 +13,7 @@ font-size: 12px; line-height: 18px; padding: 10px 10px; - background-color: #fff6e1; + background-color: #fff7cc; } &__bar { diff --git a/test/unit/specs/picker.spec.js b/test/unit/specs/picker.spec.js index ff2bae1b7..c2cc581ce 100644 --- a/test/unit/specs/picker.spec.js +++ b/test/unit/specs/picker.spec.js @@ -299,12 +299,13 @@ describe('PickerColumn', () => { it('drag options', () => { wrapper = mount(PickerColumn, { propsData: { - options: columns[1].values + options: columns[1].values, + itemHeight: 50 } }); expect(wrapper.vm.currentIndex).to.equal(0); - const column = wrapper.find('.van-picker-column ul')[0]; + const column = wrapper.find('.van-picker-column')[0]; dragHelper(column, 0); expect(wrapper.vm.currentIndex).to.equal(0); diff --git a/yarn.lock b/yarn.lock index 6e7211631..884238346 100644 --- a/yarn.lock +++ b/yarn.lock @@ -325,12 +325,12 @@ autoprefixer@^6.3.1: postcss "^5.2.16" postcss-value-parser "^3.2.3" -autoprefixer@^7.2.2: - version "7.2.2" - resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-7.2.2.tgz#082293b964be00602efacc59aa4aa7df5158bb6e" +autoprefixer@^7.2.3: + version "7.2.3" + resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-7.2.3.tgz#c2841e38b7940c2d0a9bbffd72c75f33637854f8" dependencies: browserslist "^2.10.0" - caniuse-lite "^1.0.30000780" + caniuse-lite "^1.0.30000783" normalize-range "^0.1.2" num2fraction "^1.2.2" postcss "^6.0.14" @@ -1229,6 +1229,10 @@ caniuse-lite@^1.0.30000780: version "1.0.30000782" resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000782.tgz#5b82b8c385f25348745c471ca51320afb1b7f254" +caniuse-lite@^1.0.30000783: + version "1.0.30000783" + resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000783.tgz#9b5499fb1b503d2345d12aa6b8612852f4276ffd" + caseless@~0.12.0: version "0.12.0" resolved "https://registry.yarnpkg.com/caseless/-/caseless-0.12.0.tgz#1b681c21ff84033c826543090689420d187151dc" @@ -1479,7 +1483,7 @@ commander@2.8.x, commander@~2.8.1: dependencies: graceful-readlink ">= 1.0.0" -commander@2.9.0, commander@~2.9.0: +commander@~2.9.0: version "2.9.0" resolved "https://registry.yarnpkg.com/commander/-/commander-2.9.0.tgz#9c99094176e12240cb22d6c5146098400fe0f7d4" dependencies: @@ -1848,19 +1852,13 @@ debug@2.3.3: dependencies: ms "0.7.2" -debug@2.6.8: - version "2.6.8" - resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.8.tgz#e731531ca2ede27d188222427da17821d68ff4fc" - dependencies: - ms "2.0.0" - debug@2.6.9, debug@^2.1.1, debug@^2.2.0, debug@^2.6.6, debug@^2.6.8: version "2.6.9" resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f" dependencies: ms "2.0.0" -debug@^3.0.1, debug@^3.1.0: +debug@3.1.0, debug@^3.0.1, debug@^3.1.0: version "3.1.0" resolved "https://registry.yarnpkg.com/debug/-/debug-3.1.0.tgz#5bb5a0672628b64149566ba16819e61518c67261" dependencies: @@ -2046,9 +2044,9 @@ di@^0.0.1: version "0.0.1" resolved "https://registry.yarnpkg.com/di/-/di-0.0.1.tgz#806649326ceaa7caa3306d75d985ea2748ba913c" -diff@3.2.0: - version "3.2.0" - resolved "https://registry.yarnpkg.com/diff/-/diff-3.2.0.tgz#c9ce393a4b7cbd0b058a725c93df299027868ff9" +diff@3.3.1: + version "3.3.1" + resolved "https://registry.yarnpkg.com/diff/-/diff-3.3.1.tgz#aa8567a6eed03c531fc89d3f711cd0e5259dec75" diff@^3.1.0: version "3.4.0" @@ -3230,14 +3228,14 @@ glob2base@^0.0.12: dependencies: find-index "^0.1.1" -glob@7.1.1: - version "7.1.1" - resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.1.tgz#805211df04faaf1c63a3600306cdf5ade50b2ec8" +glob@7.1.2, glob@^7.0.0, glob@^7.0.3, glob@^7.0.5, glob@^7.1.1, glob@^7.1.2: + version "7.1.2" + resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.2.tgz#c19c9df9a028702d678612384a6552404c636d15" dependencies: fs.realpath "^1.0.0" inflight "^1.0.4" inherits "2" - minimatch "^3.0.2" + minimatch "^3.0.4" once "^1.3.0" path-is-absolute "^1.0.0" @@ -3260,17 +3258,6 @@ glob@^5.0.15: once "^1.3.0" path-is-absolute "^1.0.0" -glob@^7.0.0, glob@^7.0.3, glob@^7.0.5, glob@^7.1.1, glob@^7.1.2: - version "7.1.2" - resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.2.tgz#c19c9df9a028702d678612384a6552404c636d15" - dependencies: - fs.realpath "^1.0.0" - inflight "^1.0.4" - inherits "2" - minimatch "^3.0.4" - once "^1.3.0" - path-is-absolute "^1.0.0" - glob@~3.1.21: version "3.1.21" resolved "https://registry.yarnpkg.com/glob/-/glob-3.1.21.tgz#d29e0a055dea5138f4d07ed40e8982e83c2066cd" @@ -3362,9 +3349,9 @@ graceful-fs@~2.0.0: version "1.0.1" resolved "https://registry.yarnpkg.com/graceful-readlink/-/graceful-readlink-1.0.1.tgz#4cafad76bc62f02fa039b2f94e9a3dd3a391a725" -growl@1.9.2: - version "1.9.2" - resolved "https://registry.yarnpkg.com/growl/-/growl-1.9.2.tgz#0ea7743715db8d8de2c5ede1775e1b45ac85c02f" +growl@1.10.3: + version "1.10.3" + resolved "https://registry.yarnpkg.com/growl/-/growl-1.10.3.tgz#1926ba90cf3edfe2adb4927f5880bc22c66c790f" gulp-cssmin@^0.2.0: version "0.2.0" @@ -4314,15 +4301,15 @@ karma-sourcemap-loader@^0.3.7: dependencies: graceful-fs "^4.1.2" -karma-spec-reporter@^0.0.31: - version "0.0.31" - resolved "https://registry.yarnpkg.com/karma-spec-reporter/-/karma-spec-reporter-0.0.31.tgz#4830dc7148a155c7d7a186e632339a0d80fadec3" +karma-spec-reporter@^0.0.32: + version "0.0.32" + resolved "https://registry.yarnpkg.com/karma-spec-reporter/-/karma-spec-reporter-0.0.32.tgz#2e9c7207ea726771260259f82becb543209e440a" dependencies: colors "^1.1.2" -karma-webpack@^2.0.6: - version "2.0.6" - resolved "https://registry.yarnpkg.com/karma-webpack/-/karma-webpack-2.0.6.tgz#967918e59750ebe0f40829263435fde7ac81bdb4" +karma-webpack@^2.0.9: + version "2.0.9" + resolved "https://registry.yarnpkg.com/karma-webpack/-/karma-webpack-2.0.9.tgz#61c88091f7dd910635134c032b266a465affb57f" dependencies: async "~0.9.0" loader-utils "^0.2.5" @@ -4472,21 +4459,10 @@ locate-path@^2.0.0: p-locate "^2.0.0" path-exists "^3.0.0" -lodash._baseassign@^3.0.0: - version "3.2.0" - resolved "https://registry.yarnpkg.com/lodash._baseassign/-/lodash._baseassign-3.2.0.tgz#8c38a099500f215ad09e59f1722fd0c52bfe0a4e" - dependencies: - lodash._basecopy "^3.0.0" - lodash.keys "^3.0.0" - lodash._basecopy@^3.0.0: version "3.0.1" resolved "https://registry.yarnpkg.com/lodash._basecopy/-/lodash._basecopy-3.0.1.tgz#8da0e6a876cf344c0ad8a54882111dd3c5c7ca36" -lodash._basecreate@^3.0.0: - version "3.0.3" - resolved "https://registry.yarnpkg.com/lodash._basecreate/-/lodash._basecreate-3.0.3.tgz#1bc661614daa7fc311b7d03bf16806a0213cf821" - lodash._basetostring@^3.0.0: version "3.0.1" resolved "https://registry.yarnpkg.com/lodash._basetostring/-/lodash._basetostring-3.0.1.tgz#d1861d877f824a52f669832dcaf3ee15566a07d5" @@ -4574,14 +4550,6 @@ lodash.cond@^4.3.0: version "4.5.2" resolved "https://registry.yarnpkg.com/lodash.cond/-/lodash.cond-4.5.2.tgz#f471a1da486be60f6ab955d17115523dd1d255d5" -lodash.create@3.1.1: - version "3.1.1" - resolved "https://registry.yarnpkg.com/lodash.create/-/lodash.create-3.1.1.tgz#d7f2849f0dbda7e04682bb8cd72ab022461debe7" - dependencies: - lodash._baseassign "^3.0.0" - lodash._basecreate "^3.0.0" - lodash._isiterateecall "^3.0.0" - lodash.defaults@^4.0.1: version "4.2.0" resolved "https://registry.yarnpkg.com/lodash.defaults/-/lodash.defaults-4.2.0.tgz#d09178716ffea4dde9e5fb7b37f6f0802274580c" @@ -5025,22 +4993,20 @@ mkdirp@0.5.1, mkdirp@0.5.x, "mkdirp@>=0.5 0", mkdirp@^0.5.0, mkdirp@^0.5.1, mkdi dependencies: minimist "0.0.8" -mocha@^3.4.2: - version "3.5.3" - resolved "https://registry.yarnpkg.com/mocha/-/mocha-3.5.3.tgz#1e0480fe36d2da5858d1eb6acc38418b26eaa20d" +mocha@^4.0.1: + version "4.0.1" + resolved "https://registry.yarnpkg.com/mocha/-/mocha-4.0.1.tgz#0aee5a95cf69a4618820f5e51fa31717117daf1b" dependencies: browser-stdout "1.3.0" - commander "2.9.0" - debug "2.6.8" - diff "3.2.0" + commander "2.11.0" + debug "3.1.0" + diff "3.3.1" escape-string-regexp "1.0.5" - glob "7.1.1" - growl "1.9.2" + glob "7.1.2" + growl "1.10.3" he "1.1.1" - json3 "3.3.2" - lodash.create "3.1.1" mkdirp "0.5.1" - supports-color "3.1.2" + supports-color "4.4.0" module-definition@^2.2.4: version "2.2.4" @@ -7219,11 +7185,11 @@ sugarss@^1.0.0: dependencies: postcss "^6.0.14" -supports-color@3.1.2: - version "3.1.2" - resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-3.1.2.tgz#72a262894d9d408b956ca05ff37b2ed8a6e2a2d5" +supports-color@4.4.0: + version "4.4.0" + resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-4.4.0.tgz#883f7ddabc165142b2a61427f3352ded195d1a3e" dependencies: - has-flag "^1.0.0" + has-flag "^2.0.0" supports-color@^0.2.0: version "0.2.0" @@ -7750,9 +7716,9 @@ vue-lazyload@^1.1.4: version "1.1.4" resolved "https://registry.yarnpkg.com/vue-lazyload/-/vue-lazyload-1.1.4.tgz#94dbb3fcb047f147f37900c0e22ad4fd478e31c4" -vue-loader@^13.5.0: - version "13.5.0" - resolved "https://registry.yarnpkg.com/vue-loader/-/vue-loader-13.5.0.tgz#52f7b3790a267eff80012b77ea187a54586dd5d4" +vue-loader@^13.6.0: + version "13.6.0" + resolved "https://registry.yarnpkg.com/vue-loader/-/vue-loader-13.6.0.tgz#c1c9570e1e57475f8acb02cda35551b812f88086" dependencies: consolidate "^0.14.0" hash-sum "^1.0.2" @@ -7783,9 +7749,9 @@ vue-style-loader@^3.0.0: hash-sum "^1.0.2" loader-utils "^1.0.2" -vue-template-compiler@^2.5.9: - version "2.5.9" - resolved "https://registry.yarnpkg.com/vue-template-compiler/-/vue-template-compiler-2.5.9.tgz#7fabc73c8d3d12d32340cd86c5fc33e00e86d686" +vue-template-compiler@^2.5.11: + version "2.5.11" + resolved "https://registry.yarnpkg.com/vue-template-compiler/-/vue-template-compiler-2.5.11.tgz#7dda6905e464ff173c8e70e1dfd1769a7888b7e8" dependencies: de-indent "^1.0.2" he "^1.1.0" @@ -7794,9 +7760,9 @@ vue-template-es2015-compiler@^1.6.0: version "1.6.0" resolved "https://registry.yarnpkg.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.6.0.tgz#dc42697133302ce3017524356a6c61b7b69b4a18" -vue@^2.5.9: - version "2.5.9" - resolved "https://registry.yarnpkg.com/vue/-/vue-2.5.9.tgz#b2380cd040915dca69881dafd121d760952e65f7" +vue@^2.5.11: + version "2.5.11" + resolved "https://registry.yarnpkg.com/vue/-/vue-2.5.11.tgz#80ca2657aa81f03545cd8dd5a2f55454641e6405" watchpack@^1.4.0: version "1.4.0"