【vue 仿百度分页】

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>
    <Pagination :current-page="query.current" :page-size="query.size" :total="total" @pagechange="handlePageChange" />
</template>
 
<script>
import Pagination from "@/component/pagination.vue";
export default {
  components: { Pagination },
  data() {
     return {
		query: {
        	current: 1,
       		size: 10
      	},
        total: 0,
     }
  },
  methods:{
    /**
     * 当前是第几页
     * @param {Int} val
     */
    handlePageChange(val) {
      this.query.current = val;
      this.fetchData();
    }
  }
}
</script>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/128838.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

JAVA对象大小的获取

1. Java 对象的内存布局 Java的实例对象、数组对象在内存中的组成包括如下三部分&#xff1a;对象头Hearder、实例数据、内存填充。示意图如下所示 对象头 其主要包括两部分数据&#xff1a;Mark Word、Class对象指针。特别地对于数组对象而言&#xff0c;其还包括了数组长度…

2022年09月 Python(四级)真题解析#中国电子学会#全国青少年软件编程等级考试

Python等级考试(1~6级)全部真题・点这里 一、单选题(共25题,每题2分,共50分) 第1题 下列不是评判一个算法优劣的标准是?( ) A: 时间复杂度 B: 空间复杂度 C: 难易度 D: 健壮性 答案:C 评价算法的优劣是:时间复杂度,空间复杂度,健壮性,正确性,可读性。因此选…

一周成功拿下4个offer的软件测试面试题,面试必看系列

前言&#xff1a; 压到就是赚到&#xff0c;面试通过的机率就更大&#xff0c;干就完了铁子 【文章末尾给大家留下了大量的福利】 ​编辑 1、什么是兼容性测试&#xff1f;兼容性测试侧重哪些方面&#xff1f; 参考答案&#xff1a; 兼容测试主要是检查软件在不同的硬件平…

el-table 多表格弹窗嵌套数据显示异常错乱问题

1、业务背景 使用vueelement开发报表功能时&#xff0c;需要列表上某列的超链接按钮弹窗展示&#xff0c;在弹窗的el-table列表某列中再次使用超链接按钮点开弹窗&#xff0c;以此类推多表格弹窗嵌套&#xff0c;本文以弹窗两次为例 最终效果如下示例页面 2、具体实现和问题…

【狂神说Java】Swagger + 任务

✅作者简介&#xff1a;CSDN内容合伙人、信息安全专业在校大学生&#x1f3c6; &#x1f525;系列专栏 &#xff1a;狂神说Java &#x1f4c3;新人博主 &#xff1a;欢迎点赞收藏关注&#xff0c;会回访&#xff01; &#x1f4ac;舞台再大&#xff0c;你不上台&#xff0c;永远…

重庆市5米数字高程(DEM)数据

重庆位于中国西南部、长江上游地区&#xff0c;地跨东经10511~11011、北纬2810~3213之间的青藏高原与长江中下游平原的过渡地带。东邻湖北、湖南&#xff0c;南靠贵州&#xff0c;西接四川&#xff0c;北连陕西&#xff1b;辖区东西长470千米&#xff0c;南北宽450千米&#xf…

uni-app——項目day01

配置uni-app開發環境 uni-app快速上手 | uni-app官网 创建项目 图中四个划线就是要配置的地方. 选择vue2还是vue3看个人选择。 目录结构 但是现在新版本创建的项目已经没有components目录了&#xff0c;需要自己创建。 项目运行到微信开发者工具 使用git管理项目 node-mod…

【神印王座】林鑫和李馨甜蜜接吻,团灭七阶恶魔,温馨结尾

Hello,小伙伴们&#xff0c;我是小郑继续为大家深度解析国漫资讯。 深度爆料&#xff0c;《神印王座》80话最新剧情解析。有关李馨与林鑫的爱情故事源于一场争执。那时&#xff0c;两人都年轻气盛&#xff0c;不肯向对方低头。但是&#xff0c;经过一段时间的相处&#xff0c;…

ARM day4

LED灯亮灭控制 .text .global _start _start: 1ldr r0,0x50000a28ldr r1,[r0]orr r1,r1,#(0x3<<4)str r1,[r0] 2ldr r0,0x50006000ldr r1,[r0]bic r1,r1,#(0x3<<20)orr r1,r1,#(0x1<<20)bic r1,r1,#(0x3<<16)orr r1,r1,#(0x1<<16)str r1,[r0]…

