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 affix

pull/666/head
wangxueliang 2019-03-11 11:54:14 +08:00
parent d112e2d9a2
commit 75cc96eefd
1 changed files with 9 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
components/affix/index.jsx
View File

@ -6,6 +6,7 @@ import omit from 'omit.js';
import getScroll from '../_util/getScroll'; import getScroll from '../_util/getScroll';
import BaseMixin from '../_util/BaseMixin'; import BaseMixin from '../_util/BaseMixin';
import throttleByAnimationFrame from '../_util/throttleByAnimationFrame'; import throttleByAnimationFrame from '../_util/throttleByAnimationFrame';
import { ConfigConsumerProps } from '../config-provider';
function getTargetRect(target) { function getTargetRect(target) {
return target !== window ? target.getBoundingClientRect() : { top: 0, left: 0, bottom: 0 }; return target !== window ? target.getBoundingClientRect() : { top: 0, left: 0, bottom: 0 };
@ -54,6 +55,9 @@ const Affix = {
name: 'AAffix', name: 'AAffix',
props: AffixProps, props: AffixProps,
mixins: [BaseMixin], mixins: [BaseMixin],
inject: {
configProvider: { default: () => ({}) },
},
data() { data() {
this.events = ['resize', 'scroll', 'touchstart', 'touchmove', 'touchend', 'pageshow', 'load']; this.events = ['resize', 'scroll', 'touchstart', 'touchmove', 'touchend', 'pageshow', 'load'];
this.eventHandlers = {}; this.eventHandlers = {};
@ -166,7 +170,8 @@ const Affix = {
const targetRect = getTargetRect(targetNode); const targetRect = getTargetRect(targetNode);
const targetInnerHeight = targetNode.innerHeight || targetNode.clientHeight; const targetInnerHeight = targetNode.innerHeight || targetNode.clientHeight;
if (scrollTop > elemOffset.top - offsetTop && offsetMode.top) { // ref: https://github.com/ant-design/ant-design/issues/13662
if (scrollTop >= elemOffset.top - offsetTop && offsetMode.top) {
// Fixed Top // Fixed Top
const width = `${elemOffset.width}px`; const width = `${elemOffset.width}px`;
const top = `${targetRect.top + offsetTop}px`; const top = `${targetRect.top + offsetTop}px`;
@ -181,7 +186,7 @@ const Affix = {
height: `${elemSize.height}px`, height: `${elemSize.height}px`,
}); });
} else if ( } else if (
scrollTop < elemOffset.top + elemSize.height + offsetBottom - targetInnerHeight && scrollTop <= elemOffset.top + elemSize.height + offsetBottom - targetInnerHeight &&
offsetMode.bottom offsetMode.bottom
) { ) {
// Fixed Bottom // Fixed Bottom
@ -240,8 +245,9 @@ const Affix = {
render() { render() {
const { prefixCls, affixStyle, placeholderStyle, $slots, $props } = this; const { prefixCls, affixStyle, placeholderStyle, $slots, $props } = this;
const getPrefixCls = this.configProvider.getPrefixCls || ConfigConsumerProps.getPrefixCls;
const className = classNames({ const className = classNames({
[prefixCls || 'ant-affix']: affixStyle, [getPrefixCls('affix', prefixCls)]: affixStyle,
}); });
const props = { const props = {