alighasami/vant
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

[Improvement] Picker: optimize render performance (#1391)

Browse Source
This commit is contained in:
neverland
2018-07-03 23:36:36 +08:00
committed by GitHub
parent 6adf501441
commit 7f4ad6a28d
5 changed files with 50 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/picker/test/__snapshots__/demo.spec.js.snap
+5 -5
View File
@@ -26,9 +26,9 @@ exports[`renders demo correctly 1`] = `
<!---->
<div class="van-picker__columns" style="height:220px;">
<div class="van-picker-column" style="height:220px;">
<ul style="transition:0ms;transform:translate3d(0, 88px, 0);line-height:44px;">
<li class="van-ellipsis van-picker-column__item van-picker-column__item--disabled van-picker-column__item--selected">杭州</li>
<li class="van-ellipsis van-picker-column__item">宁波</li>
<ul style="transition:0ms;transform:translate3d(0, 44px, 0);line-height:44px;">
<li class="van-ellipsis van-picker-column__item van-picker-column__item--disabled">杭州</li>
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected">宁波</li>
<li class="van-ellipsis van-picker-column__item">温州</li>
</ul>
</div>
@@ -70,7 +70,7 @@ exports[`renders demo correctly 1`] = `
</ul>
</div>
<div class="van-picker-column column2" style="height:220px;">
<ul style="transition:0ms;transform:translate3d(0, 88px, 0);line-height:44px;">
<ul style="transition:0ms;transform:translate3d(0, 0px, 0);line-height:44px;">
<li class="van-ellipsis van-picker-column__item">杭州</li>
<li class="van-ellipsis van-picker-column__item">宁波</li>
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected">温州</li>
@@ -96,7 +96,7 @@ exports[`renders demo correctly 1`] = `
</ul>
</div>
<div class="van-picker-column column2" style="height:220px;">
<ul style="transition:0ms;transform:translate3d(0, 88px, 0);line-height:44px;">
<ul style="transition:0ms;transform:translate3d(0, 0px, 0);line-height:44px;">
<li class="van-ellipsis van-picker-column__item">杭州</li>
<li class="van-ellipsis van-picker-column__item">宁波</li>
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected">温州</li>
packages/picker/test/__snapshots__/index.spec.js.snap
+2 -13
View File
@@ -18,8 +18,8 @@ exports[`column watch default index 2`] = `
<div class="van-picker-column">
<ul style="line-height: 50px;">
<li class="van-ellipsis van-picker-column__item van-picker-column__item--disabled">1</li>
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected">1990</li>
<li class="van-ellipsis van-picker-column__item">1991</li>
<li class="van-ellipsis van-picker-column__item">1990</li>
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected">1991</li>
<li class="van-ellipsis van-picker-column__item">1992</li>
<li class="van-ellipsis van-picker-column__item">1993</li>
<li class="van-ellipsis van-picker-column__item">1994</li>
@@ -27,14 +27,3 @@ exports[`column watch default index 2`] = `
</ul>
</div>
`;
exports[`column watch default index 3`] = `
<div class="van-picker-column">
<ul style="line-height: 50px;">
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected">1</li>
<li class="van-ellipsis van-picker-column__item van-picker-column__item--disabled">1</li>
<li class="van-ellipsis van-picker-column__item van-picker-column__item--disabled">1</li>
<li class="van-ellipsis van-picker-column__item van-picker-column__item--disabled">1</li>
</ul>
</div>
`;
packages/picker/test/index.spec.js
+5 -7
View File
@@ -1,6 +1,6 @@
import Picker from '../';
import PickerColumn from '../PickerColumn';
import { mount, triggerDrag } from '../../../test/utils';
import { mount, triggerDrag, later } from '../../../test/utils';
const simpleColumn = ['1990', '1991', '1992', '1993', '1994', '1995'];
const columns = [
@@ -101,21 +101,19 @@ test('drag simple columns', () => {
expect(wrapper.emitted('change')[0][1]).toEqual('1992');
});
test('column watch default index', () => {
test('column watch default index', async() => {
const disabled = { disabled: true, text: 1 };
const wrapper = mount(PickerColumn, {
propsData: {
initialOptions: [disabled, ...simpleColumn],
valueKey: 'text',
itemHeight: 50
}
});
wrapper.vm.options = [disabled, ...simpleColumn];
await later();
expect(wrapper).toMatchSnapshot();
wrapper.vm.options = [disabled, ...simpleColumn];
expect(wrapper).toMatchSnapshot();
wrapper.vm.options = [1, disabled, disabled, disabled];
wrapper.vm.defaultIndex = 2;
expect(wrapper).toMatchSnapshot();
});