<template>
? ? <div>
? ? ? ? <div class="main-all">
? ? ? ? ? ? <ul>
? ? ? ? ? ? ? ? <li @click="changePage(currentPage-1)"><</li>
? ? ? ? ? ? ? ? <li :class="currentPage === firstpage ? 'current':''"? @click="changePage(firstpage)">{{firstpage}}</li>
? ? ? ? ? ? ? ? <li :class="currentPage === firstpage+1 ? 'current':''" @click="changePage(firstpage+1)" v-if="dataPages > 1">{{firstpage+1}}</li>
? ? ? ? ? ? ? ? <li :class="currentPage === firstpage+2 ? 'current':''" @click="changePage(firstpage+2)" v-if="dataPages > 2">{{firstpage+2}}</li>
? ? ? ? ? ? ? ? <li :class="currentPage === firstpage+3 ? 'current':''" @click="changePage(firstpage+3)" v-if="dataPages > 3">{{firstpage+3}}</li>
? ? ? ? ? ? ? ? <li :class="currentPage === firstpage+4 ? 'current':''" @click="changePage(firstpage+4)" v-if="dataPages > 4">{{firstpage+4}}</li>
? ? ? ? ? ? ? ? <li @click="changePage(currentPage+5)" v-if="dataPages > 5 && firstpage+4 < dataPages-1 ">...</li>
? ? ? ? ? ? ? ? <li :class="currentPage === dataPages ? 'current':''" @click="changePage(dataPages)" v-if="dataPages > 5">{{dataPages}}</li>
? ? ? ? ? ? ? ? <li @click="changePage(toPage)" class="text-one">跳到</li>
? ? ? ? ? ? ? ? <input v-model="toPage" @keyup.enter="changePage(toPage)" class="text-input" type="text">
? ? ? ? ? ? ? ? <li class="text-two">頁</li>
? ? ? ? ? ? ? ? <li @click="changePage(currentPage+1)">></li>
? ? ? ? ? ? </ul>
? ? ? ? </div>
? ? </div>
</template>
<script>
? export default {
? ? name: "pagination",
? ? props: {
//總頁數(shù)
? ? ? dataPages: {
? ? ? ? type: Number,
? ? ? ? default:21
? ? ? },
//當前頁
? ? ? dataIndex: {
? ? ? ? type: Number,
? ? ? ? default:1
? ? ? }
? ? },
? ? data () {
? ? ? return {
? ? ? ? firstpage:1,
? ? ? ? currentPage:1,
? ? ? ? toPage:1
? ? ? }
? ? },
? ? mounted() {
? ? ? this.currentPage = this.dataIndex
? ? },
? ? methods: {
? ? ? changePage(page){
? ? ? ? this.currentPage = page
? ? ? ? if(page > this.firstpage+4){
? ? ? ? ? this.firstpage = page-4
? ? ? ? }
? ? ? ? if(page < this.firstpage){
? ? ? ? ? this.firstpage = page
? ? ? ? }
? ? ? ? if(page === this.dataPages){
? ? ? ? ? this.firstpage = page-5
? ? ? ? }
? ? ? ? if(page > this.dataPages){
? ? ? ? ? this.firstpage = this.dataPages-6
? ? ? ? ? this.currentPage = this.dataPages
? ? ? ? }
? ? ? ? if(page < 1){
? ? ? ? ? this.currentPage = 1
? ? ? ? ? this.firstpage = 1
? ? ? ? }
? ? ? ? this.firstpage = parseInt(this.firstpage)
? ? ? ? this.currentPage = parseInt(this.currentPage)
? ? ? ? console.log(page)
? ? ? ? console.log( this.firstpage)
? ? ? ? console.log( this.currentPage)
? ? ? }
? ? }
? }
</script>
<style scoped lang="scss">
? ? .main-all{
? ? ? ? ul{
? ? ? ? ? ? li{
? ? ? ? ? ? ? ? width: 30px;
? ? ? ? ? ? ? ? height: 30px;
? ? ? ? ? ? ? ? float: left;
? ? ? ? ? ? ? ? background-color: #ffffff;
? ? ? ? ? ? ? ? border: solid 1px #dcdcdc;
? ? ? ? ? ? ? ? font-size: 16px;
? ? ? ? ? ? ? ? line-height: 30px;
? ? ? ? ? ? ? ? color: #666666;
? ? ? ? ? ? ? ? text-align: center;
? ? ? ? ? ? ? ? cursor: pointer;
? ? ? ? ? ? }
? ? ? ? ? ? .text-one{
? ? ? ? ? ? ? ? width: 50px;
? ? ? ? ? ? ? ? border: none;
? ? ? ? ? ? }
? ? ? ? ? ? .text-input{
? ? ? ? ? ? ? ? float: left;
? ? ? ? ? ? ? ? display: inline-block;
? ? ? ? ? ? ? ? width: 30px;
? ? ? ? ? ? ? ? height: 30px;
? ? ? ? ? ? ? ? border: solid 1px #dcdcdc;
? ? ? ? ? ? ? ? color: #666666;
? ? ? ? ? ? }
? ? ? ? ? ? .text-two{
? ? ? ? ? ? ? ? border: none;
? ? ? ? ? ? }
? ? ? ? ? ? .current{
? ? ? ? ? ? ? ? background-color: #e63452;
? ? ? ? ? ? ? ? border: solid 1px #e63452;
? ? ? ? ? ? ? ? color: #ffffff;
? ? ? ? ? ? }
? ? ? ? }
? ? }
</style>
效果如圖：
功能簡介：點擊“<”去到上1頁
? ? ? ? ? ? ? ? ??點擊“>”去到下1頁
? ? ? ? ? ? ? ? ? 點擊“...”去到下5頁
? ? ? ? ? ? ? ? ? 點擊“跳到”去到輸入頁
? ? ? ? ? ? ? ? ? 輸入框輸入按"enter"去到輸入頁
