Vue下的分页控件

VUE用分页的时候,发现EL的分页不好用,就决定自己做一个,百度了个试了下,还行

<template>

  <div>

    <div class="page" v-show="show">

      <div class="pagelist">

        <span class="jump" :class="{disabled:pstart}" @click="$emit('prePage')">上一页</span>

        <span v-show="currentPage>5" class="jump" @click="$emit('jumpPage','1')">1</span>

        <span class="ellipsis" v-show="efont">...</span>

        <span class="jump" v-for="num in indexs" :class="{bgprimary:currentPage==num}"

              @click="$emit('jumpPage',num)">{{num}}</span>

        <span class="ellipsis" v-show="ebehind">...</span>

 

        <span :class="{disabled:pend}" class="jump" @click="$emit('nextPage')">下一页</span>

        <span v-show="currentPage<pageCount-4" class="jump" @click="$emit('jumpPage',pageCount)">{{pageCount}}</span>

 

        <span class="jumppoint">跳转到:</span>

        <span class="jumpinp"><input type="number" v-model="changePage"></span>

        <span class="jump gobtn" @click="$emit('jumpPage',changePage)">GO</span>

      </div>

    </div>

  </div>

</template>

<script>

  export default {

    data() {

      return {

        changePage: ''

      }

    },

    props: ['currentPage', 'pageCount'],

    computed: {

      show: function() {

        return this.pageCount && this.pageCount !== 1

      },

      pstart: function() {

        return this.currentPage === 1

      },

      pend: function() {

        return this.currentPage === this.pageCount

      },

      efont: function() {

        if (this.pageCount <= 7) return false

        return this.currentPage > 5

      },

      ebehind: function() {

        if (this.pageCount <= 7) return false

        var nowAy = this.indexs

        return nowAy[nowAy.length - 1] !== this.pageCount

      },

      indexs: function() {

        var left = 1

        var right = this.pageCount

        var ar = []

        if (this.pageCount >= 7) {

          if (this.currentPage > 5 && this.currentPage < this.pageCount - 4) {

            left = Number(this.currentPage) - 3

            right = Number(this.currentPage) + 3

          } else {

            if (this.currentPage <= 5) {

              left = 1

              right = 7

            } else {

              right = this.pageCount

 

              left = this.pageCount - 6

            }

          }

        }

        while (left <= right) {

          ar.push(left)

          left++

        }

        return ar

      }

    },

    methods: {
}

  }

</script>

 

<style>

  .page {

    font-weight: 900;

    height: 40px;

    text-align: center;

    color: #888;

    margin: 20px auto 0;

  }

 

  .pagelist {

    font-size: 0;

    height: 50px;

    line-height: 50px;

  }

 

  .pagelist span {

    font-size: 14px;

  }

 

  .pagelist .jump {

    border: 1px solid #ccc;

    padding: 5px 8px;

    -webkit-border-radius: 4px;

    -moz-border-radius: 4px;

    border-radius: 4px;

    cursor: pointer;

    margin-left: 5px;

  }

 

  .pagelist .bgprimary {

    cursor: default;

    color: #fff;

    background: #337ab7;

    border-color: #337ab7;

  }

 

  .jumpinp input {

    width: 55px;

    height: 26px;

    font-size: 13px;

    border: 1px solid #ccc;

    -webkit-border-radius: 4px;

    -moz-border-radius: 4px;

    border-radius: 4px;

    text-align: center;

  }

 

  .ellipsis {

    padding: 0px 8px;

  }

 

  .jumppoint {

    margin-left: 30px;

  }

 

  .pagelist .gobtn {

    font-size: 12px;

  }

 

  .bgprimary {

    cursor: default;

    color: #fff;

    background: #337ab7;

    border-color: #337ab7;

  }

  .pagelist .jump.disabled{

    pointer-events: none;

    background: #ddd;

  }

  .pagelist span { font-size: 14px; user-select: none;/*禁止文本选中*/ }

</style>
调用

prePage() { this.currentPage-- this.fetchData() },
nextPage() { this.currentPage++ this.fetchData() },
jumpPage(pageIndex) {
if (pageIndex > this.pageCount) {
pageIndex = this.pageCount }
if (!pageIndex || pageIndex < 1) {
pageIndex = 1 }
this.currentPage = pageIndex this.fetchData()
}
 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
分页器是一个常见的 UI 控件,用于展示数据的分页情况,并提供翻页操作。在 Vue 中,我们可以通过自定义组件的方式来实现分页器。下面是一个简单的分页器组件示例: ```vue <template> <div class="pagination"> <button :disabled="currentPage === 1" @click="prevPage">上一页</button> <span class="page-num">{{ currentPage }} / {{ totalPages }}</span> <button :disabled="currentPage === totalPages" @click="nextPage">下一页</button> </div> </template> <script> export default { props: { currentPage: { type: Number, required: true }, totalPages: { type: Number, required: true } }, methods: { prevPage() { if (this.currentPage > 1) { this.$emit('page-change', this.currentPage - 1); } }, nextPage() { if (this.currentPage < this.totalPages) { this.$emit('page-change', this.currentPage + 1); } } } } </script> <style scoped> .pagination { display: flex; justify-content: center; align-items: center; margin-top: 20px; } button { margin: 0 10px; padding: 5px 10px; border-radius: 5px; border: none; background-color: #007aff; color: #fff; cursor: pointer; } button:disabled { opacity: 0.5; cursor: not-allowed; } .page-num { font-size: 16px; font-weight: bold; margin: 0 10px; } </style> ``` 在这个示例中,我们定义了两个 props:currentPage 和 totalPages,分别表示当前页和总页数。组件中包含上一页、下一页按钮和页码信息。通过点击按钮来触发 page-change 事件,从而更新父组件中的 currentPage 值,实现翻页操作。 使用该组件时,只需在父组件中传入 currentPage 和 totalPages 值,并监听 page-change 事件即可: ```vue <template> <div> <div v-for="item in items">{{ item }}</div> <pagination :current-page="currentPage" :total-pages="totalPages" @page-change="handlePageChange" /> </div> </template> <script> import Pagination from './Pagination.vue'; export default { components: { Pagination }, data() { return { items: ['item1', 'item2', 'item3', 'item4', 'item5', 'item6', 'item7', 'item8', 'item9', 'item10'], currentPage: 1, totalPages: 2 } }, methods: { handlePageChange(page) { this.currentPage = page; } } } </script> ``` 这里只是一个简单的分页器示例,实际开发中还可以根据需求进行扩展,例如添加页码输入框、每页显示条数控制等。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值