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