mirror of
https://gitee.com/ant-design-vue/ant-design-vue.git
synced 2024-12-03 04:27:41 +08:00
perf: update lazyload
This commit is contained in:
undefined
parent
2b1e972803
commit
3d17d5f26e
@ -53,59 +53,6 @@ export default {
|
||||
);
|
||||
return state;
|
||||
},
|
||||
// data() {
|
||||
// this.neverShown = false;
|
||||
// const visible =
|
||||
// 'filterDropdownVisible' in this.column ? this.column.filterDropdownVisible : false;
|
||||
// this.preProps = { ...getOptionProps(this) };
|
||||
// return {
|
||||
// sSelectedKeys: this.selectedKeys,
|
||||
// sKeyPathOfSelectedItem: {}, // 记录所有有选中子菜单的祖先菜单
|
||||
// sVisible: visible,
|
||||
// sValueKeys: generateValueMaps(this.column.filters),
|
||||
// };
|
||||
// },
|
||||
watch: {
|
||||
// _propsSymbol: syncWatch(function() {
|
||||
// const nextProps = getOptionProps(this);
|
||||
// const { column } = nextProps;
|
||||
// const newState = {};
|
||||
// /**
|
||||
// * if the state is visible the component should ignore updates on selectedKeys prop to avoid
|
||||
// * that the user selection is lost
|
||||
// * this happens frequently when a table is connected on some sort of realtime data
|
||||
// * Fixes https://github.com/ant-design/ant-design/issues/10289 and
|
||||
// * https://github.com/ant-design/ant-design/issues/10209
|
||||
// */
|
||||
// if (
|
||||
// 'selectedKeys' in nextProps &&
|
||||
// !shallowequal(this.preProps.selectedKeys, nextProps.selectedKeys)
|
||||
// ) {
|
||||
// newState.sSelectedKeys = nextProps.selectedKeys;
|
||||
// }
|
||||
// if (!shallowequal((this.preProps.column || {}).filters, (nextProps.column || {}).filters)) {
|
||||
// newState.sValueKeys = generateValueMaps(nextProps.column.filters);
|
||||
// }
|
||||
// if ('filterDropdownVisible' in column) {
|
||||
// newState.sVisible = column.filterDropdownVisible;
|
||||
// }
|
||||
// if (Object.keys(newState).length > 0) {
|
||||
// this.setState(newState);
|
||||
// }
|
||||
// this.preProps = { ...nextProps };
|
||||
// }),
|
||||
// 'column.fixed': function (val) {
|
||||
// this.setNeverShown(this.column)
|
||||
// },
|
||||
// column (val) {
|
||||
// if ('filterDropdownVisible' in val) {
|
||||
// this.sVisible = val.filterDropdownVisible
|
||||
// }
|
||||
// },
|
||||
// selectedKeys (val) {
|
||||
// this.sSelectedKeys = val
|
||||
// },
|
||||
},
|
||||
|
||||
mounted() {
|
||||
const { column } = this;
|
||||
|
||||
@ -195,7 +195,6 @@ export const SelectionBoxProps = {
|
||||
// }
|
||||
|
||||
export const FilterMenuProps = {
|
||||
_propsSymbol: PropTypes.any,
|
||||
locale: TableLocale,
|
||||
selectedKeys: PropTypes.arrayOf([PropTypes.string, PropTypes.number]),
|
||||
column: PropTypes.object,
|
||||
|
||||
@ -56,11 +56,7 @@ export default {
|
||||
debounce: false,
|
||||
...lazy,
|
||||
};
|
||||
children = (
|
||||
<Lazyload {...lazyProps} _propsSymbol={[]}>
|
||||
{listItem}
|
||||
</Lazyload>
|
||||
);
|
||||
children = <Lazyload {...lazyProps}>{listItem}</Lazyload>;
|
||||
} else {
|
||||
children = listItem;
|
||||
}
|
||||
|
||||
@ -7,6 +7,7 @@ import debounce from 'lodash/debounce';
|
||||
import throttle from 'lodash/throttle';
|
||||
import parentScroll from './utils/parentScroll';
|
||||
import inViewport from './utils/inViewport';
|
||||
import { watchEffect } from 'vue';
|
||||
|
||||
const lazyLoadProps = {
|
||||
debounce: PropTypes.bool,
|
||||
@ -22,7 +23,6 @@ const lazyLoadProps = {
|
||||
threshold: PropTypes.number,
|
||||
throttle: PropTypes.number,
|
||||
width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
|
||||
_propsSymbol: PropTypes.any,
|
||||
};
|
||||
|
||||
export default {
|
||||
@ -53,20 +53,15 @@ export default {
|
||||
visible: false,
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
_propsSymbol() {
|
||||
if (!this.visible) {
|
||||
this.lazyLoadHandler();
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this._mounted = true;
|
||||
watchEffect(() => {
|
||||
if (!this.visible) {
|
||||
this.lazyLoadHandler(this.$props);
|
||||
}
|
||||
});
|
||||
const eventNode = this.getEventNode();
|
||||
|
||||
this.lazyLoadHandler();
|
||||
|
||||
if (this.lazyLoadHandler.flush) {
|
||||
this.lazyLoadHandler.flush();
|
||||
}
|
||||
@ -75,7 +70,6 @@ export default {
|
||||
});
|
||||
},
|
||||
beforeUnmount() {
|
||||
this._mounted = false;
|
||||
if (this.lazyLoadHandler.cancel) {
|
||||
this.lazyLoadHandler.cancel();
|
||||
}
|
||||
@ -110,7 +104,7 @@ export default {
|
||||
};
|
||||
},
|
||||
lazyLoadHandler() {
|
||||
if (!this._mounted) {
|
||||
if (!this._.isMounted) {
|
||||
return;
|
||||
}
|
||||
const offset = this.getOffset();
|
||||
|
||||
120
examples/App.vue
120
examples/App.vue
@ -11,125 +11,15 @@ Use Drawer to quickly preview details of an object, such as those in a list.
|
||||
```vue
|
||||
<template>
|
||||
<div>
|
||||
<a-list
|
||||
:data-source="[
|
||||
{
|
||||
name: 'Lily',
|
||||
},
|
||||
{
|
||||
name: 'Lily',
|
||||
},
|
||||
]"
|
||||
bordered
|
||||
>
|
||||
<template v-slot:renderItem="{ item }">
|
||||
<a-list-item :key="`a-${item.id}`">
|
||||
<template v-slot:actions>
|
||||
<a @click="showDrawer">View Profile</a>
|
||||
</template>
|
||||
<a-list-item-meta description="Progresser XTech">
|
||||
<template v-slot:title>
|
||||
<a href="https://www.antdv.com/">{{ item.name }}</a>
|
||||
</template>
|
||||
<template v-slot:avatar>
|
||||
<a-avatar src="https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png" />
|
||||
</template>
|
||||
</a-list-item-meta>
|
||||
</a-list-item>
|
||||
</template>
|
||||
</a-list>
|
||||
<a-drawer width="640" placement="right" :closable="false" :visible="visible" @close="onClose">
|
||||
<p :style="[pStyle, pStyle2]">User Profile</p>
|
||||
<p :style="pStyle">Personal</p>
|
||||
<a-row>
|
||||
<a-col :span="12">
|
||||
<description-item title="Full Name" content="Lily" />
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<description-item title="Account" content="AntDesign@example.com" />
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row>
|
||||
<a-col :span="12">
|
||||
<description-item title="City" content="HangZhou" />
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<description-item title="Country" content="China🇨🇳" />
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row>
|
||||
<a-col :span="12">
|
||||
<description-item title="Birthday" content="February 2,1900" />
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<description-item title="Website" content="-" />
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row>
|
||||
<a-col :span="12">
|
||||
<description-item
|
||||
title="Message"
|
||||
content="Make things as simple as possible but no simpler."
|
||||
/>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-divider />
|
||||
<p :style="pStyle">Company</p>
|
||||
<a-row>
|
||||
<a-col :span="12">
|
||||
<description-item title="Position" content="Programmer" />
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<description-item title="Responsibilities" content="Coding" />
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row>
|
||||
<a-col :span="12">
|
||||
<description-item title="Department" content="XTech" />
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<description-item title="Supervisor">
|
||||
<template v-slot:content>
|
||||
<a>Lin</a>
|
||||
</template>
|
||||
</description-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row>
|
||||
<a-col :span="24">
|
||||
<description-item
|
||||
title="Skills"
|
||||
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."
|
||||
/>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-divider />
|
||||
<p :style="pStyle">Contacts</p>
|
||||
<a-row>
|
||||
<a-col :span="12">
|
||||
<description-item title="Email" content="ant-design-vue@example.com" />
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<description-item title="Phone Number" content="+86 181 0000 0000" />
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row>
|
||||
<a-col :span="24">
|
||||
<description-item title="Github">
|
||||
<template v-slot:content>
|
||||
<a href="https://github.com/vueComponent/ant-design-vue"
|
||||
>github.com/vueComponent/ant-design-vue</a
|
||||
>
|
||||
</template>
|
||||
</description-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-drawer>
|
||||
<demo />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import demo from '../antdv-demo/docs/transfer/demo/basic.md';
|
||||
export default {
|
||||
components: {},
|
||||
components: {
|
||||
demo,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user