原生JS封装分页器组件

应用样式：

分页器组件：

<template><div id="pagination"><div class="el-row"><div class="pagination el-col el-col-24"><div class="el-pagination is-background pagination"><span class="el-pagination__total">共 {{ pageInfo.total }} 条</span><buttontype="button":disabled="cur == 1":class="{ active: cur == 1 }"@click="$emit('handleCurrentChange', cur - 1)"><i class="el-icon el-icon-arrow-left"></i></button><ul class="el-pager"><liv-if="startNumAndEndNum.start > 1":class="{ active: cur == 1 }"@click="$emit('handleCurrentChange', 1)">1</li><button v-if="startNumAndEndNum.start > 2">···</button><template v-for="(page, index) in startNumAndEndNum.end"><button:key="index"v-if="page >= startNumAndEndNum.start"@click="$emit('handleCurrentChange', page)":class="{ active: cur == page }">{{ page }}</button></template><button v-if="startNumAndEndNum.end < all - 1">···</button><li:class="{ active: cur == all }"v-if="startNumAndEndNum.end < all"@click="$emit('handleCurrentChange', all)">{{ all }}</li></ul><buttontype="button":disabled="cur == all":class="{ active: cur == all }"@click="$emit('handleCurrentChange', cur + 1)"><i class="el-icon el-icon-arrow-right"></i></button><span class="el-pagination__sizes"><div class="el-select el-select--mini"><!----><div class="el-input el-input--mini el-input--suffix"><!----><el-selectv-model="pageSize"placeholder="请选择"@change="handleSizeChange"><el-optionv-for="item in options":key="item.value":label="item.label":value="item.value"></el-option></el-select><span class="el-input__suffix"><span class="el-input__suffix-inner"><iclass="el-select__caret el-input__icon el-icon-arrow-up"></i><!----><!----><!----><!----><!----></span><!----></span><!----><!----></div></div></span></div></div></div></div>
</template>
<script>
export default {//显示的声明组件name: "pagination",props: ["pageInfo"],data() {return {all: Math.ceil(this.pageInfo.total / this.pageInfo.pageSize), //, //总页数cur: this.pageInfo.currentPage, //this.pageInfo.currentPage ,//当前页码pageSize: this.pageInfo.pageSize + "条/页", // , //一页显示的数量options: [{value: "5",label: "5条/页"},{value: "10",label: "10条/页"},{value: "20",label: "20条/页"},{value: "50",label: "50条/页"}]};},methods: {// 每页数据量变化时触发方法handleSizeChange(val) {this.$emit("handleSizeChange", val);}},computed: {startNumAndEndNum() {this.cur = this.pageInfo.currentPage;this.all = Math.ceil(this.pageInfo.total / this.pageInfo.pageSize);const continues = 3;const totalPage = this.all;const pageNo = this.cur;//  先定义两个变量存储起始数字与结束数字let start = 0,end = 0;if (continues > totalPage) {start = 1;end = totalPage;} else {//  正常现象【连续页码3，但是你的总页数一定是大于3的】//  起始数字start = pageNo - parseInt(continues / 2);end = pageNo + parseInt(continues / 2);if (start < 1) {start = 1;end = continues;}//  把出现不正常的现象【end数字大于总页码】纠正if (end > totalPage) {end = totalPage;start = totalPage - continues + 1;}}return { start, end };}}
};
</script>
<style scoped>
.pagination {text-align: center;
}
.pagination 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;
}.pagination .active {cursor: not-allowed;background-color: #409eff;color: #fff;
}
</style>

父组件：

<template><div><pagination:pageInfo="page"@handleSizeChange="handleSizeChange"@handleCurrentChange="handleCurrentChange"></div>
</template><script>
import Pagination from "./Pagination.vue";
export default {name: "dome",components: {Pagination,},data() {return {page: {total: 0,pageSize: 10,currentPage: 1}};},methods: {// 每页数据量变化时触发方法handleSizeChange(val) {this.page.pageSize = val;this.page.currentPage = 1;},// 当前页发生改变时触发的方法handleCurrentChange(val) {this.page.currentPage = val;},},
};
</script><style></style>

原生JS封装分页器组件相关推荐

原生js封装table组件
使用原生js封装自己的table组件. 思路是通过设置参数,生成对应的表格dom; 源码如下:(初步实现) var XUi = {// table组件tableDom:{common:function ...
js 封装ajax方法吗,原生JS封装ajax方法
jquery框架的ajax方法固然好用,但是假如某天我们的项目不能引入jquery或项目需求很简单,没有很多交互功能,只需要ajax,这时引入jquery库会造成资源浪费,也会显得页面臃肿.这时我们就 ...
原生JS封装Ajax插件(同域jsonp跨域)
2019独角兽企业重金招聘Python工程师标准>>> 抛出一个问题,其实所谓的熟悉原生JS,怎样的程度才是熟悉呢? 最近都在做原生JS熟悉的练习... 用原生Js封装了一个Ajax ...
原生Js封装的弹出框-弹出窗口-页面居中-多状态可选
实现了一下功能: 1.title可自定义可拖拽 2.width height可以自定义 3.背景遮罩和透明度可以自定义 4.可以自己编辑弹出框里的html 5.确定取消按钮可选调用方法: 1 P ...
H5移动端原生JS封装附件上传服务器
本文主要通过原生的js封装附件上传upload.js.可成功内嵌钉钉,ios和安卓端可正常使用,支持单个.多个附件上传. 一.业务需求封装原生JS附件上传,动态创建附件列表,可对附件列表进行删除和新 ...
animate用法 js原生_原生JS封装animate运动框架的实例
如下所示: div { width: 100px; height: 100px; background-color: pink; position: absolute; left: 0; top: 5 ...
原生js封装cookie插件
最近迷上了react,用react模拟之前的系统,做登录的时候,发现需要用到cookie,之前用的跟vue搭配的VueCookie,我就在想啊,react应该也会有相应的cookie插件吧!百度一下, ...
原生js封装十字参考线插件(一)
需求来源: 拓扑图之机房平面图,显示机房长宽比例尺,房间内标注各种设备间距不易实现,特在机房平面图上层加一个十字参考线横竖两条线垂直,在鼠标指针处交叉,显示鼠标指针坐标(相对机房平面图的坐标,不是相 ...
原生html中modal,基于原生JS封装的Modal对话框插件
基于原生JS封装Modal对话框插件原生JS封装Modal对话框插件,个人用来学习原理与思想,只有简单的基本框架的实现,可在此基础上添加更多配置项 API配置 //基本语法 let modal = ...

原生JS封装分页器组件

原生JS封装分页器组件相关推荐

最新文章

热门文章