基于vue2.0實(shí)現(xiàn)仿百度前端分頁效果附實(shí)現(xiàn)代碼

更新時(shí)間：2018年10月30日 09:21:01 作者：fozero

本文通過實(shí)例代碼給大家介紹了基于vue2.0實(shí)現(xiàn)仿百度前端分頁效果,在文中給大家記錄了遇到的問題及解決方法，需要的朋友可以參考下

前言

上篇文章中，已經(jīng)使用vue實(shí)現(xiàn)前端分頁效果，這篇文章我們單獨(dú)將分頁抽離出來實(shí)現(xiàn)一個(gè)分頁組件

先看實(shí)現(xiàn)效果圖

代碼實(shí)現(xiàn)

按照慣例，我們?cè)趦鍪謱?shí)現(xiàn)的時(shí)候還是先想一想vue實(shí)現(xiàn)組件的思路

1、需要提前設(shè)定哪些參數(shù)需要暴露出來給父組件傳遞

<Paging 
   :name="name"
   @change="onPageChange"
   :page-size="size"
   :total="total"
   layout="jumper,total"
   :current-page="curPage"
  />

方法及參數(shù)說明
屬性
page-size 每頁顯示條目個(gè)數(shù)
total 總條目數(shù)
current-page 當(dāng)前頁數(shù)
layout 布局默認(rèn)不顯示 jumper,total

事件

change 當(dāng)前頁改變時(shí)觸發(fā)

2、再一個(gè)就是涉及到的父子組件通信

這里主要通過props向子組件傳遞參數(shù)

在子組件中使用emit自定義事件返回?cái)?shù)據(jù)給父組件

a.字符串?dāng)?shù)組形式props

props: ['title', 'likes', 'isPublished', 'commentIds', 'author']

或者指定每個(gè)prop的值類型

props: {
 title: String,
 likes: Number,
 isPublished: Boolean,
 commentIds: Array,
 author: Object
}

b.props驗(yàn)證

props: {
  // 基礎(chǔ)的類型檢查 (`null` 匹配任何類型)
  propA: Number,
  // 多個(gè)可能的類型
  propB: [String, Number],
  // 必填的字符串
  propC: {
   type: String,
   required: true
  },
  // 帶有默認(rèn)值的數(shù)字
  propD: {
   type: Number,
   default: 100
  },
  // 帶有默認(rèn)值的對(duì)象
  propE: {
   type: Object,
   // 對(duì)象或數(shù)組默認(rèn)值必須從一個(gè)工廠函數(shù)獲取
   default: function () {
    return { message: 'hello' }
   }
  },
  // 自定義驗(yàn)證函數(shù)
  propF: {
   validator: function (value) {
    // 這個(gè)值必須匹配下列字符串中的一個(gè)
    return ['success', 'warning', 'danger'].indexOf(value) !== -1
   }
  }
 }

使用props傳遞數(shù)據(jù)給子組件，子組件主要有三種形式來接收到父組件傳遞過來的參數(shù)
props字符串?dāng)?shù)組、指定每個(gè)prop值類型以及props驗(yàn)證，通常我們會(huì)使用props驗(yàn)證

分析完之后，接下來我們可以凍手實(shí)現(xiàn)了

1、這里我們用vue-cli先創(chuàng)建一個(gè)vue項(xiàng)目

安裝vue-cli

$npm install -g vue-cli

創(chuàng)建vue項(xiàng)目

$vue init webpack my-project

項(xiàng)目運(yùn)行

$cd my-project
$npm run dev

2、在components文件下創(chuàng)建一個(gè)Paging組件

<template>
 <div class="paging clearfix">
   <div class="page-size fl" v-if="isShowTotal">共{{total}}條</div>
    <ul class="page-list fl clearfix">
      <li @click="changePage(currentPage-1)">上一頁</li>
      <li :class="{'active':currentPage==item.val}" v-for="item in pagelist" v-text="item.text" @click="changePage(item.val)">1</li>
      <li @click="changePage(currentPage+1)">下一頁</li>
    </ul>
    <div class="page-jump fl" v-if="isShowJumper">
      前往<input class="input" type="text" v-model="toPage" @keydown="submit(toPage,$event)">頁
      <!-- <button @click="changePage(toPage)">確定</button> -->
    </div>
 </div>
</template>

