vue 之分页器 2

vue 之分页器 2

pagination/Pagination.vue

<!-- 一个简单的分页器组件 -->
<template>
  <div class="page_wrap clear_fix">
    <div class="select_wrap">
      每页
      <span>{{ comShowPage }}</span>条 共
      <span>{{ comTotal }}</span>条
    </div>
    <div class="firstPage" @click="firstPage" :class="{ prePageGray: comCurrentPage == 1 }">首页</div>
    <div class="prePage" @click="prePage" :class="{ prePageGray: comCurrentPage == 1 }">上一页</div>
    <div class="pageCell clear_fix">
      <div
        v-for="(item, index) in comEndPage"
        :key="index"
        :class="{ active: comCurrentPage === index + 1 }"
        @click="changePage(index)"
      >{{ item }}</div>
    </div>
    <div
      class="nextPage"
      @click="nextPage"
      :class="{ prePageGray: comCurrentPage >= comEndPage }"
    >下一页</div>
    <div
      class="lastPage"
      @click="lastPage"
      :class="{ prePageGray: comCurrentPage == comEndPage }"
    >尾页</div>
    <div class="goto">
      <input type="text" v-model="inpValue" @keyup.enter="goTo" />
      <span @click="goTo">跳转</span>
    </div>
  </div>
</template>

<script>
export default {
  name: "Pagination",
  components: {},
  props: {
    showPage: {
      type: Number,
      default() {
        return 10;
      }
    },
    total: {
      type: Number,
      default() {
        return 10;
      }
    },
    currentPage: {
      type: Number,
      default() {
        return 1;
      }
    },
    size: {
      type: Number,
      default() {
        return 10;
      }
    }
  },
  data() {
    return {
      comShowPage: this.showPage,
      comCurrentPage: this.currentPage,
      comTotal: this.total,
      inpValue: ""
    };
  },
  computed: {
    comEndPage() {
      return parseInt(this.comTotal / this.comShowPage);
    }
  },
  methods: {
    firstPage() {
      this.comCurrentPage = 1;
      this.$emit("changePage", this.comCurrentPage);
    },
    prePage() {
      this.comCurrentPage = this.comCurrentPage - 1;
      if (this.comCurrentPage <= 0) {
        this.comCurrentPage = 1;
      }
      this.$emit("changePage", this.comCurrentPage);
    },
    nextPage() {
      this.comCurrentPage = this.comCurrentPage * 1 + 1;
      if (this.comCurrentPage >= this.comEndPage) {
        this.comCurrentPage = this.comEndPage;
      }
      this.$emit("changePage", this.comCurrentPage);
    },
    // 修改当前页
    changePage(index) {
      console.log("index", index);
      this.comCurrentPage = index + 1;
      this.$emit("changePage", this.comCurrentPage);
    },
    lastPage() {
      this.comCurrentPage = this.comEndPage;
      this.$emit("changePage", this.comCurrentPage);
    },
    goTo() {
      this.changePage(this.inpValue - 1);
      this.inpValue = "";
    }
  }
};
</script>
<style lang="scss" scoped>
/* 清除浮动 */
.clear_fix:after {
  content: ".";
  clear: both;
  height: 0;
  overflow: hidden;
  display: block;
  visibility: hidden;
}

.clear_fix {
  zoom: 1;
}
.page_wrap {
  height: 32px;
  line-height: 32px;
  cursor: pointer;
  -ms-user-select: none; /*IE10*/
  -khtml-user-select: none; /*早期浏览器*/
  user-select: none;
  -moz-user-select: none; /*火狐*/
  -webkit-user-select: none; /*webkit浏览器*/

  .prePageGray {
    color: #ccc;
    cursor: not-allowed;
  }
  & > div {
    float: left;
    padding: 0 5px;
    margin: 0 5px;
    border: 1px solid #000;
  }
  & > div:nth-child(1) {
    border: none;
  }
  .pageCell {
    border: none;
    padding: 0;
    background: #fff;
    & > div {
      float: left;
      margin-right: 5px;
      width: 32px;
      height: 32px;
      text-align: center;
      line-height: 32px;
      border: 1px solid #ccc;
    }
    .active {
      background: pink;
      color: #fff;
    }
  }
  .goto {
    input {
      padding-left: 10px;
      height: 28px;
      line-height: 28px;
      width: 32px;
      border: none;
      outline: none;
      border-bottom: 1px solid #000;
      color: red;
    }
    span {
      padding-left: 5px;
    }
  }
}
</style>

pagination/index.js

/**
 * 分页 组件
 */
import Pagination from "./Pagination.vue";
Pagination.install = function (vue) {
  vue.component(Pagination.name, Pagination);
};
export default Pagination;

main.js

import Pagination from "@/components/commom/pagination/index";
Vue.use(Pagination);

使用分页组件

<template>
  <div>
    <Pagination
      :showPage="pages.showPage"
      :total="pages.total"
      :size="pages.size"
      :currentPage="pages.currentPage"
      @changePage="changePage"
    ></Pagination>
  </div>
</template>

<script>
export default {
  name: "Dres",
  data() {
    return {
      pages: {
        total: 100,
        showPage: 10,
        unit: 1,
        page: 1, //当前页码
        size: 10 //每页显示条目个数不传默认10
      },
      list: [],
    };
  },
  methods: {
    changePage(val) {
      console.log("当前页", val);
      this.pages.page = val;
    }
  }
};
</script>
<style lang="scss" scoped></style>