【vue 仿百度分页】

news2024/11/26 0:35:22

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>

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【Python大数据笔记_day04_Hadoop】

分布式和集群 分布式:多台服务器协同配合完成同一个大任务(每个服务器都只完成大任务拆分出来的单独1个子任务) 集群:多台服务器联合起来独立做相同的任务(多个服务器分担客户发来的请求) 注意:集群如果客户端请求量(任务量)多,多个服务器同时处理不同请求(不同任务),如果请求量…

大型企业是否有必要进行数字化转型?_数据治理平台_光点科技

数字化转型是大型企业在现代商业环境中保持竞争力的关键。一开始我们要明确数字化转型指的是利用数字技术来改变企业的业务模式和企业文化&#xff0c;以提高效率和效益。对于大型企业而言&#xff0c;进行数字化转型有着多重必要性。 1.数字化转型可以帮助企业优化内部流程&am…

情感分析与LLMs角色扮演

深度学习自然语言处理 原创作者&#xff1a;wkk 就像人类在做一件事情的时候&#xff0c;可能需要尝试多次。LLM也是如此&#xff01;这对于情感分析任务尤其如此&#xff0c;在情感分析任务中&#xff0c;LLM需要深入推理来处理输入中的复杂语言现象&#xff08;例如&#xff…

SPASS-图表的创建编辑

点击折线图 展示图如下&#xff1a; 双击图表&#xff0c;可进行编辑 图表基本设定 选择、移动图表元素和调整图表元素的大小 鼠标点击图表元素选择Tab键进行轮换选择Ctrl键鼠标进行多个元素选择十字箭头——移动元素双头箭头——调整元素大小 更改图表的外观 文本的内容、…

MS2111多点低压差分(M-LVDS)线路驱动器和接收器

MS2111 是多点低压差分 (M-LVDS) 线路驱动器和接收器。经过 优化&#xff0c;可运行在高达 200Mbps 的信号速率下。所有部件均符合 M LVDS 标准 TIA / EIA-899 。该驱动器的输出支持负载低至 30Ω 的多 点总线。 MS2111 的接收器属于 Type-2 &#xff0c; 可在 -1…

小程序制作(超详解!!!)第十五节 自动随机变化的三色旗

1.例题描述 设计一个小程序&#xff0c;开始时界面上显示一个三色旗和一个按钮&#xff0c;当点击按钮时&#xff0c;三色旗的颜色会发生随机变化&#xff0c;即使不点击按钮&#xff0c;三色旗的颜色也会每隔一定时间自动发生变化。 2.index.wxml <view class"box&…

【笔记】结合P02项目——maven继承与聚合

maven的继承关系 P02项目大概是这个样子&#xff0c;下图展示的是其父工程 父工程配置了parent依赖springb-boot-starter-parent&#xff0c;子工程配置其parant为父工程 子工程引用common子工程 maven的版本锁定 管理子工程的版本号问题 父工程添加dependencyManageMent…

Gradle笔记 六 Gradle 中的Dependencies

文章目录 Dependencies依赖的方式依赖的下载依赖的类型api 与implementation 区别依赖冲突及解决方案 Dependencies 依赖的方式 Gradle 中的依赖分别为直接依赖&#xff0c;项目依赖&#xff0c;本地jar 依赖。案例如下&#xff1a; dependencies { //①.依赖当前项目下的某…

C# Dictionary与List的用法区别与联系

C#是一门广泛应用于软件开发的编程语言&#xff0c;其中Dictionary和List是两种常用的集合类型。它们在存储和操作数据时有着不同的特点和用途。本文将详细探讨C# Dictionary和List的用法区别与联系&#xff0c;并通过代码示例进行对比&#xff0c;以帮助读者更好地选择适合自己…

Mac使用brew搭建kafka集群

1. 第一步&#xff1a;单机搭建 单机搭建&#xff1a; 安装完后&#xff0c;默认自动安装对应版本zookeeper brew install kafka2.第二步&#xff1a;修改配置文件: 配置3个Kafka 第一个&#xff08;使用默认配置&#xff09; vi /opt/homebrew/etc/kafka/server.propertie…

