vue写分页组件

先看效果

直接上代码

<template>
<div class="paging">
  <ul class="box">
    <li>
      <a v-if="currentPage === 1" >首页</a>
      <a v-else href="javascript:;" @click="next(1)">首页</a>
    </li>
    <li v-if="currentPage<=1"><a>上一页</a></li>
    <li v-else><a href="javascript:;" @click="next(currentPage-1)">上一页</a></li>


    <li v-for="item in pagingList" :class="{active:currentPage===item.key}" @click="next(item.value)">
      <a v-if="currentPage===item.key || sign ===item.key" >{{item.key}}</a>
      <a v-else href="javascript:;">{{item.key}}</a>
    </li>

    <li v-if="currentPage>=totalPageCount"><a>下一页</a></li>
    <li v-else><a href="javascript:;" @click="next(currentPage+1)">下一页</a></li>
    <li>
      <a v-if="totalPageCount === currentPage">尾页</a>
      <a v-else href="javascript:;" @click="next(totalPageCount)">尾页</a>
    </li>
  </ul>
</div>
</template>

<script>
export default {
name: "Paging",
  props:{
    // 总页数
    totalPageCount:{
      default:15,
    }
  },
  data(){
    return{
      // 省略的符号
      sign:'...',
      // 省略号位置
      signIndex:4,

      // 当前页
      currentPage:1,
      // 显示在页面的数组列表
      pagingList:[]
    }
  },
  watch: {
    totalPageCount (val) {
      let that = this
      if (!val || val == '') return;
      that.currentPage = 1;
      that.init()
    },
    currentPage (val) {
      let that = this
      that.init()
    }
  },
  methods:{
    next (num) {
      let that = this
      if (num <= 1) that.currentPage = 1;
      else if (num >= that.totalPageCount) that.currentPage = that.totalPageCount;
      else that.currentPage = num;
      this.$emit('pageindex',num)
    },
    // 初始化数据
    fetchData () {
      let that = this

      that.pagingList = [];
      let tmp = null;


      if ((that.totalPageCount) > 6) {
        if (((that.totalPageCount-1) === (that.totalPageCount - that.currentPage)) && (that.totalPageCount - that.currentPage) > 5) {
          for (let i=1;i<7;i++) {
            if (i < that.signIndex) {
              tmp = {key:i, value:i }
            } else if (i=== that.signIndex) {
              tmp = {key:that.sign, value:0 }
            } else if (i === (that.signIndex + 1) ) {
              tmp = {key:that.totalPageCount - 1, value:that.totalPageCount - 1 }
            } else {
              tmp = {key:that.totalPageCount, value:that.totalPageCount }
            }
            that.pagingList.push(tmp)
          }
        } else if (((that.totalPageCount - that.currentPage) <= that.signIndex)){
          let starNum = that.totalPageCount - 5;
          for (let i=starNum;i<starNum+6;i++) {
            tmp = {key:i, value:i }
            that.pagingList.push(tmp)
          }
        } else {
          let starNum = that.currentPage - 1;
          for (let i=1;i<7;i++) {
            if (i < that.signIndex) {
              tmp = {key:(starNum - 1) + i, value:(starNum - 1) + i }
            } else if (i=== that.signIndex) {
              tmp = {key:that.sign, value:0 }
            } else if (i === (that.signIndex + 1) ) {
              tmp = {key:that.totalPageCount - 1, value:that.totalPageCount - 1 }
            } else {
              tmp = {key:that.totalPageCount, value:that.totalPageCount }
            }
            that.pagingList.push(tmp)
          }
        }
      } else {
        for (let i =0; i <that.totalPageCount; i++) {
          tmp = {key:i+1, value:i+1 }
          that.pagingList.push(tmp)
        }
      }
    },
    init () {
      let that = this
      that.fetchData()
    }
  },
  mounted () {
    let that = this
    that.init()
  }
}
</script>

<style scoped>
.paging{
  margin-top: 100px;
}
.box{
  display: flex;
  margin: 0 auto 150px;
  justify-content: center;
}
ul{list-style: none;}
a{text-decoration: none;color: black;}
ul li{
  width: 73px;
  height: 44px;
  color: #454444;
  text-align: center;
  line-height: 44px;
  font-size: 20px;
  font-weight: normal;
  box-shadow: 0 5px 5px #eeeeee;
  margin-right: 17px;
  transform: translateX(-17px);
  cursor: pointer;
}

ul li:hover{
  background-color: #0b2366;
}
ul li:hover a{
  color: white;
}
.active{
  background-color: #0b2366;
}
.active a{
  color: white;
}
</style>

引用的位置

//父组件引用
//total-page-count传入需要的页数   
//pageindex 跳转页数的方法 ，参数是点击的页数
<paging @pageindex="pageindex($event)" total-page-count="16"></paging>

  methods:{
    pageindex(e){
      console.log(e)//自行操作吧
    }
  },