ant-design-vue/components/back-top/index.jsx

134 lines
3.2 KiB
JavaScript

import PropTypes from '../_util/vue-types'
import addEventListener from '../_util/Dom/addEventListener'
import getScroll from '../_util/getScroll'
import getRequestAnimationFrame from '../_util/getRequestAnimationFrame'
import BaseMixin from '../_util/BaseMixin'
import getTransitionProps from '../_util/getTransitionProps'
const reqAnimFrame = getRequestAnimationFrame()
const easeInOutCubic = (t, b, c, d) => {
const cc = c - b
t /= d / 2
if (t < 1) {
return cc / 2 * t * t * t + b
} else {
return cc / 2 * ((t -= 2) * t * t + 2) + b
}
}
function getDefaultTarget () {
return window
}
const BackTopProps = {
visibilityHeight: PropTypes.number,
// onClick?: React.MouseEventHandler<any>;
target: PropTypes.func,
prefixCls: PropTypes.string,
}
export default {
name: 'ABackTop',
mixins: [BaseMixin],
props: {
...BackTopProps,
visibilityHeight: PropTypes.number.def(400),
},
data () {
this.scrollEvent = null
return {
visible: false,
}
},
mounted () {
this.$nextTick(() => {
const getTarget = this.target || getDefaultTarget
this.scrollEvent = addEventListener(getTarget(), 'scroll', this.handleScroll)
this.handleScroll()
})
},
beforeDestroy () {
if (this.scrollEvent) {
this.scrollEvent.remove()
}
},
methods: {
getCurrentScrollTop () {
const getTarget = this.target || getDefaultTarget
const targetNode = getTarget()
if (targetNode === window) {
return window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop
}
return targetNode.scrollTop
},
scrollToTop (e) {
const scrollTop = this.getCurrentScrollTop()
const startTime = Date.now()
const frameFunc = () => {
const timestamp = Date.now()
const time = timestamp - startTime
this.setScrollTop(easeInOutCubic(time, scrollTop, 0, 450))
if (time < 450) {
reqAnimFrame(frameFunc)
}
}
reqAnimFrame(frameFunc)
this.$emit('click', e)
},
setScrollTop (value) {
const getTarget = this.target || getDefaultTarget
const targetNode = getTarget()
if (targetNode === window) {
document.body.scrollTop = value
document.documentElement.scrollTop = value
} else {
targetNode.scrollTop = value
}
},
handleScroll () {
const { visibilityHeight, target = getDefaultTarget } = this
const scrollTop = getScroll(target(), true)
this.setState({
visible: scrollTop > visibilityHeight,
})
},
},
render () {
const { prefixCls = 'ant-back-top', $slots, $listeners } = this
const defaultElement = (
<div class={`${prefixCls}-content`}>
<div class={`${prefixCls}-icon`} />
</div>
)
const divProps = {
on: {
...$listeners,
click: this.scrollToTop,
},
class: prefixCls,
}
const backTopBtn = this.visible ? (
<div {...divProps}>
{$slots.default || defaultElement}
</div>
) : null
const transitionProps = getTransitionProps('fade')
return (
<transition {...transitionProps}>
{backTopBtn}
</transition>
)
},
}