vue封装自定义分页器组件与使用方法分享

前言

分页是开发各种系统时候最常用的功能,下面为本人封装的一个分页组件。

实现分页器操作需要以下参数

  • 当前页: pageNo
  • 每页展示条数: pageSize
  • 数据总条数 : total
  • 连续页码数:continues (一般为奇数,页面对称更美观)

分页器在各大项目中出现的频率较多,我们可以封装成静态组件,并全局注册这个组件。

1.全局注册组件方法:在mian.js文件中操作

import Pagination from '@/components/Pagination'   // 组件路径
Vue.component(Pagination.name,Pagination)

2.其他页面分页器的时候可以直接使用。父页面向子页面传递数据,使用prop传递。

<template>
    <Pagination
		:pageNo="this.pageNo"
        :pageSize="this.pageSize"
        :total="93"
        :continues="5"
        @getPageNo="getPageNo"
/>
</template>

<script>
    export default {
        name: "index",
        data(){
			return{
			pageNo:1,
			pageSize:4,
			}
		},
		methods:{
			getPageNo(pageNo){
			this.pageNo=pageNo
			}
		}

    }
</script>

分页器 Pagination.vue

<template>
    <div class="pagination">
        <!-- 上 -->
        <button :disabled="pageNo == 1" @click="getPageNo(pageNo - 1)">
            上一页
        </button>
        <button
                v-if="startNumAndEndNum.start > 1"
                @click="getPageNo(1)"
                :class="{ active: pageNo == 1 }"
        >1
        </button>
        <button
                v-if="startNumAndEndNum.start > 2"
                @click="getPageNo(pageNo - continues)"
        >···
        </button>
        <!-- 中间部分 -->
        <button
                v-for="(page, index) in generateMiddlePage"
                :key="index"
                @click="getPageNo(page)"
                :class="{ active: pageNo == page }">
            {{ page }}
        </button>

        <!-- 下 -->
        <button
                v-if="startNumAndEndNum.end < totalPage - 1"
                @click="getPageNo(pageNo +continues)"
        >···
        </button>
        <button
                v-if="startNumAndEndNum.end < totalPage"
                @click="getPageNo(totalPage)"
                :class="{active:pageNo==totalPage}">
            {{ totalPage }}
        </button>

        <button
                :disabled="pageNo == totalPage"
                @click="getPageNo(pageNo + 1)">
            下一页
        </button>

        <button style="margin-left: 30px">共 {{ total }} 条</button>
    </div>
</template>

<script>

    export default {
        name: "Pagination",
        props: ["pageNo", "pageSize", "total", "continues"],
        computed: {
            //计算出总页数
            totalPage() {
			//向上取整
                return Math.ceil(this.total / this.pageSize);
            },
  			//计算出页码的起始和结束数字
            startNumAndEndNum() {
                const {continues, pageNo, totalPage} = this;
				//先定义两个变量存储起始数字与结束数字
                let start = 0,
                    end = 0;

                if (continues > totalPage) {
                    start = 1;
                    end = totalPage;
                } else {
					//起始数字
                    start = pageNo - parseInt(continues / 2);
					//结束数字
                    end = pageNo + parseInt(continues / 2);

                    if (start < 1) {
                        start = 1;
                        end = continues;
                    }

                    if (end > totalPage) {
                        end = totalPage;
                        start = totalPage - continues + 1;
                    }
                }
                return {start, end};
            },
            //过滤掉小于起始页的页码
            generateMiddlePage() {
                let arr = [];
                //避免页面中同时使用 v-for和v-if
                for (let i = 0; i <= this.startNumAndEndNum.end; i++) {
                    arr.push(i)
                }
                let temp = arr.filter(item => {
                    return item >= this.startNumAndEndNum.start
                })
                return temp

            }
        },

        methods: {
            getPageNo(val) {
            	//自定义事件子页面向父页面传参,计算属性值
                this.$emit('getPageNo', val)
            },

        }
    };
</script>

