[new feature] Area add 'title' prop & optimzie Picker performance (#450)

This commit is contained in:
neverland 2017-12-19 09:51:09 +08:00 committed by GitHub
parent 72d4365dfc
commit 48b2026e33
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 107 additions and 136 deletions

View File

@ -9,7 +9,7 @@
</demo-block>
<demo-block :title="$t('title3')">
<van-area :areaList="$t('areaList')" :columnsNum="2" />
<van-area :areaList="$t('areaList')" :columnsNum="2" :title="$t('title')" />
</demo-block>
</demo-section>
</template>
@ -34,7 +34,6 @@ export default {
data() {
return {
areaList: AreaList,
value: '110101'
};
}

View File

@ -32,7 +32,7 @@ To have a selected valuesimply pass the `code` of target area to `value` prop
Set `columnsNum` with 2, you'll have a 2 level picker.
```html
<van-area :areaList="areaList" :columnsNum="2" />
<van-area :areaList="areaList" :columnsNum="2" title="Title" />
```
@ -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 | - |

View File

@ -33,7 +33,7 @@ Vue.use(Area);
可以通过`columnsNum`属性配置省市县显示的列数,默认情况下会显示省市县,当你设置为`2`,则只会显示省市选择。
```html
<van-area :areaList="areaList" :columnsNum="2" />
<van-area :areaList="areaList" :columnsNum="2" title="标题" />
```
### 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 | - |

View File

@ -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",

View File

@ -3,11 +3,12 @@
<picker
ref="picker"
showToolbar
:title="title"
valueKey="name"
:columns="areaColumns"
@change="onChange"
@confirm="$emit('confirm', $event)"
@cancel="$emit('cancel')"
@cancel="$emit('cancel', $event)"
/>
</div>
</template>
@ -29,6 +30,7 @@ export default create({
props: {
value: {},
title: String,
areaList: Object,
// 3-2-1-
columnsNum: {

View File

@ -1,14 +1,15 @@
<template>
<div class="van-picker-column" :class="className" :style="columnStyle">
<div class="van-picker-column__frame van-hairline--top-bottom" :style="frameStyle" />
<ul
:style="wrapperStyle"
@touchstart="onTouchStart"
@touchmove.prevent="onTouchMove"
@touchend="onTouchEnd"
@touchcancel="onTouchEnd"
>
<div
class="van-picker-column"
:class="className"
:style="columnStyle"
@touchstart="onTouchStart"
@touchmove.prevent="onTouchMove"
@touchend="onTouchEnd"
@touchcancel="onTouchEnd"
>
<ul :style="wrapperStyle">
<li
v-for="(option, index) in options"
v-text="getOptionText(option)"
@ -34,14 +35,11 @@ export default create({
props: {
valueKey: String,
className: String,
itemHeight: Number,
options: {
type: Array,
default: () => []
},
itemHeight: {
type: Number,
default: 44
},
visibileColumnCount: {
type: Number,
default: 5
@ -95,6 +93,10 @@ export default create({
return this.options.length;
},
baseOffset() {
return this.itemHeight * (this.visibileColumnCount - 1) / 2;
},
columnStyle() {
return {
height: (this.itemHeight * this.visibileColumnCount) + 'px'
@ -104,15 +106,8 @@ export default create({
wrapperStyle() {
return {
transition: `${this.duration}ms`,
transform: `translate3d(0, ${this.offset}px, 0)`,
lineHeight: this.itemHeight + 'px',
padding: `${this.itemHeight * (this.visibileColumnCount - 1) / 2}px 0`
};
},
frameStyle() {
return {
height: this.itemHeight + 'px'
transform: `translate3d(0, ${this.offset + this.baseOffset}px, 0)`,
lineHeight: this.itemHeight + 'px'
};
},

View File

@ -19,6 +19,7 @@
:visibileColumnCount="visibileColumnCount"
@change="onChange(index)"
/>
<div class="van-picker__frame van-hairline--top-bottom" :style="frameStyle" />
</div>
</div>
</template>
@ -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);

View File

@ -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%);
}
}
}

View File

@ -13,7 +13,7 @@
font-size: 12px;
line-height: 18px;
padding: 10px 10px;
background-color: #fff6e1;
background-color: #fff7cc;
}
&__bar {

View File

@ -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);

130
yarn.lock
View File

@ -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"