Heim > Web-Frontend > js-Tutorial > Hauptteil

Mit vue2.0 implementierte Paging-Komponente

PHP中文网
Freigeben: 2017-06-22 14:29:42
Original
1475 Leute haben es durchsucht

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>
Nach dem Login kopieren

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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage