Mit vue2.0 implementierte Paging-Komponente

Vor kurzem habe ich vue2.0 verwendet, um ein Projekt zu rekonstruieren. Da ich keine geeignete Paging-Komponente gefunden habe, habe ich selbst eine geschrieben:

Dieses Projekt wird mit vue-cli erstellt. Wenn Sie in Ihrem Projekt kein Webpack verwenden, passen Sie es bitte entsprechend dem Code an:

Erstellen Sie zunächst eine neue pagination.vue Die Codes für alle Komponenten sind hier geschrieben. Die Komponente ist nicht allzu schwierig. Sie löst hauptsächlich das Problem der Werteübertragung zwischen übergeordneten und untergeordneten Komponenten Wenn Sie ihn verwenden, führen Sie ihn in die übergeordnete Komponente ein:

<template>
  <nav>
    <ul class="pagination">
      <li :class="{&#39;disabled&#39;: current == 1}"><a href="javascript:;" @click="setCurrent(current - 1)"> « </a></li>
      <li :class="{&#39;disabled&#39;: current == 1}"><a href="javascript:;" @click="setCurrent(1)"> 首页 </a></li>
      <li v-for="p in grouplist" :class="{&#39;active&#39;: current == p.val}"><a href="javascript:;"  @click="setCurrent(p.val)"> {{ p.text }} </a>
      </li>
      <li :class="{&#39;disabled&#39;: current == page}"><a href="javascript:;" @click="setCurrent(page)"> 尾页 </a></li>
      <li :class="{&#39;disabled&#39;: current == page}"><a href="javascript:;" @click="setCurrent(current + 1)"> »</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: &#39;...&#39;, 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(&#39;pagechange&#39;, this.current);
        }
      }
    }
  }</script>

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

  li {float: left;
    height: 30px;
    border-radius: 5px;
    margin: 3px;
    color: #666;  &
  :hover {
    background: #000;

  a {
    color: #fff;
  }

  }
  a {
    display: block;
    width: 30px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    font-size: 12px;
    border-radius: 5px;
    text-decoration: none
  }

  }
  .active {
    background: #000;

  a {
    color: #fff;
  }

  }
  }</style>

An diesem Punkt ist eine auf vue2.0 basierende Paging-Komponente fertiggestellt

Das obige ist der detaillierte Inhalt vonMit vue2.0 implementierte Paging-Komponente. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!