github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat: update lazyload

pull/2682/head
tangjinzhou 2020-07-18 21:54:46 +08:00
parent 1abc37403d
commit 9cf6fe1c4e
1 changed files with 13 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
components/vc-lazy-load/src/LazyLoad.jsx
View File

@ -1,7 +1,7 @@
import PropTypes from '../../_util/vue-types'; import PropTypes from '../../_util/vue-types';
import BaseMixin from '../../_util/BaseMixin'; import BaseMixin from '../../_util/BaseMixin';
import addEventListener from '../../vc-util/Dom/addEventListener'; import addEventListener from '../../vc-util/Dom/addEventListener';
import { initDefaultProps } from '../../_util/props-util'; import { initDefaultProps, findDOMNode, getSlot } from '../../_util/props-util';
import warning from '../../_util/warning'; import warning from '../../_util/warning';
import debounce from 'lodash/debounce'; import debounce from 'lodash/debounce';
import throttle from 'lodash/throttle'; import throttle from 'lodash/throttle';
@ -28,6 +28,7 @@ const lazyLoadProps = {
export default { export default {
name: 'LazyLoad', name: 'LazyLoad',
mixins: [BaseMixin], mixins: [BaseMixin],
inheritAttrs: false,
props: initDefaultProps(lazyLoadProps, { props: initDefaultProps(lazyLoadProps, {
elementType: 'div', elementType: 'div',
debounce: true, debounce: true,
@ -83,7 +84,7 @@ export default {
}, },
methods: { methods: {
getEventNode() { getEventNode() {
return parentScroll(this.$el); return parentScroll(findDOMNode(this));
}, },
getOffset() { getOffset() {
const { const {
@ -113,7 +114,7 @@ export default {
return; return;
} }
const offset = this.getOffset(); const offset = this.getOffset();
const node = this.$el; const node = findDOMNode(this);
const eventNode = this.getEventNode(); const eventNode = this.getEventNode();
if (inViewport(node, eventNode, offset)) { if (inViewport(node, eventNode, offset)) {
@ -128,14 +129,15 @@ export default {
this.scrollHander && this.scrollHander.remove(); this.scrollHander && this.scrollHander.remove();
}, },
}, },
render(createElement) { render() {
const children = this.$slots.default; const children = getSlot(this);
if (children.length !== 1) { if (children.length !== 1) {
warning(false, 'lazyLoad组件只能包含一个子元素'); warning(false, 'lazyLoad组件只能包含一个子元素');
return null; return null;
} }
const { height, width, elementType } = this.$props; const { height, width, elementType: ElementType } = this.$props;
const { visible } = this; const { visible } = this;
const { class: className } = this.$attrs;
const elStyles = { const elStyles = {
height: typeof height === 'number' ? height + 'px' : height, height: typeof height === 'number' ? height + 'px' : height,
@ -144,15 +146,12 @@ export default {
const elClasses = { const elClasses = {
LazyLoad: true, LazyLoad: true,
'is-visible': visible, 'is-visible': visible,
[className]: className,
}; };
return (
return createElement( <ElementType class={elClasses} style={elStyles}>
elementType, {visible ? children[0] : null}
{ </ElementType>
class: elClasses,
style: elStyles,
},
[visible ? children[0] : null],
); );
}, },
}; };