java语法:继承与多态

导言: 在Java中&#xff0c;继承和多态是面向对象编程的两个重要概念&#xff0c;它们允许我们创建更加灵活和可扩展的代码。本文主要对继承和多态的语法和一些细节做一个介绍和解释。 目录 导言: 正文&#xff1a; 一.继承 1. 基本语法 2. 继承的特点 3.子类中访问父类…

补坑:Java的字符串String类(1)

常用方法 字符串构造 来看看源码里面String的构造方法 普通字符串 //"hello" 是字符串常量&#xff0c;没有\0标记结尾String str "hello";System.out.println(str);//helloString str2 new String();System.out.println(str2);//没有输出String str3…

“三位一体”超级混沌工程主要特点及功能

“三位一体”超级混沌工程X-Chaos主要包括基础故障编排、业务场景故障编排、演练场景编排、故障库管理、演练场景管理、演练计划管理、演练观测和演练报告等模块&#xff0c;支持对传统架构、云环境以及国产化基础环境的IT系统进行故障演练。本文将介绍混沌工程主要特点及主要功…

归并分治 笔记

归并分治 前置知识&#xff1a;讲解021-归并排序 原理&#xff1a; (1&#xff09;思考一个问题在大范围上的答案&#xff0c;是否等于&#xff0c;左部分的答案 右部分的答案 跨越左右产生的答案(2&#xff09;计算“跨越左右产生的答案”时&#xff0c;如果加上左、右各自…

GeoGebra:数学动画制作工具重磅来袭

【线性代数】线性代数可视化工具&#xff1a;manim manim是之前我跟大家分享的一个线性代数动画制作工具。 但我之前的描述有些许偏差&#xff0c;这里要更正一下&#xff0c;manim不仅限于制作线性代数动画&#xff0c;也可以制作数学其他学科的动画&#xff0c;例如微积分&…

Selenium是什么,带你了解自动化测试的神奇之处

一、使用测试工具 工欲善其事&#xff0c;必先利其器。在开始具体的自动化测试之前&#xff0c;我们需要做好更多的准备&#xff0c;包括以下几个方面&#xff1a; 认识自动化测试 准备自动化测试工具 使用有效的方式 针对具体的测试对象 接下来的第一部分内容&#xff0c;我…

JavaScript如何实现钟表效果,时分秒针指向当前时间,并显示当前年月日,及2024春节倒计时,源码奉上

本篇有运用jQuery&#xff0c;记得引入jQuery库&#xff0c;否则不会执行的喔~ <!DOCTYPE html> <html> <head> <meta charset"utf-8"> <title></title> <meta name"chenc" content"Runoob"> <met…

人工智能中的基础之一——Python

Python作为一种简洁、易学、功能丰富的高级编程语言&#xff0c;被广泛应用于数据分析、人工智能、Web开发等各个领域。本文将介绍Python的基础语法和使用&#xff0c;帮助读者快速上手Python编程。 一、Python基础语法 1. 变量和数据类型 在Python中&#xff0c;可以使用变…

C#,Python实践,用CodeFormer实现人脸重建(Face Restoration),模糊清晰、划痕修复及黑白上色

无论是自己、家人或是朋友、客户的照片&#xff0c;免不了有些是黑白的、被污损的、模糊的&#xff0c;总想着修复一下。作为一个程序员 或者 程序员的家属&#xff0c;当然都有责任满足他们的需求、实现他们的想法。除了这个&#xff0c;学习了本文的成果&#xff0c;或许你还…

【Unity程序小技巧】如何消除多次Destory带来的性能消耗

&#x1f468;‍&#x1f4bb;个人主页&#xff1a;元宇宙-秩沅 &#x1f468;‍&#x1f4bb; hallo 欢迎 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍&#x1f4bb; 本文由 秩沅 原创 &#x1f468;‍&#x1f4bb; 收录于专栏&#xff1a;Uni…

Linux学习第36天:Linux RTC 驱动实验:时间是一条流淌的河

Linux版本号4.1.15 芯片I.MX6ULL 大叔学Linux 品人间百味 思文短情长 RTC就是实时时钟。 本笔记主要学习Linux RTC驱动试验&#xff0c;主要内容包括Linux内核RTC驱动简介、I.MX6U内部RTC分析、RTC时间查看与设置。因为Linux内核已经…