<script>
export default {
 name: 'Paging',
 // props:[
 //  'name'
 // ],
 // prop驗(yàn)證
 props:{
  name:String,
  pageSize: {
   type: Number,
   default: 10
  },
  total: {
   type: Number,
   default: 0
  },
  currentPage: {
   type: Number,
   default: 1
  },
  layout:{
    type: String
  }
 },
 data () {
  return {
      isShowJumper:false,
      isShowTotal:false,
    toPage:'',//跳轉(zhuǎn)到x頁
      pageGroup:10//可見分頁數(shù)量 默認(rèn)10個(gè)分頁數(shù)
  }
 },
 created: function () {
    console.log('created');
    this.isShowTotal = this.layout.indexOf('total')!==-1;
    this.isShowJumper = this.layout.indexOf('jumper')!==-1;
  },
  mounted: function () {
    console.log('mounted',this.layout);
  },
  computed:{
    totalPage:function(){
      return Math.ceil(this.total / this.pageSize)
    },
    pagelist:function(){
      var list = [];
      var count = Math.floor(this.pageGroup/2), center = this.currentPage;
      var left = 1,right = this.totalPage;

      if(this.totalPage>this.pageGroup){
        if(this.currentPage>count+1){
          if(this.currentPage < this.totalPage - count){
            left = this.currentPage - count;
            right = this.currentPage + count-1;
          }else{
            left = this.totalPage - this.pageGroup+1;
          }
        }else{
          right = this.pageGroup;
        }
      }

      // 遍歷添加到數(shù)組里
      while(left<=right){
        list.push({
          text:left,
          val:left
        });
        left++;
      }
      return list;
    }
  },
 methods:{
  // 回車事件
  submit(toPage,e){
    // console.log('e.keyCode',toPage,e.keyCode)
    // key.Code === 13表示回車鍵 
    if(e.keyCode === 13){
      //邏輯處理
      this.changePage(toPage);
    }
  },
  changePage:function(idx){
    if(idx!=this.currentPage && idx>0 && idx<=this.totalPage){
      // 觸發(fā)父組件事件 pageChange會(huì)轉(zhuǎn)換成小寫pagechange
      this.$emit('change',{curPage:Number(idx)});
      }
  }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
*{
    padding: 0;
    margin: 0;
}
.fl{
  float: left;
}
.clearfix:after{
  display: block;
  content: '';
  clear: both;
}
.page-size{
    height: 26px;
  line-height: 26px;
}
.page-list{

}
.page-jump{
    height: 26px;
  line-height: 26px;
  margin-left: 20px;
}
.page-jump .input{
  width: 32px;
    padding: 4px 2px;
  border-radius: 2px;
  border: 1px solid #dcdfe6;
  margin: 0 4px;
}
  ul{
    list-style: none;
  }
  ul li{
    float: left;
    color: #606266;
    background: #f4f4f5;
    padding: 2px 8px;
    cursor: pointer;
    border-radius: 2px;
    margin: 0 5px;
  }
  ul>li.active{
    background: #409eff;
    color:#fff;
  }
</style>

3、在父組件中引入并使用組件

<template>
 <div>
  <!-- 分頁組件 -->
  <Paging 
   :name="name"
   @change="onPageChange"
   :page-size="size"
   :total="total"
   layout="jumper,total"
   :current-page="curPage"
  />
 </div>
</template>

<!-- 
Paging屬性 
page-size 每頁顯示條目個(gè)數(shù)
total 總條目數(shù)
current-page 當(dāng)前頁數(shù)
layout 布局 默認(rèn)不顯示 jumper,total

Paging事件

change 當(dāng)前頁改變時(shí)觸發(fā)
 -->
<script>

import Paging from '@/components/Paging';
export default {
 name: 'Index',
 components:{
  Paging
 },
 data () {
  return {
   msg: 'hello',
   name:'阿健a',
   size:10,
   total:201,
   curPage:1
  }
 },
 methods:{
  onPageChange:function(page){
   this.curPage = page.curPage;
  }
 }
}
</script>

遇到的問題

1、在子組件中修改currentPage時(shí)報(bào)錯(cuò)

Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders

在使用組件時(shí)，傳入的prop，被組件內(nèi)部又做了一次修改

避免直接修改prop，因?yàn)楫?dāng)父組件重新呈現(xiàn)時(shí)，值將被覆蓋

changePage:function(idx){
    if(idx!=this.currentPage && idx>0 && idx<=this.totalPage){
      this.currentPage = idx;
      // 觸發(fā)父組件事件 pageChange會(huì)轉(zhuǎn)換成小寫pagechange
      this.$emit('change');
      }
  }

解決

修改代碼，通過emit傳遞curPage給父組件，讓父組件修改

changePage:function(idx){
    if(idx!=this.currentPage && idx>0 && idx<=this.totalPage){
      // 觸發(fā)父組件事件 pageChange會(huì)轉(zhuǎn)換成小寫pagechange
      this.$emit('change',{curPage:idx});
      }
  }

父組件監(jiān)聽事件更新curPage

onPageChange:function(page){
   this.curPage = page.curPage;
  }

最后

以上就是分頁組件的整個(gè)實(shí)現(xiàn)過程，其實(shí)只要搞清楚父子組件是如何傳參的，以及我們實(shí)現(xiàn)一個(gè)組件需要暴露哪些參數(shù)給父組件，整個(gè)實(shí)現(xiàn)過程還是不難的

總結(jié)

以上所述是小編給大家介紹的基于vue2.0實(shí)現(xiàn)仿百度前端分頁效果附實(shí)現(xiàn)代碼，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: