文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

Vue分页器组件使用方法详解

2024-04-02 19:55

关注

本文实例为大家分享了Vue分页器组件的使用,供大家参考,具体内容如下

效果图如下:

鼠标悬浮时切换为箭头:

①创建自定义分页组件Pager.vue:预设主题色为@themeColor: #D93844; 每页展示10条数据,一次最多显示5个页码,支持输入页码跳转:

<template>
  <div class="m-pager-wrap" v-if="totalCount">
    <span class="u-text">共{{ totalPage }}页 / {{ totalCount }}条</span>
    <span class="u-item txt" :class="{'disabled': currentPage===1}" @click="changePage(1)">首页</span>
    <span class="u-item txt" :class="{'disabled': currentPage===1}" @click="changePage(currentPage - 1)">上一页</span>
    <span
      class="u-ellipsis"
      ref="forward"
      v-show="forwardMore"
      @click="onForward"
      @mouseenter="onEnterForward"
      @mouseleave="onLeaveForward">&middot;&middot;&middot;</span>
    <span :class="['u-item', {'active': currentPage===num}]" v-for="num in pageList" :key="num" @click="changePage(num)">{{ num }}</span>
    <span
      class="u-ellipsis"
      ref="backward"
      v-show="backwardMore"
      @click="onBackward"
      @mouseenter="onEnterBackward"
      @mouseleave="onLeaveBackward">&middot;&middot;&middot;</span>
    <span class="u-item txt" :class="{'disabled': currentPage===totalPage}" @click="changePage(currentPage + 1)">下一页</span>
    <span class="u-item txt" :class="{'disabled': currentPage===totalPage}" @click="changePage(totalPage)">尾页</span>
    <span class="u-jump-page">跳至<input type="text" v-model="jumpNumber"/>页</span>
    <span class="u-item txt" @click="jumpPage(jumpNumber)">确定</span>
  </div>
</template>
<script>
export default {
  name: 'Pager',
  data () {
    return {
      currentPage: this.pageNumber, // 当前页码
      currentSize: this.pageSize, // 分页数
      jumpNumber: '', // 跳转的页码
      forwardMore: false, // 左箭头展示
      backwardMore: false // 右箭头展示
    }
  },
  props: {
    pageNumber: { // 当前页面
      type: Number,
      default: 1
    },
    pageSize: { // 每页显示数量 [10条/页 20条/页 30条/页 40条/页]
      type: Number,
      default: 10
    },
    totalCount: { // 总条数
      type: Number,
      default: 0
    },
    pageListNum: { // 显示的页码数组长度
      type: Number,
      default: 5
    }
  },
  computed: {
    totalPage () { // 总页数
      return Math.ceil(this.totalCount / this.currentSize) // 向上取整
    },
    pageList () { // 获取显示的页码数组
      return this.dealPageList(this.currentPage)
    }
  },
  watch: {
    currentPage (to, from) {
      // 通过更改当前页码,修改分页数据
      this.$emit('changePage', { currentPage: to, currentSize: this.currentSize })
    }
  },
  created () {
    // 监听键盘Enter按键
    document.onkeydown = (e) => {
      const ev = e || window.event
      if (ev && ev.keyCode === 13 && this.jumpNumber) {
        this.jumpPage(this.jumpNumber)
      }
    }
  },
  methods: {
    dealPageList (curPage) {
      var resList = []
      var offset = Math.floor(this.pageListNum / 2) // 向下取整
      var pager = {
        start: curPage - offset,
        end: curPage + offset
      }
      if (pager.start < 1) {
        pager.end = pager.end + (1 - pager.start)
        pager.start = 1
      }
      if (pager.end > this.totalPage) {
        pager.start = pager.start - (pager.end - this.totalPage)
        pager.end = this.totalPage
      }
      if (pager.start < 1) {
        pager.start = 1
      }
      if (pager.start > 1) {
        this.forwardMore = true
      } else {
        this.forwardMore = false
      }
      if (pager.end < this.totalPage) {
        this.backwardMore = true
      } else {
        this.backwardMore = false
      }
      // 生成要显示的页码数组
      for (let i = pager.start; i <= pager.end; i++) {
        resList.push(i)
      }
      return resList
    },
    onEnterForward () {
      this.$refs.forward.innerHTML = '&laquo;'
    },
    onLeaveForward () {
      this.$refs.forward.innerHTML = '&middot;&middot;&middot;'
    },
    onEnterBackward () {
      this.$refs.backward.innerHTML = '&raquo;'
    },
    onLeaveBackward () {
      this.$refs.backward.innerHTML = '&middot;&middot;&middot;'
    },
    onForward () {
      this.currentPage = this.currentPage - this.pageListNum > 0 ? this.currentPage - this.pageListNum : 1
    },
    onBackward () {
      this.currentPage = this.currentPage + this.pageListNum < this.totalPage ? this.currentPage + this.pageListNum : this.totalPage
    },
    jumpPage (jumpNum) {
      if (Number(jumpNum)) {
        if (Number(jumpNum) < 1) {
          jumpNum = 1
        }
        if (Number(jumpNum) > this.totalPage) {
          jumpNum = this.totalPage
        }
        this.changePage(Number(jumpNum))
      }
      this.jumpNumber = '' // 清空跳转输入框
    },
    changePage (pageNum) {
      if (this.currentPage !== pageNum) { // 点击的页码不是当前页码
        this.currentPage = pageNum
      }
    }
  }
}
</script>
<style lang="less" scoped>
@themeColor: #D93844; // 自定义主题色
.m-pager-wrap {
  height: 32px;
  line-height: 30px;
  font-size: 14px;
  color: #888;
  text-align: center;
  .u-text {
    margin-right: 5px;
  }
  .u-item {
    margin-right: 5px;
    min-width: 30px;
    display: inline-block;
    user-select: none; // 禁止选取文本
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    cursor: pointer;
    &:hover {
      .active();
    }
  }
  .active {
    color: #fff;
    background: @themeColor;
    border: 1px solid @themeColor;
  }
  .disabled {
    color: rgba(0,0,0,.25);
    &:hover {
      cursor: not-allowed;
      color: rgba(0,0,0,.25);
      background: #fff;
      border: 1px solid #d9d9d9;
    }
  }
  .txt {
    padding: 0 6px;
  }
  .u-ellipsis {
    display: inline-block;
    width: 12px;
    padding: 0 8px;
    margin-right: 5px;
    cursor: pointer;
    &:hover {
      color: @themeColor;
    }
  }
  .u-jump-page {
    margin: 0 8px 0 3px;
    input {
      width: 32px;
      height: 20px;
      padding: 5px 8px;
      margin: 0 5px;
      border: 1px solid #d9d9d9;
      border-radius: 4px;
      text-align: center;
    }
  }
}
</style>

②在要使用的页面引入分页器:

<div class="m-page">
    <Pager
        @changePage="jumpPage"
        :totalCount="totalCount"
        :pageNumber="queryParams.p"
        :pageSize="queryParams.pageSize" />
</div>
 
import Pager from '@/components/Pager'
components: {
    Pager
}
totalCount: 0,
queryParams: {
        pageSize: 10,
        p: 1,
        mod: 'search'
},
 
jumpPage (e) {
      this.queryParams.p = e.currentPage
      this.queryParams.pageSize = e.currentSize
      this.getDataLists() // 调用接口获取列表数据
}
 
.m-page {
  margin: 30px auto 60px;
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程网。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