页码跳转组件

页码跳转组件

新建Vue文件pagination.vue文件

<template>
  <nav>
    <ul class="pagination">
      <li :class="{'disabled': current == 1}">
        <a
          href="javascript:;"
          @click="setCurrent(1)"
        >首页</a>
      </li>
      <li
        v-for="p in grouplist"
        :key="p"
        :class="{'active': current == p.val}"
      >
        <a
          href="javascript:;"
          @click="setCurrent(p.val)"
        >{{ p.text }}</a>
      </li>
      <!-- <li :class="{'disabled': current == page}">
        <a href="javascript:;" @click="setCurrent(page)">尾页</a>
      </li> -->
      <li :class="{'disabled': current == 1}">
        <a
          href="javascript:;"
          @click="setCurrent(current - 1)"
          class="top"
        >上一页</a>
      </li>
      <li :class="{'disabled': current == page}">
        <a
          href="javascript:;"
          @click="setCurrent(current + 1)"
          class="down"
        >下一页</a>
      </li>
    </ul>
  </nav>
</template>

<script type="es6">
export default {
  data() {
    return {
      current: this.currentPage
    };
  },
  props: {
    total: {
      // 数据总条数
      type: Number,
      default: 0
    },
    display: {
      // 每页显示条数
      type: Number,
      default: 10
    },
    currentPage: {
      // 当前页码
      type: Number,
      default: 1
    },
    pagegroup: {
      // 分页条数
      type: Number,
      default: 5,
      coerce: function(v) {
        v = v > 0 ? v : 5;
        return v % 2 === 1 ? v : v + 1;
      }
    }
  },
  computed: {
    page: function() {
      // 总页数
      return Math.ceil(this.total / this.display);
    },
    grouplist: function() {
      // 获取分页页码
      var len = this.page,
        temp = [],
        list = [],
        count = Math.floor(this.pagegroup / 2),
        center = this.current;
      if (len <= this.pagegroup) {
        while (len--) {
          temp.push({ text: this.page - len, val: this.page - len });
        }
        return temp;
      }
      while (len--) {
        temp.push(this.page - len);
      }
      var idx = temp.indexOf(center);
      idx < count && (center = center + count - idx);
      this.current > this.page - count && (center = this.page - count);
      temp = temp.splice(center - count - 1, this.pagegroup);
      do {
        var t = temp.shift();
        list.push({
          text: t,
          val: t
        });
      } while (temp.length);
      if (this.page > this.pagegroup) {
        this.current > count + 1 &&
          list.unshift({ text: "...", val: list[0].val - 1 });
        this.current < this.page - count &&
          list.push({ text: "...", val: list[list.length - 1].val + 1 });
      }
      return list;
    }
  },
  methods: {
    setCurrent: function(idx) {
      if (this.current != idx && idx > 0 && idx < this.page + 1) {
        this.current = idx;
        this.$emit("pagechange", this.current);
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.pagination {
  overflow: hidden;
  display: table;
  margin: 0 auto;
  /*width: 100%;*/
  height: 50px;

  li {
    float: left;
    width: 65px;
    height: 65px;
    // border-radius: 5px;
    border: 1px solid #dddddd;
    margin: 0px 5px;
    text-align: center;
    line-height: 65px;
    // color: #666;

    & :hover {
      background: #ffd050;

      a {
        color: #fff;
      }
    }
    a {
      display: block;
      width: 65px;
      height: 65px;
      text-align: center;
      line-height: 65px;
      font-size: 18px;
      // border-radius: 5px;
      text-decoration: none;
    }
    .top:hover {
      background: #fff;
    }
    .down:hover {
      background: #fff;
    }
  }
  .active {
    background: #ffd050;

    a {
      color: #fff;
    }
  }
}
</style>

在使用页面

<div class="yema">
      <v-pagination
        :total="total"
        :current-page="current"
        @pagechange="pagechange"
      ></v-pagination>
      <!-- <div id="demo7"></div> -->
    </div>

/

//引入分页组件
import pagination from "@/components/commons/pagination/pagination.vue";

/
export default {
  data() {
    return {
      total: 0, // 记录总条数
      display: 10, // 每页显示条数
      current: 1, // 当前的页数
      currentPage: 1, //点击的页码
      page: 1,
      pageSize: 10,
      totalCount: 0,
      id: "", //点击的每一项的id
      list: [
        // { id: "1", pic: require("../../assets/images/首页-1.jpg") },
        // { id: "2", pic: require("../../assets/images/首页-1.jpg") },
        // { id: "3", pic: require("../../assets/images/首页-1.jpg") }
      ]
    };
  },
  components: {
    Footer,
    //引入分页组件
    "v-pagination": pagination
  },
  methods: {
    pagechange: function(currentPage) {
      console.log(2222222);
      console.log(currentPage);
      this.currentPage = currentPage;
      // ajax请求, 向后台发送 currentPage, 来获取对应的数据
      this.pagination();
    },
 }