亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

基于vue實現(xiàn)分頁/翻頁組件paginator示例

 更新時間:2017年03月09日 10:19:17   作者:louisanikita  
本篇文章主要介紹了基于vue實現(xiàn)分頁/翻頁組件paginator示例,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧

序言

項目需要自己寫了一個基于vue的paginator分享出來,歡迎各路好漢來指教

當頁數(shù)小于999(包括999)頁

頁數(shù)大于999頁

首頁或尾頁disabled

10頁之內(nèi)顯示

Usage

參數(shù)

pageCount: 整數(shù),代表總頁數(shù)

監(jiān)聽事件

@togglePage: 監(jiān)聽切換頁面事件,可以獲取到當前前往頁的頁數(shù)

父組件調(diào)用方法 index.vue

<template lang="html">
  <div>
    <paginator :pageCount="pageCount" @togglePage="togglePage($event)"></paginator>
  </div>
</template>

<script>
export default {
  data(){
    return{
      //總頁數(shù)
      pageCount: 24
    }
  },
  methods:{
    togglePage(indexPage){
      //打印出當前頁數(shù)
      console.log(indexPage);
    },
  }
}
</script>

分頁組件 paginator.vue

<template lang="html">
  <div class="pagination">
    <ul>
      <li :class="{disabled: curPage == 1}" @click="prevPage" v-if="pageCount > 1">上一頁</li>
      <li :class="{active: curPage == 1}" @click="page(1)">1</li>
      <li class="ellipsis" v-show="curPage > 5 && pageCount > 10">...</li>
      <li :class="{active: curPage == index+offset}" v-for="(item,index) in middlePages" @click="page(index+offset)">{{index+offset}}</li>
      <li class="ellipsis" v-show="curPage < bigLimit && pageCount > 10">...</li>
      <li :class="{active: curPage == pageCount}" @click="page(pageCount)" v-if="pageCount > 1">{{pageCount}}</li>
      <li :class="{disabled: curPage == pageCount}" @click="nextPage" v-if="pageCount > 1">下一頁</li>
    </ul>
  </div>
</template>

<script>
  export default {
    props:['pageCount'],
    data(){
      return {
        curPage: 1,
      };
    },
    computed:{
      middlePages(){
        if(this.pageCount <= 2){
          return 0;
        }else if(this.pageCount> 2 && this.pageCount <= 10){
          return this.pageCount-2;
        }else{
          return this.curPage > 999 ? 5 : 8;
        }
      },
      bigLimit(){
        return this.middlePages > 5 ? this.pageCount-6 : this.pageCount -3;
      },
      offset(){
        if(this.curPage <= 5){
          return 2;
        }else if(this.curPage >= this.bigLimit){
          return this.bigLimit-2;
        }else{
          return this.middlePages > 5 ? this.curPage-3 : this.curPage-2;
        }
      }
    },
    methods:{
      page(indexPage){
        this.$emit('togglePage',indexPage);
        this.curPage = indexPage;
      },
      prevPage(){
        if(this.curPage != 1){
          this.page(this.curPage-1);
        }
      },
      nextPage(){
        if(this.curPage != this.pageCount){
          this.page(this.curPage+1);
        }
      }
    }
  };
</script>

<style lang="css" scoped>
  @import 'styles/vars.css';
  .pagination{
    width: 660px;
    text-align: center;
    ul{
      margin: 40px 0 60px 0;
      li{
        cursor: pointer;
        display: inline-block;
        padding: 5px 9px;
        border: 1px solid #e1e1eb;
        margin-right: 5px;
        &.active{
          background: #4078c0;
          color: #fff;
        }
        &.ellipsis{
          border: none;
        }
        &.disabled{
          color: #dcdcdc;
        }
      }
    }
  }
</style>

以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • Vue獲取DOM元素樣式和樣式更改示例

    Vue獲取DOM元素樣式和樣式更改示例

    本篇文章主要介紹了Vue獲取DOM元素樣式和樣式更改示例,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-03-03
  • 通過vue.extend實現(xiàn)消息提示彈框的方法記錄

    通過vue.extend實現(xiàn)消息提示彈框的方法記錄

    這篇文章主要給大家介紹了關(guān)于通過vue.extend實現(xiàn)消息提示彈框的相關(guān)資料,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2021-01-01
  • 詳解hooks在vue3中的使用方法及示例

    詳解hooks在vue3中的使用方法及示例

    hooks可以通過特定的函數(shù)將邏輯 "鉤入" 組件中,使得開發(fā)者能夠更靈活地構(gòu)建和管理組件的功能從而提高代碼的可讀性以及可維護性等,本篇文章將介紹hooks如何在vue3中使用以及它的一些實際使用例子,讓大家能更好的了解和使用hooks,需要的朋友可以參考下
    2023-09-09
  • vue下拉列表的兩種實現(xiàn)方式比較

    vue下拉列表的兩種實現(xiàn)方式比較

    這篇文章主要介紹了vue下拉列表的兩種實現(xiàn)方式比較,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2021-06-06
  • 干貨!教大家如何選擇Vue和React

    干貨!教大家如何選擇Vue和React

    Vue和React之間如何選擇,這篇文章主要為大家詳細介紹了Vue和React兩者之間的相同之處,教大家該如何進行選擇,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2017-03-03
  • vue-model實現(xiàn)簡易計算器

    vue-model實現(xiàn)簡易計算器

    這篇文章主要為大家詳細介紹了vue-model實現(xiàn)簡易計算器,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2020-08-08
  • vue獲取v-for異步數(shù)據(jù)dom的解決問題

    vue獲取v-for異步數(shù)據(jù)dom的解決問題

    這篇文章主要介紹了vue獲取v-for異步數(shù)據(jù)dom的解決問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2023-03-03
  • vue實現(xiàn)移動端H5數(shù)字鍵盤組件使用詳解

    vue實現(xiàn)移動端H5數(shù)字鍵盤組件使用詳解

    這篇文章主要為大家詳細介紹了vue實現(xiàn)移動端H5數(shù)字鍵盤組件,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2020-08-08
  • Vue學習筆記進階篇之單元素過度

    Vue學習筆記進階篇之單元素過度

    這篇文章主要介紹了Vue學習筆記進階篇之單元素過度,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2017-07-07
  • antd中table展開行默認展示,且不需要前邊的加號操作

    antd中table展開行默認展示,且不需要前邊的加號操作

    這篇文章主要介紹了antd中table展開行默認展示,且不需要前邊的加號操作,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-11-11

最新評論