C# 查询腾讯云直播流是否存在的API实现

应用场景 在云考试中&#xff0c;为防止作弊行为的发生&#xff0c;会在考生端部署音视频监控系统&#xff0c;当然还有考官方监控墙系统。在实际应用中&#xff0c;考生一方至少包括两路直播流&#xff1a; &#xff08;1&#xff09;前置摄像头&#xff1a;答题的设备要求使…

服装展示服务预约小程序的内容如何

互联网电商深入&#xff0c;很多服装商家开始线上卖货经营、会员管理及私域营销等&#xff0c;这也是当今商家们的一个优选项&#xff0c;当然除了直接卖货以外&#xff0c;展示和预约、客户交互也同样是不少商家需要的。 那么商家通过服装展示预约小程序能够实现什么效果呢&a…

uni-app:js实现数组中的相关处理-数组复制

一、slice方法-浅拷贝 使用分析 创建一个原数组的浅拷贝&#xff0c;对新数组的修改不会影响到原数组slice() 方法创建了一个原数组的浅拷贝&#xff0c;这意味着新数组和原数组中的对象引用是相同的。因此&#xff0c;当你修改新数组中的对象时&#xff0c;原数组中相应位置的…

竞赛 行人重识别(person reid) - 机器视觉 深度学习 opencv python

文章目录 0 前言1 技术背景2 技术介绍3 重识别技术实现3.1 数据集3.2 Person REID3.2.1 算法原理3.2.2 算法流程图 4 实现效果5 部分代码6 最后 0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; 深度学习行人重识别(person reid)系统 该项目…

TLS回调函数

TLS在逆向中的作用 TLS回调函数常用于反调试 TLS先于EP代码执行 TLS是什么 TLS是各线程的独立的数据存储空间 使用TLS技术可以在线程内部独立使用或修改进程的全局数据或静态数据 创建和终止某进程时&#xff0c;TLS回调函数都会自动调用执行 使用OD调试TLS函数

vTESTstudio的使用

vTESTstudio介绍 vTESTstudio是Vector公司专为ECU自动化测试而研发的测试用例编写软件&#xff0c;可用于从模型测试到系统确认的所有开发阶段。它集成了多种用例编辑方法&#xff0c;能有效提高测试人员对测试设计的效率、具有可复用性等优点。它支持Python作为测试编程语言&…

windows查看端口号占用,并杀死进程

1、查看所有运行的端口&#xff1a; netstat -ano 2、查看被占用端口对应的 PID netstat -aon|findstr "8081" 回车执行该命令&#xff0c;最后一串数字就是 PID进程号, 这里是 19232。 3、查看指定 PID 的进程 tasklist|findstr "19232" 回车执行该…

博途PLC增量式PID(支持正反作用和归一化输出)

博途PLC增量式PID算法详细介绍请参考下面文章链接: 【精选】博途1200/1500PLC增量式PID算法(详细SCL代码)_西门子博途pid csdn_RXXW_Dor的博客-CSDN博客文章浏览阅读3.4k次,点赞2次,收藏12次。SMART200PLC增量式PID可以参看下面这篇博文,文章里有完整的增量式PID算法公式,…

初步了解 RabbitMQ

目录 ​编辑一、MQ 概述 1、MQ 的简介 2、MQ 的用途 &#xff08;1&#xff09;限流削峰 &#xff08;2&#xff09;异步解耦 (3)数据收集 二、RabbitMQ 概述 1、RabbitMQ 简介 2、四大核心概念 3、RabbitMQ 的核心部分 ​编辑 4、名词解释&#xff1a; 三、Hello …

MSR015/MSR025低温漂、低功耗电压基准

MSR015/MSR025 是低温漂、低功耗、高精度 CMOS 电压基准&#xff0c; 具有 0.05% 初始精度、低功耗特点。该器件的低输出电压迟滞和低长期输出电压 漂移特性&#xff0c;进一步提高稳定性和系统可靠性。 此外&#xff0c;器件的小尺寸和低运行 电流特性使其非常适合便携…