vue自定义翻页组件

效果图如下：

1、在components建立page.vue文件

<template><div class="pagination"><!-- 上 --><button :disabled="pageNo == 1" @click="getPageNo(pageNo - 1)">上一张</button><buttonv-if="startNumAndEndNum.start > 1"@click="getPageNo(1)":class="{ active: pageNo == 1 }">1</button><buttonv-if="startNumAndEndNum.start > 2"@click="getPageNo(pageNo - continues)">···</button><!-- 中间部分 --><buttonv-for="(page, index) in generateMiddlePage":key="index"@click="getPageNo(page)":class="{ active: pageNo == page }">{{ page }}</button><!-- 下 --><buttonv-if="startNumAndEndNum.end < totalPage - 1"@click="getPageNo(pageNo +continues)">···</button><buttonv-if="startNumAndEndNum.end < totalPage"@click="getPageNo(totalPage)":class="{active:pageNo==totalPage}">{{ totalPage }}</button><button:disabled="pageNo == totalPage"@click="getPageNo(pageNo + 1)">下一张</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="scss" scoped>.pagination {text-align: center;width: 70px;button {margin:12px 0px 0px 0px;background-color: #fff;color: #409eff;border:1px solid #409eff;outline: none;border-radius: 2px;padding: 0 4px;vertical-align: top;display: inline-block;font-size: 14px;width: 60px;height: 38px;line-height: 38px;cursor: pointer;box-sizing: border-box;text-align: center;&[disabled] {color: #c0c4cc;cursor: not-allowed;border:1px solid #ddd;}&:hover{background: #ddeffb;}&[disabled]:hover{ background: none;}&.active {cursor: not-allowed;background-color: #409eff;color: #fff;}}}
</style>

2、在页面中引入组件

<page:pageNo="pageNo":pageSize="pageSize":total="pageTotal":continues="5"  //超过5时中建按钮有省略号@getPageNo="getPageNo"/>import page from '@/components/page'data(){return{pageNo:1,pageSize:1, pageTotal:5,}
}//方法中
methods:{getPageNo(pageNo){this.pageNo=pageNo},}

vue自定义翻页组件相关推荐

vue实现上下滑动翻页_如何通过vue实现一款简单通用的翻页组件
预览先上一波效果图: 基本元素首先,翻页组件(以下称"pager组件")一般拥有的元素有: 上一页第一页中间显示的页码最后一页下一页初始化时需要的配置有: total ...
vue 定义全局弹框_VUE路由拦截：Vue自定义全局弹窗组件
前言在任何一个平台中,如果需要增加用户黏度,除了用户需要的基本内容外,用户登录注册提交信息也是非常重要的一环,可以了解用户基本信息,用户喜欢等. 抛出前后端混合开发外,vue可以轻松的实现路由拦截. ...
IOS开发之－－UIScrollView pagingEnabled自定义翻页宽度
用到UIScrollview的翻页效果时,有时需要显示一部分左右的内容,但是UIScrollView的PagingEnabled只能翻过整页,下面几个简单的设置即可实现技术点: 1. 创建一个继承U ...
Bootstrap翻页组件
翻页组件一些简单的网站,比如博客或者杂志网站,希望用更少的标记和样式,来创建简单的"前一页"和"后一页"的翻页组件. Bootstrap中,只需为列表设置.p ...
vue自定义音频播放组件_易于创建Vue的自定义音频播放器组件
vue自定义音频播放组件音频更好 (vue-audio-better) Easy to create custom audio player components for Vue.js. 易于为Vu ...
vue自定义日历小组件
vue自定义小日历组件一.前言自己开发的项目需要用到类似博客侧边栏小日历组件,觉得自己造一个比较随心所欲,更能满足自己的需求,所以决定自己开发一个.最终效果如图所示. 二.日历样式我的这个日历组 ...
Vue自定义InputNumber 计数器组件
1.为什么要自己封装一个InputNumber 计数器组件? 因为原始的el-element的el-input-number组件有问题: 原生组件能输入英文,不能限制只能输入数值: 原始组件能通过键盘 ...
C#在控件中绘制矩形、圆、线段等（切换不同的图片，自定义翻页控件，通过委托监控某个字段）
1.效果展示 2 自定义翻页控件 public partial class PageManagemen : UserControl{/// <summary>/// 当前页(从1开始计数) ...
Vue 自定义多选组件
Vue 自定义多选组件子组件(选项卡) checkBoxCard.vue <template><div class="checkBoxCard">< ...

vue自定义翻页组件

vue自定义翻页组件相关推荐

最新文章

热门文章