vue封装分页组件

·  阅读 1728

本文封装的分页组件主要是在elementui的el-pagination基础之上因页面需要在切换页面的时候需要将页面滚动到表头的位置,所以增加了页面的滚动。

1、引入import Pagination from '@/components/Pagination'

2、注册组件components: { Pagination },

3、使用组件

<pagination

      v-show="total>0"

      :total="total"

      :page.sync="listQuery.pageIndex"

      :limit.sync="listQuery.limit"

      @pagination="getList('')"

    />
复制代码

@/components/Pagination/index.vue

<template>

  <div :class="{'hidden':hidden}" class="pagination-container">

    <el-pagination

      :background="background"

      :current-page.sync="currentPage"

      :page-size.sync="pageSize"

      :layout="layout"

      :page-sizes="pageSizes"

      :total="total"

      v-bind="$attrs"

      @size-change="handleSizeChange"

      @current-change="handleCurrentChange"

    />

  </div>

</template>

\


<script>

import { scrollTo } from '@/utils/common/scroll-to'

\


export default {

  name'Pagination',

  props: {

    total: {

      requiredtrue,

      typeNumber

    },

    page: {

      typeNumber,

      default1

    },

    limit: {

      typeNumber,

      default10

    },

    pageSizes: {

      typeArray,

      default() {

        return [10203050]

      }

    },

    layout: {

      typeString,

      default'total, sizes, prev, pager, next, jumper'

    },

    background: {

      typeBoolean,

      defaulttrue

    },

    autoScroll: {

      typeBoolean,

      defaulttrue

    },

    hidden: {

      typeBoolean,

      defaultfalse

    }

  },

  computed: {

    currentPage: {

      get() {

        return this.page

      },

      set(val) {

        this.$emit('update:page', val)

      }

    },

    pageSize: {

      get() {

        return this.limit

      },

      set(val) {

        this.$emit('update:limit', val)

      }

    }

  },

  methods: {

    handleSizeChange(val) {

      this.$emit('pagination', { pagethis.currentPagelimit: val })

      if (this.autoScroll) {

        scrollTo(0800)

      }

    },

    handleCurrentChange(val) {

      this.$emit('pagination', { page: val, limitthis.pageSize })

      if (this.autoScroll) {

        scrollTo(0800)

      }

    }

  }

}

</script>

\


<style scoped>

.pagination-container {

  background#fff;

  padding32px 16px;

}

.pagination-container.hidden {

  display: none;

}

</style>

\
复制代码

scroll-to.js

Math.easeInOutQuad = function(t, b, c, d) {

  t /= d / 2

  if (t < 1) {

    return c / 2 * t * t + b

  }

  t--

  return -c / 2 * (t * (t - 2) - 1) + b

}

\


// requestAnimationFrame for Smart Animating http://goo.gl/sx5sts

var requestAnimFrame = (function() {

  return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function(callback) { window.setTimeout(callback, 1000 / 60) }

})()

\


/**

 * Because it's so fucking difficult to detect the scrolling element, just move them all

 * @param {numberamount

 */

function move(amount) {

  document.documentElement.scrollTop = amount

  document.body.parentNode.scrollTop = amount

  document.body.scrollTop = amount

}

\


function position() {

  return document.documentElement.scrollTop || document.body.parentNode.scrollTop || document.body.scrollTop

}

\


/**

 * @param {numberto

 * @param {numberduration

 * @param {Functioncallback

 */

export function scrollTo(to, duration, callback) {

  const start = position()

  const change = to - start

  const increment = 20

  let currentTime = 0

  duration = (typeof (duration) === 'undefined') ? 500 : duration

  var animateScroll = function() {

    // increment the time

    currentTime += increment

    // find the value with the quadratic in-out easing function

    var val = Math.easeInOutQuad(currentTime, start, change, duration)

    // move the document.body

    move(val)

    // do the animation unless its over

    if (currentTime < duration) {

      requestAnimFrame(animateScroll)

    } else {

      if (callback && typeof (callback) === 'function') {

        // the animation is done so lets callback

        callback()

      }

    }

  }

  animateScroll()

}

\
复制代码
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改