【Vue2】仿百度分页

vue 仿百度分页

效果图

代码

1. 公用组件

<template>
    <nav class="pagination_nav">
        <ul class="pagination">
            <li :class="{ 'disabled': current == 1 }"><a href="javascript:;" @click="setCurrent(current - 1)"> « </a></li>
            <li :class="{ 'disabled': current == 1 }"><a href="javascript:;" @click="setCurrent(1)"> 首页 </a></li>
            <li v-for="p in grouplist" :class="{ 'active': current == p.val }"><a href="javascript:;"
                    @click="setCurrent(p.val)"> {{ p.text }} </a>
            </li>
            <li :class="{ 'disabled': current == page }"><a href="javascript:;" @click="setCurrent(page)"> 尾页 </a></li>
            <li :class="{ 'disabled': current == page }"><a href="javascript:;" @click="setCurrent(current + 1)"> »</a></li>
        </ul>
    </nav>
</template>
  
<script type="es6">
export default {
    data() {
        return {
            current: this.currentPage
        }
    },
    props: {
        total: {// 数据总条数
            type: Number,
            default: 0
        },
        pageSize: {// 每页显示条数
            type: Number,
            default: 10
        },
        currentPage: {// 当前页码
            type: Number,
            default: 1
        },
        pagegroup: {// 分页条数
            type: Number,
            default: 10,
            coerce: function (v) {
                v = v > 0 ? v : 5;
                return v % 2 === 1 ? v : v + 1;
            }
        }
    },
    computed: {
        page: function () { // 总页数
            return Math.ceil(this.total / this.pageSize);
        },
        grouplist: function () { // 获取分页页码
            var len = this.page, temp = [], list = [], count = Math.floor(this.pagegroup / 2), center = this.current;
            if (len <= this.pagegroup) {
                while (len--) {
                    temp.push({ text: this.page - len, val: this.page - len });
                }
                ;
                return temp;
            }
            while (len--) {
                temp.push(this.page - len);
            }
            ;
            var idx = temp.indexOf(center);
            (idx < count) && (center = center + count - idx);
            (this.current > this.page - count) && (center = this.page - count);
            temp = temp.splice(center - count - 1, this.pagegroup);
            do {
                var t = temp.shift();
                list.push({
                    text: t,
                    val: t
                });
            } while (temp.length);
            if (this.page > this.pagegroup) {
                (this.current > count + 1) && list.unshift({ text: '...', val: list[0].val - 1 });
                (this.current < this.page - count) && list.push({ text: '...', val: list[list.length - 1].val + 1 });
            }
            return list;
        }
    },
    methods: {
        setCurrent: function (idx) {
            if (this.current != idx && idx > 0 && idx < this.page + 1) {
                this.current = idx;
                this.$emit('pagechange', this.current);
            }
        }
    }
}
</script>
  
<style lang="less">
.pagination_nav {
    background-color: #FFF;
    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
    height: 56px;
    display: flex;
    align-items: center;
    padding: 0 10px;

    .pagination {
        overflow: hidden;
        display: table;
        margin: 0 auto;
        height: 50px;

        li {
            float: left;
            height: 40px;
            border-radius: 5px;
            margin: 3px;
            color: #666;
            margin-right: 10px;

            & :hover {
                background: rgba(77, 167, 56, 1);
                color: #fff;

                a {
                    color: #fff;
                }

            }

            a {
                display: block;
                width: 40px;
                height: 40px;
                text-align: center;
                line-height: 40px;
                font-size: 16px;
                border-radius: 5px;
                text-decoration: none;
                color: #333;
            }

        }

        .active {
            background: #4DA738;

            a {
                color: #fff;
            }

        }
    }
}
</style>

2. 调用

<template>
    <el-input placeholder="请输入搜索内容" clearable v-model="query.keyword" @clear="handleClear" @input="handleSearchKeyword" />

    <Pagination :current-page="query.current" :page-size="query.size" :total="total" @pagechange="handlePageChange" />
</template>
 
<script>
import Pagination from "@/component/pagination.vue";
import {getList} from "@/api/xxx"
export default {
  components: { Pagination },
  data() {
     return {
		query: {
		    keyword:'',
        	current: 1,
       		size: 10
      	},
        total: 0,
        pageCurrent:'' // 当前选中第几页
     }
  },
  methods:{
        /**
        * 获取列表数据
        /
        fetchData(){
          getList(this.query).then(res=>{console.log(res,"列表")})
        }
   
        /**
        * 根据关键词筛选
        * @param {String} val
        */
        handleSearchKeyword(val) {
            if (val != "") {
                this.query.current = 1
                this.query.keyword = val;
                this.fetchData();
            }
        },

        /**
        * 清空输入框内容
        */
        handleClear() {
            this.query.current = this.pageCurrent
            this.fetchData();
        },

   	    /**
        * 当前是第几页
        * @param {Int} val
        */
        handlePageChange(val) {
            this.pageCurrent = val
            this.pageForm.current = val
            this.fetchData();
        }
  }
}
</script>