perf: update lazyload
undefined
parent
2b1e972803
commit
3d17d5f26e
|
|
@ -53,59 +53,6 @@ export default {
|
||||||
);
|
);
|
||||||
return state;
|
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() {
|
mounted() {
|
||||||
const { column } = this;
|
const { column } = this;
|
||||||
|
|
|
||||||
|
|
@ -195,7 +195,6 @@ export const SelectionBoxProps = {
|
||||||
// }
|
// }
|
||||||
|
|
||||||
export const FilterMenuProps = {
|
export const FilterMenuProps = {
|
||||||
_propsSymbol: PropTypes.any,
|
|
||||||
locale: TableLocale,
|
locale: TableLocale,
|
||||||
selectedKeys: PropTypes.arrayOf([PropTypes.string, PropTypes.number]),
|
selectedKeys: PropTypes.arrayOf([PropTypes.string, PropTypes.number]),
|
||||||
column: PropTypes.object,
|
column: PropTypes.object,
|
||||||
|
|
|
||||||
|
|
@ -56,11 +56,7 @@ export default {
|
||||||
debounce: false,
|
debounce: false,
|
||||||
...lazy,
|
...lazy,
|
||||||
};
|
};
|
||||||
children = (
|
children = <Lazyload {...lazyProps}>{listItem}</Lazyload>;
|
||||||
<Lazyload {...lazyProps} _propsSymbol={[]}>
|
|
||||||
{listItem}
|
|
||||||
</Lazyload>
|
|
||||||
);
|
|
||||||
} else {
|
} else {
|
||||||
children = listItem;
|
children = listItem;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -7,6 +7,7 @@ import debounce from 'lodash/debounce';
|
||||||
import throttle from 'lodash/throttle';
|
import throttle from 'lodash/throttle';
|
||||||
import parentScroll from './utils/parentScroll';
|
import parentScroll from './utils/parentScroll';
|
||||||
import inViewport from './utils/inViewport';
|
import inViewport from './utils/inViewport';
|
||||||
|
import { watchEffect } from 'vue';
|
||||||
|
|
||||||
const lazyLoadProps = {
|
const lazyLoadProps = {
|
||||||
debounce: PropTypes.bool,
|
debounce: PropTypes.bool,
|
||||||
|
|
@ -22,7 +23,6 @@ const lazyLoadProps = {
|
||||||
threshold: PropTypes.number,
|
threshold: PropTypes.number,
|
||||||
throttle: PropTypes.number,
|
throttle: PropTypes.number,
|
||||||
width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
|
width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
|
||||||
_propsSymbol: PropTypes.any,
|
|
||||||
};
|
};
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
|
|
@ -53,20 +53,15 @@ export default {
|
||||||
visible: false,
|
visible: false,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
watch: {
|
|
||||||
_propsSymbol() {
|
|
||||||
if (!this.visible) {
|
|
||||||
this.lazyLoadHandler();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
mounted() {
|
mounted() {
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
this._mounted = true;
|
watchEffect(() => {
|
||||||
|
if (!this.visible) {
|
||||||
|
this.lazyLoadHandler(this.$props);
|
||||||
|
}
|
||||||
|
});
|
||||||
const eventNode = this.getEventNode();
|
const eventNode = this.getEventNode();
|
||||||
|
|
||||||
this.lazyLoadHandler();
|
|
||||||
|
|
||||||
if (this.lazyLoadHandler.flush) {
|
if (this.lazyLoadHandler.flush) {
|
||||||
this.lazyLoadHandler.flush();
|
this.lazyLoadHandler.flush();
|
||||||
}
|
}
|
||||||
|
|
@ -75,7 +70,6 @@ export default {
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
beforeUnmount() {
|
beforeUnmount() {
|
||||||
this._mounted = false;
|
|
||||||
if (this.lazyLoadHandler.cancel) {
|
if (this.lazyLoadHandler.cancel) {
|
||||||
this.lazyLoadHandler.cancel();
|
this.lazyLoadHandler.cancel();
|
||||||
}
|
}
|
||||||
|
|
@ -110,7 +104,7 @@ export default {
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
lazyLoadHandler() {
|
lazyLoadHandler() {
|
||||||
if (!this._mounted) {
|
if (!this._.isMounted) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
const offset = this.getOffset();
|
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
|
```vue
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<a-list
|
<demo />
|
||||||
: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>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
|
import demo from '../antdv-demo/docs/transfer/demo/basic.md';
|
||||||
export default {
|
export default {
|
||||||
components: {},
|
components: {
|
||||||
|
demo,
|
||||||
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
visible: false,
|
visible: false,
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue