基于vue2.0實(shí)現(xiàn)仿百度前端分頁(yè)效果附實(shí)現(xiàn)代碼
前言
上篇文章中，已經(jīng)使用vue實(shí)現(xiàn)前端分頁(yè)效果，這篇文章我們單獨(dú)將分頁(yè)抽離出來(lái)實(shí)現(xiàn)一個(gè)分頁(yè)組件
先看實(shí)現(xiàn)效果圖
代碼實(shí)現(xiàn)
按照慣例，我們?cè)趦鍪謱?shí)現(xiàn)的時(shí)候還是先想一想vue實(shí)現(xiàn)組件的思路
1、需要提前設(shè)定哪些參數(shù)需要暴露出來(lái)給父組件傳遞
<Paging :name="name" @change="onPageChange" :page-size="size" :total="total" layout="jumper,total" :current-page="curPage" />
方法及參數(shù)說(shuō)明
屬性
page-size 每頁(yè)顯示條目個(gè)數(shù)
total 總條目數(shù)
current-page 當(dāng)前頁(yè)數(shù)
layout 布局 默認(rèn)不顯示 jumper,total
事件
change 當(dāng)前頁(yè)改變時(shí)觸發(fā)
2、再一個(gè)就是涉及到的父子組件通信
這里主要通過(guò)props向子組件傳遞參數(shù)
在子組件中使用emit自定義事件返回?cái)?shù)據(jù)給父組件
a.字符串?dāng)?shù)組形式props
props: ['title', 'likes', 'isPublished', 'commentIds', 'author']
或者指定每個(gè)prop的值類(lèi)型
props: {
title: String,
likes: Number,
isPublished: Boolean,
commentIds: Array,
author: Object
}
b.props驗(yàn)證
props: {
// 基礎(chǔ)的類(lèi)型檢查 (`null` 匹配任何類(lèi)型)
propA: Number,
// 多個(gè)可能的類(lèi)型
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è)工廠(chǎng)函數(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ù)給子組件 ，子組件主要有三種形式來(lái)接收到父組件傳遞過(guò)來(lái)的參數(shù)
props字符串?dāng)?shù)組、指定每個(gè)prop值類(lèi)型以及props驗(yàn)證，通常我們會(huì)使用props驗(yàn)證
分析完之后，接下來(lái)我們可以?xú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)">上一頁(yè)</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)">下一頁(yè)</li>
</ul>
<div class="page-jump fl" v-if="isShowJumper">
前往<input class="input" type="text" v-model="toPage" @keydown="submit(toPage,$event)">頁(yè)
<!-- <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頁(yè)
pageGroup:10//可見(jiàn)分頁(yè)數(shù)量 默認(rèn)10個(gè)分頁(yè)數(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:{
// 回車(chē)事件
submit(toPage,e){
// console.log('e.keyCode',toPage,e.keyCode)
// key.Code === 13表示回車(chē)鍵
if(e.keyCode === 13){
//邏輯處理
this.changePage(toPage);
}
},
changePage:function(idx){
if(idx!=this.currentPage && idx>0 && idx<=this.totalPage){
// 觸發(fā)父組件事件 pageChange會(huì)轉(zhuǎn)換成小寫(xiě)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> <!-- 分頁(yè)組件 --> <Paging :name="name" @change="onPageChange" :page-size="size" :total="total" layout="jumper,total" :current-page="curPage" /> </div> </template>
<!--
Paging屬性
page-size 每頁(yè)顯示條目個(gè)數(shù)
total 總條目數(shù)
current-page 當(dāng)前頁(yè)數(shù)
layout 布局 默認(rèn)不顯示 jumper,total
Paging事件
change 當(dāng)前頁(yè)改變時(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>
遇到的問(wèn)題
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)換成小寫(xiě)pagechange
this.$emit('change');
}
}
解決
修改代碼，通過(guò)emit傳遞curPage給父組件，讓父組件修改
changePage:function(idx){
if(idx!=this.currentPage && idx>0 && idx<=this.totalPage){
// 觸發(fā)父組件事件 pageChange會(huì)轉(zhuǎn)換成小寫(xiě)pagechange
this.$emit('change',{curPage:idx});
}
}
父組件監(jiān)聽(tīng)事件更新curPage
onPageChange:function(page){
this.curPage = page.curPage;
}
最后
以上就是分頁(yè)組件的整個(gè)實(shí)現(xiàn)過(guò)程 ，其實(shí)只要搞清楚父子組件是如何傳參的，以及我們實(shí)現(xiàn)一個(gè)組件需要暴露哪些參數(shù)給父組件，整個(gè)實(shí)現(xiàn)過(guò)程還是不難的
總結(jié)
以上所述是小編給大家介紹的基于vue2.0實(shí)現(xiàn)仿百度前端分頁(yè)效果附實(shí)現(xiàn)代碼，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
下面小編就為大家分享一篇iview中Select 選擇器多選校驗(yàn)方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
這篇文章主要介紹了vue3在jsx中使用component組件方式,具有很好的 參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
基于vue.js路由參數(shù)的實(shí)例講解——簡(jiǎn)單易懂
下面小編就為大家?guī)?lái)一篇基于vue.js路由參數(shù)的實(shí)例講解——簡(jiǎn)單易懂。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09
Vue動(dòng)態(tài)組件表格的實(shí)現(xiàn)代碼
這篇文章主要介紹了Vue動(dòng)態(tài)組件表格的實(shí)現(xiàn)代碼,包括框架結(jié)構(gòu)組件，文中還給大家封裝了幾個(gè)組件，有按鈕組件、圖片組件、滑動(dòng)開(kāi)關(guān)，結(jié)合示例代碼給大家詳細(xì)講解，需要的朋友可以參考下2022-10-10
在本篇文章里小編給大家分享了關(guān)于Vue可自定義tab組件用法實(shí)例以及相關(guān)知識(shí)點(diǎn)，需要的朋友們參考下。2019-10-10
Vue.js是前端三大框架之一,以其輕巧、高性能的特性脫穎而出,Vue.js專(zhuān)注于構(gòu)建數(shù)據(jù)驅(qū)動(dòng)的Web界面,采用漸進(jìn)式設(shè)計(jì),易于上手,支持組件化開(kāi)發(fā),核心功能包括響應(yīng)式數(shù)據(jù)綁定和視圖組件的組合,Vue還提供了生命周期、事件綁定等多種功能,支持ES6語(yǔ)法2024-09-09
關(guān)于Vue Router中路由守衛(wèi)的應(yīng)用及在全局導(dǎo)航守衛(wèi)中檢查元字段的方法
這篇文章主要介紹了關(guān)于Vue Router中路由守衛(wèi)的應(yīng)用及在全局導(dǎo)航守衛(wèi)中檢查元字段的方法，實(shí)現(xiàn)方法有兩種，本文通過(guò)實(shí)例代碼對(duì)每種方法介紹的很詳細(xì)，需要的朋友參考下2018-12-12
這篇文章主要介紹了mpvue全局引入sass文件的方法步驟，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
Vue項(xiàng)目History模式404問(wèn)題解決方法
本文主要解決Vue項(xiàng)目使用History模式發(fā)布到服務(wù)器Nginx上刷新頁(yè)面404問(wèn)題。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-10-10
解決Vuepress碼云部署及自動(dòng)跳轉(zhuǎn)404的問(wèn)題
這篇文章主要介紹了解決Vuepress碼云部署及自動(dòng)跳轉(zhuǎn)404的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09