Skip to content

Commit 3d17d5f

Browse files
author
undefined
committed
perf: update lazyload
1 parent 2b1e972 commit 3d17d5f

File tree

5 files changed

+13
-187
lines changed

5 files changed

+13
-187
lines changed

‎components/table/filterDropdown.jsx‎

Lines changed: 0 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -53,59 +53,6 @@ export default {
5353
);
5454
return state;
5555
},
56-
// data() {
57-
// this.neverShown = false;
58-
// const visible =
59-
// 'filterDropdownVisible' in this.column ? this.column.filterDropdownVisible : false;
60-
// this.preProps = { ...getOptionProps(this) };
61-
// return {
62-
// sSelectedKeys: this.selectedKeys,
63-
// sKeyPathOfSelectedItem: {}, // 记录所有有选中子菜单的祖先菜单
64-
// sVisible: visible,
65-
// sValueKeys: generateValueMaps(this.column.filters),
66-
// };
67-
// },
68-
watch: {
69-
// _propsSymbol: syncWatch(function() {
70-
// const nextProps = getOptionProps(this);
71-
// const { column } = nextProps;
72-
// const newState = {};
73-
// /**
74-
// * if the state is visible the component should ignore updates on selectedKeys prop to avoid
75-
// * that the user selection is lost
76-
// * this happens frequently when a table is connected on some sort of realtime data
77-
// * Fixes https://github.com/ant-design/ant-design/issues/10289 and
78-
// * https://github.com/ant-design/ant-design/issues/10209
79-
// */
80-
// if (
81-
// 'selectedKeys' in nextProps &&
82-
// !shallowequal(this.preProps.selectedKeys, nextProps.selectedKeys)
83-
// ) {
84-
// newState.sSelectedKeys = nextProps.selectedKeys;
85-
// }
86-
// if (!shallowequal((this.preProps.column || {}).filters, (nextProps.column || {}).filters)) {
87-
// newState.sValueKeys = generateValueMaps(nextProps.column.filters);
88-
// }
89-
// if ('filterDropdownVisible' in column) {
90-
// newState.sVisible = column.filterDropdownVisible;
91-
// }
92-
// if (Object.keys(newState).length > 0) {
93-
// this.setState(newState);
94-
// }
95-
// this.preProps = { ...nextProps };
96-
// }),
97-
// 'column.fixed': function (val) {
98-
// this.setNeverShown(this.column)
99-
// },
100-
// column (val) {
101-
// if ('filterDropdownVisible' in val) {
102-
// this.sVisible = val.filterDropdownVisible
103-
// }
104-
// },
105-
// selectedKeys (val) {
106-
// this.sSelectedKeys = val
107-
// },
108-
},
10956

11057
mounted() {
11158
const { column } = this;

‎components/table/interface.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -195,7 +195,6 @@ export const SelectionBoxProps = {
195195
// }
196196

197197
export const FilterMenuProps = {
198-
_propsSymbol: PropTypes.any,
199198
locale: TableLocale,
200199
selectedKeys: PropTypes.arrayOf([PropTypes.string, PropTypes.number]),
201200
column: PropTypes.object,

‎components/transfer/ListItem.jsx‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -56,11 +56,7 @@ export default {
5656
debounce: false,
5757
...lazy,
5858
};
59-
children = (
60-
<Lazyload {...lazyProps} _propsSymbol={[]}>
61-
{listItem}
62-
</Lazyload>
63-
);
59+
children = <Lazyload {...lazyProps}>{listItem}</Lazyload>;
6460
} else {
6561
children = listItem;
6662
}

‎components/vc-lazy-load/src/LazyLoad.jsx‎

Lines changed: 7 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import debounce from 'lodash/debounce';
77
import throttle from 'lodash/throttle';
88
import parentScroll from './utils/parentScroll';
99
import inViewport from './utils/inViewport';
10+
import { watchEffect } from 'vue';
1011

1112
const lazyLoadProps = {
1213
debounce: PropTypes.bool,
@@ -22,7 +23,6 @@ const lazyLoadProps = {
2223
threshold: PropTypes.number,
2324
throttle: PropTypes.number,
2425
width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
25-
_propsSymbol: PropTypes.any,
2626
};
2727

2828
export default {
@@ -53,20 +53,15 @@ export default {
5353
visible: false,
5454
};
5555
},
56-
watch: {
57-
_propsSymbol() {
58-
if (!this.visible) {
59-
this.lazyLoadHandler();
60-
}
61-
},
62-
},
6356
mounted() {
6457
this.$nextTick(() => {
65-
this._mounted = true;
58+
watchEffect(() => {
59+
if (!this.visible) {
60+
this.lazyLoadHandler(this.$props);
61+
}
62+
});
6663
const eventNode = this.getEventNode();
6764

68-
this.lazyLoadHandler();
69-
7065
if (this.lazyLoadHandler.flush) {
7166
this.lazyLoadHandler.flush();
7267
}
@@ -75,7 +70,6 @@ export default {
7570
});
7671
},
7772
beforeUnmount() {
78-
this._mounted = false;
7973
if (this.lazyLoadHandler.cancel) {
8074
this.lazyLoadHandler.cancel();
8175
}
@@ -110,7 +104,7 @@ export default {
110104
};
111105
},
112106
lazyLoadHandler() {
113-
if (!this._mounted) {
107+
if (!this._.isMounted) {
114108
return;
115109
}
116110
const offset = this.getOffset();

‎examples/App.vue‎

Lines changed: 5 additions & 115 deletions
Original file line numberDiff line numberDiff line change
@@ -11,125 +11,15 @@ Use Drawer to quickly preview details of an object, such as those in a list.
1111
```vue
1212
<template>
1313
<div>
14-
<a-list
15-
:data-source="[
16-
{
17-
name: 'Lily',
18-
},
19-
{
20-
name: 'Lily',
21-
},
22-
]"
23-
bordered
24-
>
25-
<template v-slot:renderItem="{ item }">
26-
<a-list-item :key="`a-${item.id}`">
27-
<template v-slot:actions>
28-
<a @click="showDrawer">View Profile</a>
29-
</template>
30-
<a-list-item-meta description="Progresser XTech">
31-
<template v-slot:title>
32-
<a href="https://www.antdv.com/">{{ item.name }}</a>
33-
</template>
34-
<template v-slot:avatar>
35-
<a-avatar src="https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png" />
36-
</template>
37-
</a-list-item-meta>
38-
</a-list-item>
39-
</template>
40-
</a-list>
41-
<a-drawer width="640" placement="right" :closable="false" :visible="visible" @close="onClose">
42-
<p :style="[pStyle, pStyle2]">User Profile</p>
43-
<p :style="pStyle">Personal</p>
44-
<a-row>
45-
<a-col :span="12">
46-
<description-item title="Full Name" content="Lily" />
47-
</a-col>
48-
<a-col :span="12">
49-
<description-item title="Account" content="AntDesign@example.com" />
50-
</a-col>
51-
</a-row>
52-
<a-row>
53-
<a-col :span="12">
54-
<description-item title="City" content="HangZhou" />
55-
</a-col>
56-
<a-col :span="12">
57-
<description-item title="Country" content="China🇨🇳" />
58-
</a-col>
59-
</a-row>
60-
<a-row>
61-
<a-col :span="12">
62-
<description-item title="Birthday" content="February 2,1900" />
63-
</a-col>
64-
<a-col :span="12">
65-
<description-item title="Website" content="-" />
66-
</a-col>
67-
</a-row>
68-
<a-row>
69-
<a-col :span="12">
70-
<description-item
71-
title="Message"
72-
content="Make things as simple as possible but no simpler."
73-
/>
74-
</a-col>
75-
</a-row>
76-
<a-divider />
77-
<p :style="pStyle">Company</p>
78-
<a-row>
79-
<a-col :span="12">
80-
<description-item title="Position" content="Programmer" />
81-
</a-col>
82-
<a-col :span="12">
83-
<description-item title="Responsibilities" content="Coding" />
84-
</a-col>
85-
</a-row>
86-
<a-row>
87-
<a-col :span="12">
88-
<description-item title="Department" content="XTech" />
89-
</a-col>
90-
<a-col :span="12">
91-
<description-item title="Supervisor">
92-
<template v-slot:content>
93-
<a>Lin</a>
94-
</template>
95-
</description-item>
96-
</a-col>
97-
</a-row>
98-
<a-row>
99-
<a-col :span="24">
100-
<description-item
101-
title="Skills"
102-
content="C / C + +, data structures, software engineering, operating systems, computer networks, databases, compiler theory, computer architecture, Microcomputer Principle and Interface Technology, Computer English, Java, ASP, etc."
103-
/>
104-
</a-col>
105-
</a-row>
106-
<a-divider />
107-
<p :style="pStyle">Contacts</p>
108-
<a-row>
109-
<a-col :span="12">
110-
<description-item title="Email" content="ant-design-vue@example.com" />
111-
</a-col>
112-
<a-col :span="12">
113-
<description-item title="Phone Number" content="+86 181 0000 0000" />
114-
</a-col>
115-
</a-row>
116-
<a-row>
117-
<a-col :span="24">
118-
<description-item title="Github">
119-
<template v-slot:content>
120-
<a href="https://github.com/vueComponent/ant-design-vue"
121-
>github.com/vueComponent/ant-design-vue</a
122-
>
123-
</template>
124-
</description-item>
125-
</a-col>
126-
</a-row>
127-
</a-drawer>
14+
<demo />
12815
</div>
12916
</template>
13017
<script>
18+
import demo from '../antdv-demo/docs/transfer/demo/basic.md';
13119
export default {
132-
components: {},
20+
components: {
21+
demo,
22+
},
13323
data() {
13424
return {
13525
visible: false,

0 commit comments

Comments
 (0)