mounted() {  ???  this.dom.addEventListener('scroll', this.scroll, false)  ??? }, beforeDestroy() {  ???  this.dom.removeEventListener('scroll', this.scroll, false)  ??? },

 /**  * 滾動(dòng)鉤子  */  scroll() {  const viewHeight = global.innerHeight  let parentNode  if (this.container !== global) {   parentNode = this.$el  } else {   parentNode = this.$el.parentNode  }  if (parentNode) {   // 獲取Vue實(shí)例使用的根 DOM 元素相對(duì)于視口的位置   const rect = parentNode.getBoundingClientRect()   // this.distance 離底部多少距離開始加載   // 如果此元素底邊距離視口頂部的距離小于視口高度加上distance之和，就加載下一頁(yè)   if ((rect.bottom <= viewHeight + this.distance) && this.loadable && !this.loading) {   this.load()   }  }  },

<template> <div class="loadmore" ref="loadmore"> <div class="loadmore__body">  <slot></slot> </div> <div class="loadmore__footer">  <span v-if="loading">  <i class="tc-loading"></i>  <span>正在加載</span>  </span>  <span v-else-if="loadable">加載更多</span>  <span v-else>沒有更多了</span> </div> </div></template><script type="text/babel"> import axios from 'axios' const CancelToken = axios.CancelToken export default { data() {  return {  /**   * 總頁(yè)數(shù)（由服務(wù)端返回）   * @type {number}   */  count: 0,  /**   * 是否正在拖拽中   * @type {boolean}   */  dragging: false,  /**   * 已加載次數(shù)   * @type {number}   */  times: 0,  /**   * 已開始記載   * @type {boolean}   */  started: false,  /**   * 正在加載中   * @type {boolean}   */  loading: false,  dom: null,  } }, props: {  /**  * 初始化后自動(dòng)開始加載數(shù)據(jù)  */  autoload: {  type: Boolean,  default: true,  },  /**  * 離組件最近的可滾動(dòng)父級(jí)元素（用于監(jiān)聽事件及獲取滾動(dòng)條位置）  */  container: {  // Selector or Element  default: () => (global),  },  /**  * Axios請(qǐng)求參數(shù)配置對(duì)象  * {@link https://github.com/mzabriskie/axios#request-config}  */  options: {  type: Object,  default: null,  },  /**  * 起始頁(yè)碼  */  page: {  type: Number,  default: 1,  },  /**  * 每頁(yè)加載數(shù)據(jù)條數(shù)  */  rows: {  type: Number,  default: 10,  },  /**  * 數(shù)據(jù)加載請(qǐng)求地址  */  url: {  type: String,  default: '',  },  /**  * 距離底部多遠(yuǎn)加載  */  distance: {  type: Number,  default: 200,  }, }, computed: {  /**  * 是否可以加載  * @returns {boolean} 是與否  */  loadable() {  return !this.started || (this.page + this.times) <= this.count  }, }, mounted() {  if (this.container !== global) {  this.dom = document.querySelector(this.container)  } else {  this.dom = this.container  }  if (!this.dom) {  return  }  this.dom.addEventListener('scroll', this.scroll, false)  if (this.autoload && !this.loading) {  this.load()  } }, // eslint-disable-next-line beforeDestroy() {  if (this.dom) {  this.dom.removeEventListener('scroll', this.scroll, false)  } }, methods: {  /**  * 滾動(dòng)鉤子  */  scroll() {  const viewHeight = global.innerHeight  let parentNode  if (this.container !== global) {   parentNode = this.$el  } else {   parentNode = this.$el.parentNode  }  if (parentNode) {   const rect = parentNode.getBoundingClientRect()   if ((rect.bottom <= viewHeight + this.distance) && this.loadable && !this.loading) {   this.load()   }  }  },  /**  * 加載一組數(shù)據(jù)的方法  */  load() {  if (this.loading) {   return  }  this.started = true  this.loading = true  const params = {   currentPage: this.page + this.times,   pageSize: this.rows,  }  const options = Object.assign({}, this.options, {   url: this.url,   cancelToken: new CancelToken((cancel) => {   this.cancel = cancel   }),  })  if (String(options.method).toUpperCase() === 'POST') {   options.data = Object.assign({}, options.data, params)  } else {   options.params = Object.assign({}, options.params, params)  }  this.$axios.request(options).then((res) => {   const data = res.result   this.times += 1   this.loading = false   this.count = data.pageCount   this.$emit('success', data.list)   this.$emit('complete')  }).catch((e) => {   this.loading = false   this.$emit('error', e)   this.$emit('complete')  })  },  /**  * 重置加載相關(guān)變量  */  reset() {  this.count = 0  this.times = 0  this.started = false  this.loading = false  },  /**  *重新開始加載  */  restart() {  this.reset()  this.load()  }, }, }</script>