123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134 |
- import _extends from 'babel-runtime/helpers/extends';
- import PropTypes from '../_util/vue-types';
- import addEventListener from '../vc-util/Dom/addEventListener';
- import getScroll from '../_util/getScroll';
- import BaseMixin from '../_util/BaseMixin';
- import getTransitionProps from '../_util/getTransitionProps';
- import { ConfigConsumerProps } from '../config-provider/configConsumerProps';
- import Base from '../base';
- import { getListeners } from '../_util/props-util';
- import scrollTo from '../_util/scrollTo';
- function getDefaultTarget() {
- return window;
- }
- var BackTopProps = {
- visibilityHeight: PropTypes.number,
- // onClick?: React.MouseEventHandler<any>;
- target: PropTypes.func,
- prefixCls: PropTypes.string
- // visible: PropTypes.bool, // Only for test. Don't use it.
- };
- var BackTop = {
- name: 'ABackTop',
- mixins: [BaseMixin],
- props: _extends({}, BackTopProps, {
- visibilityHeight: PropTypes.number.def(400)
- }),
- inject: {
- configProvider: { 'default': function _default() {
- return ConfigConsumerProps;
- } }
- },
- data: function data() {
- this.scrollEvent = null;
- return {
- visible: false
- };
- },
- mounted: function mounted() {
- var _this = this;
- this.$nextTick(function () {
- var getTarget = _this.target || getDefaultTarget;
- _this.scrollEvent = addEventListener(getTarget(), 'scroll', _this.handleScroll);
- _this.handleScroll();
- });
- },
- activated: function activated() {
- var _this2 = this;
- this.$nextTick(function () {
- _this2.handleScroll();
- });
- },
- beforeDestroy: function beforeDestroy() {
- if (this.scrollEvent) {
- this.scrollEvent.remove();
- }
- },
- methods: {
- getCurrentScrollTop: function getCurrentScrollTop() {
- var getTarget = this.target || getDefaultTarget;
- var targetNode = getTarget();
- if (targetNode === window) {
- return window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop;
- }
- return targetNode.scrollTop;
- },
- scrollToTop: function scrollToTop(e) {
- var _target = this.target,
- target = _target === undefined ? getDefaultTarget : _target;
- scrollTo(0, {
- getContainer: target
- });
- this.$emit('click', e);
- },
- handleScroll: function handleScroll() {
- var visibilityHeight = this.visibilityHeight,
- _target2 = this.target,
- target = _target2 === undefined ? getDefaultTarget : _target2;
- var scrollTop = getScroll(target(), true);
- this.setState({
- visible: scrollTop > visibilityHeight
- });
- }
- },
- render: function render() {
- var h = arguments[0];
- var customizePrefixCls = this.prefixCls,
- $slots = this.$slots;
- var getPrefixCls = this.configProvider.getPrefixCls;
- var prefixCls = getPrefixCls('back-top', customizePrefixCls);
- var defaultElement = h(
- 'div',
- { 'class': prefixCls + '-content' },
- [h('div', { 'class': prefixCls + '-icon' })]
- );
- var divProps = {
- on: _extends({}, getListeners(this), {
- click: this.scrollToTop
- }),
- 'class': prefixCls
- };
- var backTopBtn = this.visible ? h(
- 'div',
- divProps,
- [$slots['default'] || defaultElement]
- ) : null;
- var transitionProps = getTransitionProps('fade');
- return h(
- 'transition',
- transitionProps,
- [backTopBtn]
- );
- }
- };
- /* istanbul ignore next */
- BackTop.install = function (Vue) {
- Vue.use(Base);
- Vue.component(BackTop.name, BackTop);
- };
- export default BackTop;
|