极简vue分页组件

2019年9月1日 149次阅读 来源: 我只是个弟弟啊

组件代码：
<template>
<div class=”pagination”>

<div class="left">
  <div
    :class="{'disable': currentPage == 1}"
    class="btn pre"
    @click="currentPage > 1 ?currentPage --: 1"
  ></div>
  <span>第</span>
  <input class="current" v-model="currentPage" type="text">
  <span>页</span>
  <div
    :class="{'disable': currentPage == pageCount}"
    class="btn next"
    @click="currentPage < pageCount ? currentPage ++: pageCount"
  ></div>
  <span class="pageCount">共{{pageCount}}页</span>
</div>
<div class="right">显现第{{startIndex}}到{{enIndex}}个纪录，共{{total}}个纪录</div>

</div>
</template>
<script>
export default {
data() {

return {
  currentPage: this.currentPage
};

},
watch: {

currentPage(value) {
  this.$emit("pageChange", value);
}

},
computed: {

pageCount() {
  return Math.ceil(this.total / this.pageSize);
},
startIndex() {
  return (this.currentPage - 1) * this.pageSize + 1;
},
enIndex() {
  if (this.currentPage * this.pageSize >= this.total) {
    return this.total;
  } else {
    return this.currentPage * this.pageSize;
  }
}

},
props: {

currentPage: {
  type: [Number, String],
  default: 1
},
pageSize: {
  type: [Number, String],
  default: 10
},
total: [Number, String]

}
};
</script>
<style lang=”scss” scoped>
.pagination {
-moz-user-select: none;
-khtml-user-select: none;
user-select: none;
font-size: 12px;
padding: 0 20px;
display: block;
overflow: hidden;
.left {

float: left;
.btn {
  display: inline-block;
  position: relative;
  background: #051024;
  border-radius: 3px;
  border: 1px solid rgba(22, 51, 106, 1);
  width: 23px;
  height: 23px;
  text-align: center;
  line-height: 23px;
  vertical-align: middle;
  cursor: pointer;
  &::after {
    content: " ";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    width: 0px;
    height: 0px;
    font-size: 0;
  }
}
.disable {
  cursor: not-allowed;
}
.pre::after {
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-right: 6px solid #bfffe1;
}
.next::after {
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 6px solid #bfffe1;
}
.current {
  display: inline-block;
  vertical-align: middle;
  width: 32px;
  height: 23px;
  border: 1px solid rgba(22, 51, 106, 1);
  background: rgba(5, 16, 36, 1);
  border-radius: 3px;
  text-align: center;
}
.pageCount {
  display: inline-block;
}

}
.right {

float: right;
line-height: 26px;

}
}
</style>

挪用体式格局：

  <pagination
    :total="total"
    :current-page="currentPage"
    :page-size="pageSize"
    @pageChange="pageChange"
  ></pagination>
    原文作者：我只是个弟弟啊
    原文地址: https://segmentfault.com/a/1190000018829298
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