【Vue2】仿百度分页

如果你不相信努力和时光,那么成果就会是第一个选择辜负你的。不要去否定你自己的过去,也不要用你的过去牵扯你现在的努力和对未来的展望。不是因为拥有希望你才去努力,而是去努力了,你才有可能看到希望的光芒。【Vue2】仿百度分页,希望对大家有帮助,欢迎收藏,转发!站点地址:www.bmabk.com,来源:原文

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>
  1. 调用
<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>

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

文章由极客之音整理,本文链接:https://www.bmabk.com/index.php/post/194971.html

(0)
飞熊的头像飞熊bm

相关推荐

发表回复

登录后才能评论
极客之音——专业性很强的中文编程技术网站,欢迎收藏到浏览器,订阅我们!