<style lang="less" scoped>
    .pagination {
        text-align: center;

        button {
            margin: 0 5px;
            background-color: #f4f4f5;
            color: #606266;
            outline: none;
            border-radius: 2px;
            padding: 0 4px;
            vertical-align: top;
            display: inline-block;
            font-size: 13px;
            min-width: 35.5px;
            height: 28px;
            line-height: 28px;
            cursor: pointer;
            box-sizing: border-box;
            text-align: center;
            border: 0;

            &[disabled] {
                color: #c0c4cc;
                cursor: not-allowed;
            }

            &.active {
                cursor: not-allowed;
                background-color: #409eff;
                color: #fff;
            }
        }
    }

    .active {
        background: skyblue;
    }
</style>

总结

到此这篇关于vue封装自定义分页器组件与使用方法的文章就介绍到这了,更多相关vue封装自定义分页器组件内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • Vue分页器实现原理详解

    网上搜的分页器大多是jQuery实现的,而且也不太完善,于是自己写了个分页器组件,以后再用也不慌,直接复制过去就ok,下面说说具体实现的代码和原理吧. 新闻组件template: <template> <div v-if="news"> <div v-for="(item, index) in newList" v-if="(index <= (newListPageIndex * 4)-1) && (i

  • vue仿element实现分页器效果

    1 .起因 今日看完element中分页器的源码实现,比较简单,遂自己按着理解实现了一个简单的分页器,记录下来,以便日后温习. 2.实现难点 分页器的实现难点主要是什么时候显示分页器的省略, 我的思路是: 规定一个值foldPage, 意为当前最多显示的标签数,当总页数超过即显示省略.省略分为左边省略(folder1)和右边省略(folder2),布局代码如下: <div class="pagination" @click="pageClick"> &l

  • Vue实现简单分页器

    提前说明:这原本是一个Jquery分页器,因为公司项目前后端不分离,以前的分页用的是基于.net的分页器.后来我引入了jquery分页器,在我掌握Vue之后,又自己写了一些基于Vue的插件(为什么不用成熟的Vue插件库,还是因为前后端没分离)但是前后端相对最开始的混杂已经算是分得很开了. 分页器的样式是bootstrap风格的,是一个完全自定义样式的分页器,这意味着你可以很轻松把它改成你想要的样子(例子效果图如下). 所有的分页器DEMO,都不会太简单,所以想要真正的掌握(支配)一款好用的分页插

  • 用Vue写一个分页器的示例代码

    之前一直想要自己试着实现一个分页器,但是一直拖,今天写完,大概照着网易云音乐的样子来完成.这个小例子很简单,通过这个小例子,可以学习到Vue计算属性的使用,并了解到写分页器需要区分的情况.这篇文章会慢慢从头来实现这个小例子,相信你一定会学会,而且看完了我的思路之后说不定会有更棒的思路和想法! 实现的效果是这样子的: 一.先简单布局 <template> <div class="pageContainer"> <ul class="pagesInn

  • vue分页器组件编写方法详解

    使用vue编写的分页器组件,支持输入页码跳转,效果如图: 1.点击前五页: 2.点击中间部分页面 3.点击第一页,上一页按钮失效,点击最后一页,下一页按钮失效 组件调用: //html调用 参数:pageSize(总页数);pageNo(当前页) <pager :pageSize="pageSize" v-model="pageNo" @on-jump="jump"></pager> //组件引入 import pager

  • vue封装自定义分页器组件与使用方法分享

    前言 分页是开发各种系统时候最常用的功能,下面为本人封装的一个分页组件. 实现分页器操作需要以下参数 当前页: pageNo 每页展示条数: pageSize 数据总条数 : total 连续页码数:continues (一般为奇数,页面对称更美观) 分页器在各大项目中出现的频率较多,我们可以封装成静态组件,并全局注册这个组件. 1.全局注册组件方法:在mian.js文件中操作 import Pagination from '@/components/Pagination' // 组件路径 Vu

  • Vue中自定义全局组件的实现方法

    前言 有时候我们在做开发的时候,就想自己写一个插件然后就可以使用自己的插件,那种成就感很强.今天就解决了一个长期困扰着我的问题,现在记录一下,供日后参考. 涉及知识点是Vue.js官网教程中的插件使用 方法如下: 首先我遇到的问题就是我自定义的组件如果需要在项目中其他组件中多次被调用,而我之前的解决方法就是简单的,哪里需要在哪引用.这无疑增加了许多代码重复. 而在使用Vue.js的一些UI框架的时候则注意到,只需要在项目的入口文件中import这个插件然后在接着Vue.use('插件名').这样

  • vue 封装自定义组件之tabal列表编辑单元格组件实例代码

    vue 封装自定义组件 tabal列表编辑单元格组件 <template> <div class="editable-cell"> <div class="editable-cell-input-wrapper" v-if='editable'> <el-input class="editInput" v-model="cellValue" placeholder="请输入内

  • vue封装可复用组件confirm,并绑定在vue原型上的示例

    如下所示: 首先我们需要创建 confirm.vue , confirm.js这两个文件,一个实现dom结构,一个实现相关逻辑 confirm.vue <template> <div class="confirm" v-if="isShow"> <div class="con_box" > <div class="context"> <h6>{{text.type}}

  • vue封装自定义指令之动态显示title操作(溢出显示,不溢出不显示)

    vue项目开发的过程中,如果需要文字溢出的dom元素鼠标悬浮时才显示title文字的话,可以封装一个自定义的指令. 方法一. 组件内代码如下: directives: { title: { inserted(el) { const { clientWidth, scrollWidth, title } = el; if (!title && scrollWidth > clientWidth) el.title = el.innerText; } } }, 使用: <artic

  • Vue封装通用table组件的完整步骤记录

    目录 前言 为什么需要封装table组件? 第一步:定义通用组件 第二步:父组件与子组件进行render通信 第三步:使用组件 总结 前言 随着业务的发展和功能的增多,我们发现不少页面都具备相似的功能,这里举几个比较俗的例子:可以多选的下拉菜单,带输入的对话框,日期选择器等等,于是我们会想办法将这些共有的功能抽取成一个个公共组件,以便能够在不同的页面或业务中使用. 为什么需要封装table组件? 后台管理系统表格使用频率高,减少关于table的业务代码,且便于后期统一修改.便于后期维护.如给ta

  • React Native自定义标题栏组件的实现方法

    大家好,今天讲一下如何实现自定义标题栏组件,我们都知道RN有一个优点就是可以组件化,在需要使用该组件的地方直接引用并传递一些参数就可以了,这种方式确实提高了开发效率. 标题栏是大多数应用界面必不可少的一部分,将标题栏剥离出来做成一个组件很有必要.今天先讲一个不带返回按钮的标题栏.废话少说,直接上代码: /** * 封装公共的标题头,没有返回按钮 */ 'use strict'; import React, { Component } from 'react'; import { Text, Vi

  • vue实现自定义日期组件功能的实例代码

    实现一个日期组件,如图: components.js代码如下: Vue.component('sc-calendar',{ template:'<div class="scCalendar">' + '<div class="calendar_header">' + '<div class="prev" @click="prevMonth"> < </div>' + '&l

  • Vue封装全局toast组件的完整实例

    目录 前言 一. 借助 vue-cli 1. 定义 Toast 组件 2. 在 main.js 里面配置 3. 在其他组件内使用 二.不借助 vue-cli 1. 注册 toast 组件 2. 注册 toast 插件 3. 在其他组件内使用 总结 前言 最近体验了下Vue,Toast都是前端常用组件,本文详细介绍了Vue封装全局toast组件的过程,下面话不多说了,来一起看看详细的介绍吧 一. 借助 vue-cli 1. 定义 Toast 组件 // components/Toast <temp

  • Vue自定义指令directive的使用方法分享

    1. 一个指令定义对象可以提供如下几个钩子函数(均为可选) bind:只调用一次,指令第一次绑定到元素时调用.在这里可以进行一次性的初始化设置. inserted:被绑定元素插入父节点时调用(仅保证父节点存在,但不一定已被插入文档中). update:只要当前元素不被移除,其他操作几乎都会触发这2个生命周期,先触发update后触发componentUpdate.虚拟DOM什么时候更新:只要涉及到元素的隐藏.显示(display)值的改变.内容的改变等都会触发虚拟DOM更新. component

随机推荐