有的时候会遇到不用vue等组件的分页组件，就需要自己去封装分页组件。下面是根据原生的去封装 page 分页组件。
上代码：
html代码：
<div class="fanye">
<span>共<font class="col1">{{ totalPage }}</font>页</span>
<a @click="prevPage">上一页</a>
<a v-for="(item,index) in showPage" :class="[item.page===currPage?dtCss.my_pag_choose:'']" :key="index" @click="breakQtPage(item.page)">{{ item.text }}</a>
<a @click="nextPage">下一页</a>
到第<input v-model="breakPageNum" type="text" value="2" >页
<a @click="breakPage">确定</a>
</div>
script：
<script>
export default {
name: 'MyPage',
props: {
count: {
type: Number,
default: 0
},
parentCurrPage: {
type: Number,
default: 1
},
pageSize: {
type: Number,
default: 10
},
small: {
type: Number,
default: 1
}
},
data() {
return {
// totalPage: 1,
showPage: [],
breakPageNum: 1,
dtCss:{
my_pag_choose: 'xz'
},
currPage: this.parentCurrPage
}
},
watch:{
parentCurrPage(){
this.currPage= this.parentCurrPage
}
},
computed: {
totalPage() {
this.showPageHandler()
return Math.ceil(this.count / parseFloat(this.pageSize))
}
},
created() {
},
methods: {
currPageChange() {
this.$emit('currPageChange', this.currPage)
},
showPageHandler() {
const totalPage = Math.ceil(this.count / parseFloat(this.pageSize))
if(this.small === 2) {
if(totalPage > 4) {
const currPage = this.currPage
if (currPage <= 2) {
this.showPage = [{ text: '1', page: 1 },
{ text: '2', page: 2 }, { text: '...', page: 5 },
{ text: totalPage + '', page: totalPage }]
} else if (currPage >= totalPage - 1) {
this.showPage = [{ text: '1', page: 1 },
{ text: '...', page: totalPage - 2 }, { text: totalPage - 1, page: totalPage - 1 },
{ text: totalPage + '', page: totalPage }]
} else {
this.showPage = [
{ text: '1', page: 1 },
{ text: '...', page: currPage - 1 }, { text: currPage, page: currPage }, { text: '...', page: currPage + 1 },
{ text: totalPage + '', page: totalPage }
]
}
} else {
const newShow = []
for (let i = 0; i < totalPage; i++) {
newShow.push({ text: i + 1 + '', page: i + 1 })
}
this.showPage = newShow
}
} else {
if (totalPage > 6) {
const currPage = this.currPage
if (currPage <= 4) {
this.showPage = [{ text: '1', page: 1 },
{ text: '2', page: 2 }, { text: '3', page: 3 }, { text: '4', page: 4 }, { text: '...', page: 5 },
{ text: totalPage + '', page: totalPage }]
} else if (currPage >= totalPage - 3) {
this.showPage = [{ text: '1', page: 1 },
{ text: '...', page: totalPage - 4 }, { text: totalPage - 3, page: totalPage - 3 }, { text: totalPage - 2, page: totalPage - 2 }, { text: totalPage - 1, page: totalPage - 1 },
{ text: totalPage + '', page: totalPage }]
} else {
this.showPage = [
{ text: '1', page: 1 },
{ text: '...', page: currPage - 2 }, { text: currPage - 1, page: currPage - 1 }, { text: currPage, page: currPage }, { text: currPage + 1, page: currPage + 1 }, { text: '...', page: currPage + 2 },
{ text: totalPage + '', page: totalPage }
]
}
} else {
const newShow = []
for (let i = 0; i < totalPage; i++) {
newShow.push({ text: i + 1 + '', page: i + 1 })
}
this.showPage = newShow
}
}
},
breakPage() {
this.currPage = parseInt(this.breakPageNum)
if (this.currPage > this.totalPage || this.currPage < 1) {
return
}
this.currPageChange()
},
prevPage() {
this.currPage = parseInt(this.currPage) > 1 ? parseInt(this.currPage) - 1 : 1
this.currPageChange()
},
nextPage() {
this.currPage = parseInt(this.currPage) < this.totalPage - 1 ? parseInt(this.currPage) + 1 : this.totalPage
this.currPageChange()
},
breakQtPage(page) {
this.currPage = page
this.currPageChange()
}
}
}
</script>
css样式就没写了 可以根据自己的需求更改。
有问题请留言。
