style: remove not use pkg
tangjinzhou
parent
41f4187593
commit
a9a2b782b5
|
|
@ -1,2 +0,0 @@
|
|||
import LazyLoad from './src/LazyLoad';
|
||||
export default LazyLoad;
|
||||
|
|
@ -1,151 +0,0 @@
|
|||
import PropTypes from '../../_util/vue-types';
|
||||
import BaseMixin from '../../_util/BaseMixin';
|
||||
import addEventListener from '../../vc-util/Dom/addEventListener';
|
||||
import { initDefaultProps, findDOMNode, getSlot } from '../../_util/props-util';
|
||||
import warning from '../../_util/warning';
|
||||
import debounce from 'lodash-es/debounce';
|
||||
import throttle from 'lodash-es/throttle';
|
||||
import parentScroll from './utils/parentScroll';
|
||||
import inViewport from './utils/inViewport';
|
||||
import { watchEffect, defineComponent } from 'vue';
|
||||
|
||||
const lazyLoadProps = {
|
||||
debounce: PropTypes.looseBool,
|
||||
elementType: PropTypes.string,
|
||||
height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
|
||||
offset: PropTypes.number,
|
||||
offsetBottom: PropTypes.number,
|
||||
offsetHorizontal: PropTypes.number,
|
||||
offsetLeft: PropTypes.number,
|
||||
offsetRight: PropTypes.number,
|
||||
offsetTop: PropTypes.number,
|
||||
offsetVertical: PropTypes.number,
|
||||
threshold: PropTypes.number,
|
||||
throttle: PropTypes.number,
|
||||
width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
|
||||
};
|
||||
|
||||
export default defineComponent({
|
||||
name: 'LazyLoad',
|
||||
mixins: [BaseMixin],
|
||||
inheritAttrs: false,
|
||||
props: initDefaultProps(lazyLoadProps, {
|
||||
elementType: 'div',
|
||||
debounce: true,
|
||||
offset: 0,
|
||||
offsetBottom: 0,
|
||||
offsetHorizontal: 0,
|
||||
offsetLeft: 0,
|
||||
offsetRight: 0,
|
||||
offsetTop: 0,
|
||||
offsetVertical: 0,
|
||||
throttle: 250,
|
||||
}),
|
||||
data() {
|
||||
if (this.throttle > 0) {
|
||||
if (this.debounce) {
|
||||
this.lazyLoadHandler = debounce(this.lazyLoadHandler, this.throttle);
|
||||
} else {
|
||||
this.lazyLoadHandler = throttle(this.lazyLoadHandler, this.throttle);
|
||||
}
|
||||
}
|
||||
return {
|
||||
visible: false,
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
watchEffect(() => {
|
||||
if (!this.visible) {
|
||||
this.lazyLoadHandler(this.$props);
|
||||
}
|
||||
});
|
||||
const eventNode = this.getEventNode();
|
||||
|
||||
if (this.lazyLoadHandler.flush) {
|
||||
this.lazyLoadHandler.flush();
|
||||
}
|
||||
this.resizeHander = addEventListener(window, 'resize', this.lazyLoadHandler);
|
||||
this.scrollHander = addEventListener(eventNode, 'scroll', this.lazyLoadHandler);
|
||||
});
|
||||
},
|
||||
beforeUnmount() {
|
||||
if (this.lazyLoadHandler.cancel) {
|
||||
this.lazyLoadHandler.cancel();
|
||||
}
|
||||
|
||||
this.detachListeners();
|
||||
},
|
||||
methods: {
|
||||
getEventNode() {
|
||||
return parentScroll(findDOMNode(this));
|
||||
},
|
||||
getOffset() {
|
||||
const {
|
||||
offset,
|
||||
offsetVertical,
|
||||
offsetHorizontal,
|
||||
offsetTop,
|
||||
offsetBottom,
|
||||
offsetLeft,
|
||||
offsetRight,
|
||||
threshold,
|
||||
} = this.$props;
|
||||
|
||||
const _offsetAll = threshold || offset;
|
||||
const _offsetVertical = offsetVertical || _offsetAll;
|
||||
const _offsetHorizontal = offsetHorizontal || _offsetAll;
|
||||
|
||||
return {
|
||||
top: offsetTop || _offsetVertical,
|
||||
bottom: offsetBottom || _offsetVertical,
|
||||
left: offsetLeft || _offsetHorizontal,
|
||||
right: offsetRight || _offsetHorizontal,
|
||||
};
|
||||
},
|
||||
lazyLoadHandler() {
|
||||
if (!this._.isMounted) {
|
||||
return;
|
||||
}
|
||||
const offset = this.getOffset();
|
||||
const node = findDOMNode(this);
|
||||
const eventNode = this.getEventNode();
|
||||
|
||||
if (inViewport(node, eventNode, offset)) {
|
||||
this.setState({ visible: true }, () => {
|
||||
this.__emit('contentVisible');
|
||||
});
|
||||
this.detachListeners();
|
||||
}
|
||||
},
|
||||
detachListeners() {
|
||||
this.resizeHander && this.resizeHander.remove();
|
||||
this.scrollHander && this.scrollHander.remove();
|
||||
},
|
||||
},
|
||||
render() {
|
||||
const children = getSlot(this);
|
||||
if (children.length !== 1) {
|
||||
warning(false, 'lazyLoad组件只能包含一个子元素');
|
||||
return null;
|
||||
}
|
||||
const { height, width, elementType: ElementType } = this.$props;
|
||||
const { visible } = this;
|
||||
const { class: className } = this.$attrs;
|
||||
|
||||
const elStyles = {
|
||||
height: typeof height === 'number' ? height + 'px' : height,
|
||||
width: typeof width === 'number' ? width + 'px' : width,
|
||||
};
|
||||
const elClasses = {
|
||||
LazyLoad: true,
|
||||
'is-visible': visible,
|
||||
[className]: className,
|
||||
};
|
||||
return (
|
||||
<ElementType class={elClasses} style={elStyles}>
|
||||
{visible ? children[0] : null}
|
||||
</ElementType>
|
||||
);
|
||||
},
|
||||
});
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
/*
|
||||
* Finds element's position relative to the whole document,
|
||||
* rather than to the viewport as it is the case with .getBoundingClientRect().
|
||||
*/
|
||||
export default function getElementPosition(element) {
|
||||
const rect = element.getBoundingClientRect();
|
||||
|
||||
return {
|
||||
top: rect.top + window.pageYOffset,
|
||||
left: rect.left + window.pageXOffset,
|
||||
};
|
||||
}
|
||||
|
|
@ -1,37 +0,0 @@
|
|||
import getElementPosition from './getElementPosition';
|
||||
|
||||
const isHidden = element => element.offsetParent === null;
|
||||
|
||||
export default function inViewport(element, container, customOffset) {
|
||||
if (isHidden(element)) {
|
||||
return false;
|
||||
}
|
||||
|
||||
let top;
|
||||
let bottom;
|
||||
let left;
|
||||
let right;
|
||||
|
||||
if (typeof container === 'undefined' || container === window) {
|
||||
top = window.pageYOffset;
|
||||
left = window.pageXOffset;
|
||||
bottom = top + window.innerHeight;
|
||||
right = left + window.innerWidth;
|
||||
} else {
|
||||
const containerPosition = getElementPosition(container);
|
||||
|
||||
top = containerPosition.top;
|
||||
left = containerPosition.left;
|
||||
bottom = top + container.offsetHeight;
|
||||
right = left + container.offsetWidth;
|
||||
}
|
||||
|
||||
const elementPosition = getElementPosition(element);
|
||||
|
||||
return (
|
||||
top <= elementPosition.top + element.offsetHeight + customOffset.top &&
|
||||
bottom >= elementPosition.top - customOffset.bottom &&
|
||||
left <= elementPosition.left + element.offsetWidth + customOffset.left &&
|
||||
right >= elementPosition.left - customOffset.right
|
||||
);
|
||||
}
|
||||
|
|
@ -1,39 +0,0 @@
|
|||
const style = (element, prop) => {
|
||||
let styleVal = '';
|
||||
if (typeof getComputedStyle !== 'undefined') {
|
||||
styleVal = window.getComputedStyle(element, null).getPropertyValue(prop);
|
||||
} else {
|
||||
styleVal = element.style[prop];
|
||||
}
|
||||
return styleVal;
|
||||
};
|
||||
|
||||
const overflow = element =>
|
||||
style(element, 'overflow') + style(element, 'overflow-y') + style(element, 'overflow-x');
|
||||
|
||||
const scrollParent = element => {
|
||||
if (!(element instanceof window.HTMLElement)) {
|
||||
return window;
|
||||
}
|
||||
|
||||
let parent = element;
|
||||
|
||||
while (parent) {
|
||||
if (parent === document.body || parent === document.documentElement) {
|
||||
break;
|
||||
}
|
||||
|
||||
if (!parent.parentNode) {
|
||||
break;
|
||||
}
|
||||
if (/(scroll|auto)/.test(overflow(parent))) {
|
||||
return parent;
|
||||
}
|
||||
|
||||
parent = parent.parentNode;
|
||||
}
|
||||
|
||||
return window;
|
||||
};
|
||||
|
||||
export default scrollParent;
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
// based on 2.0.0
|
||||
import TouchFeedback from './src/TouchFeedback';
|
||||
export default TouchFeedback;
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
import PropTypes from '../../_util/vue-types';
|
||||
|
||||
export const ITouchProps = {
|
||||
disabled: PropTypes.looseBool,
|
||||
activeClassName: PropTypes.string,
|
||||
activeStyle: PropTypes.any,
|
||||
// onTouchStart: PropTypes.func,
|
||||
// onTouchEnd: PropTypes.func,
|
||||
// onTouchCancel: PropTypes.func,
|
||||
// onMouseDown: PropTypes.func,
|
||||
// onMouseUp: PropTypes.func,
|
||||
// onMouseLeave: PropTypes.func,
|
||||
};
|
||||
|
|
@ -1,109 +0,0 @@
|
|||
import classNames from '../../_util/classNames';
|
||||
import { initDefaultProps, getSlot } from '../../_util/props-util';
|
||||
import { cloneElement } from '../../_util/vnode';
|
||||
import warning from '../../_util/warning';
|
||||
import BaseMixin from '../../_util/BaseMixin';
|
||||
import { ITouchProps } from './PropTypes';
|
||||
import { defineComponent } from 'vue';
|
||||
import supportsPassive from '../../_util/supportsPassive';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'TouchFeedback',
|
||||
mixins: [BaseMixin],
|
||||
inheritAttrs: false,
|
||||
props: initDefaultProps(ITouchProps, {
|
||||
disabled: false,
|
||||
}),
|
||||
data() {
|
||||
this.child = null;
|
||||
return {
|
||||
active: false,
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
if (this.disabled && this.active) {
|
||||
this.setState({
|
||||
active: false,
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
triggerEvent(type, isActive, ev) {
|
||||
const eventType = `on${type}`;
|
||||
const { child } = this;
|
||||
|
||||
if (child.props[eventType]) {
|
||||
child.props[eventType](ev);
|
||||
}
|
||||
if (isActive !== this.active) {
|
||||
this.setState({
|
||||
active: isActive,
|
||||
});
|
||||
}
|
||||
},
|
||||
onTouchStart(e) {
|
||||
this.triggerEvent('Touchstart', true, e);
|
||||
},
|
||||
onTouchMove(e) {
|
||||
this.triggerEvent('Touchmove', false, e);
|
||||
},
|
||||
onTouchEnd(e) {
|
||||
this.triggerEvent('Touchend', false, e);
|
||||
},
|
||||
onTouchCancel(e) {
|
||||
this.triggerEvent('Touchcancel', false, e);
|
||||
},
|
||||
onMouseDown(e) {
|
||||
// pc simulate mobile
|
||||
this.triggerEvent('Mousedown', true, e);
|
||||
},
|
||||
onMouseUp(e) {
|
||||
this.triggerEvent('Mouseup', false, e);
|
||||
},
|
||||
onMouseLeave(e) {
|
||||
this.triggerEvent('Mouseleave', false, e);
|
||||
},
|
||||
},
|
||||
render() {
|
||||
const { disabled, activeClassName = '', activeStyle = {} } = this.$props;
|
||||
|
||||
let child = getSlot(this);
|
||||
if (child.length !== 1) {
|
||||
warning(false, 'm-feedback组件只能包含一个子元素');
|
||||
return null;
|
||||
}
|
||||
const events = disabled
|
||||
? undefined
|
||||
: {
|
||||
[supportsPassive ? 'onTouchstartPassive' : 'onTouchstart']: this.onTouchStart,
|
||||
[supportsPassive ? 'onTouchmovePassive' : 'onTouchmove']: this.onTouchMove,
|
||||
onTouchend: this.onTouchEnd,
|
||||
onTouchcancel: this.onTouchCancel,
|
||||
onMousedown: this.onMouseDown,
|
||||
onMouseup: this.onMouseUp,
|
||||
onMouseleave: this.onMouseLeave,
|
||||
};
|
||||
|
||||
child = child[0];
|
||||
this.child = child;
|
||||
if (!disabled && this.active) {
|
||||
let { style, class: className } = child.props;
|
||||
|
||||
if (activeStyle !== false) {
|
||||
if (activeStyle) {
|
||||
style = { ...style, ...activeStyle };
|
||||
}
|
||||
className = classNames(className, activeClassName);
|
||||
}
|
||||
return cloneElement(child, {
|
||||
class: className,
|
||||
style,
|
||||
...events,
|
||||
});
|
||||
}
|
||||
|
||||
return cloneElement(child, events);
|
||||
},
|
||||
});
|
||||
Loading…
Reference in New Issue