vue3.0分页组件

<template><div class="xtx-pagination"><a href="javascript:;" @click="changePage(-1)" :class="{ disabled: curPage === 1 }">上一页</a><span v-if="curPage > 3">...</span><ahref="javascript:;"@click="changePage(item)"v-for="item in list":key="item":class="{ active: curPage === item }">{{ item }}</a><span v-if="curPage < pages - 2">...</span><a href="javascript:;" @click="changePage(1)" :class="{ disabled: curPage === pages }">下一页</a></div>
</template>

<script>
import { ref, computed } from 'vue'
export default {name: 'XtxPagination',props: {total: { type: Number, default: 80 },pageSize: { type: Number, default: 8 }},setup(props) {const changePage = type => {if (type === 1) {if (curPage.value === pages.value) returncurPage.value += 1} else if (type === -1) {if (curPage.value === 1) returncurPage.value -= 1} else {curPage.value = type}}const curPage = ref(1)const pages = computed(() => Math.ceil(props.total / props.pageSize))// 动态计算页码列表const list = computed(() => {// 总页码小等于5const result = []if (pages.value <= 5) {for (let i = 1; i <= pages.value; i++) {result.push(i)}}// 总页码>5else {if (curPage.value <= 3) {for (let i = 1; i <= 5; i++) {result.push(i)}} else if (curPage.value >= pages.value - 1) {for (let i = pages.value - 4; i <= pages.value; i++) {result.push(i)}} else {for (let i = curPage.value - 2; i <= curPage.value + 2; i++) {result.push(i)}}}return result})return { curPage, pages, list, changePage }}
}
</script>

<style scoped lang="less">
.xtx-pagination {display: flex;justify-content: center;padding: 30px;> a {display: inline-block;padding: 5px 10px;border: 1px solid #e4e4e4;border-radius: 4px;margin-right: 10px;&:hover {color: @xtxColor;}&.active {background: @xtxColor;color: #fff;border-color: @xtxColor;}&.disabled {cursor: not-allowed;opacity: 0.4;&:hover {color: #333;}}}> span {margin-right: 10px;}
}
</style>

vue3.0分页组件相关推荐

vue3.0父子组件的通信
vue3.0父子组件的通信 Vue3.0组件通信 Vue3.0组件通信 vue3.0脚手架setup内部的组件通信 1.父到子通过props 父组件 <template><div & ...
vue3.0 父组件调用子组件方法及获取子组件的值
vue3.0 父组件调用子组件方法及获取子组件的值通过对比2.0的获取及调用方式这里我们也可以借鉴2.0中的this.$refs去获取3.0和2.0的refs获取的方式有点大同小异,但是思路还是一样 ...
Angular4.0分页组件
自己分装的分页组件,可供学习使用 paging分页组件分页组件的实现原理 1.由父组件传入数据总量 2.分页组件返回当前显示页面,每页显示数量 3.父组件根据分页组件返回的两个值,控制数据的分页显示 ...
vue3.0 父子组件通信
子传父:子组件调用父组件方法 vue3.0不再支持this,所以this.$emit()方法不在被支持. 以下为VUE3.0新写法子组件: <script> import { defin ...
vue3.0 父子组件传值问题
使用vue3.0时遇到父子传值的问题,顺便记录一下问题背景: 如图所示,编辑按钮是父组件的部分,下面的表单是子组件需要:按下父组件中的编辑按钮时,子组件的表单需要变成可编辑状态,在可编辑状态下按下 ...
自定义vue3.0日历组件
一.前言别人的东西用起来总是那么的不顺手,UI库的日历组件竟然不返回星期几,完全无法忍受,于是自己动手写了一个日历组件. 自己写的东西,那就是想怎么搞就怎么搞,哈哈哈哈哈. 二.代码我使用的nav ...
vue3.0 子组件调用父组件中的方法
在vue2中,子组件调用父组件,直接使用this.$emit()即可. 但是在vue3中,很显然使用this.$emit() 已经开始报错了,为什么会报错呢? 原因是:在vue3中setup是在声明周 ...
vue3.0子组件向父组件传值-发布订阅者模式
子组件向父组件传值-context.emit 子组件向父组件传值 context.emit 子组件向父组件传值 context.emit 子组件中: 将数据terminationOpinion传给父组 ...
vue3使用的移动端UI框架,vue3.0 ui组件库
vue 3.0 项目中 element-ui form 表单元素中仅 el-button 显示,其他不显示,如何解决? 谷歌人工智能写作项目:小发猫在页面中引用了laydate插件,在显示的时候, ...

vue3.0分页组件

vue3.0分页组件相关推荐

最新文章

热门文章