vue自定義翻頁組件的方法

更新時間：2022年09月14日 17:00:45 作者：~犇犇~

這篇文章主要為大家詳細介紹了vue自定義翻頁組件的方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了vue自定義翻頁組件的具體代碼，供大家參考，具體內容如下

效果圖如下：

1、在components建立page.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>
? ? </div>
</template>
?
<script>
?
? ? export default {
? ? ? ? name: "Pagination",
? ? ? ? props: ["pageNo", "pageSize", "total", "continues"],
? ? ? ? computed: {
? ? ? ? ? ? //計算出總頁數(shù)
? ? ? ? ? ? totalPage() {
?? ??? ??? ? ? ? //向上取整
? ? ? ? ? ? ? ? return Math.ceil(this.total / this.pageSize);
? ? ? ? ? ? },
? ?? ??? ??? ? ? //計算出頁碼的起始和結束數(shù)字
? ? ? ? ? ? startNumAndEndNum() {
? ? ? ? ? ? ? ? const {continues, pageNo, totalPage} = this;
?? ??? ??? ??? ? ? ?//先定義兩個變量存儲起始數(shù)字與結束數(shù)字
? ? ? ? ? ? ? ? let start = 0,
? ? ? ? ? ? ? ? ? ? end = 0;
? ? ? ? ? ? ? ? if (continues > totalPage) {
? ? ? ? ? ? ? ? ? ? start = 1;
? ? ? ? ? ? ? ? ? ? end = totalPage;
? ? ? ? ? ? ? ? } else {
?? ??? ??? ??? ??? ? ? ? ?//起始數(shù)字
? ? ? ? ? ? ? ? ? ? start = pageNo - parseInt(continues / 2);
?? ??? ??? ??? ??? ? ? ? //結束數(shù)字
? ? ? ? ? ? ? ? ? ? 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) {
? ? ? ? ? ? ?? ?//自定義事件子頁面向父頁面?zhèn)鲄?，計算屬性?
? ? ? ? ? ? ? ? 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
? ? ? },
? }

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: