vue自定義翻頁(yè)組件的方法
本文實(shí)例為大家分享了vue自定義翻頁(yè)組件的具體代碼,供大家參考,具體內(nèi)容如下
效果圖如下:
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: { ? ? ? ? ? ? //計(jì)算出總頁(yè)數(shù) ? ? ? ? ? ? totalPage() { ?? ??? ??? ? ? ? //向上取整 ? ? ? ? ? ? ? ? return Math.ceil(this.total / this.pageSize); ? ? ? ? ? ? }, ? ?? ??? ??? ? ? //計(jì)算出頁(yè)碼的起始和結(jié)束數(shù)字 ? ? ? ? ? ? startNumAndEndNum() { ? ? ? ? ? ? ? ? const {continues, pageNo, totalPage} = this; ?? ??? ??? ??? ? ? ?//先定義兩個(gè)變量存儲(chǔ)起始數(shù)字與結(jié)束數(shù)字 ? ? ? ? ? ? ? ? let start = 0, ? ? ? ? ? ? ? ? ? ? end = 0; ? ? ? ? ? ? ? ? if (continues > totalPage) { ? ? ? ? ? ? ? ? ? ? start = 1; ? ? ? ? ? ? ? ? ? ? end = totalPage; ? ? ? ? ? ? ? ? } else { ?? ??? ??? ??? ??? ? ? ? ?//起始數(shù)字 ? ? ? ? ? ? ? ? ? ? start = pageNo - parseInt(continues / 2); ?? ??? ??? ??? ??? ? ? ? //結(jié)束數(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}; ? ? ? ? ? ? }, ? ? ? ? ? ? //過(guò)濾掉小于起始頁(yè)的頁(yè)碼 ? ? ? ? ? ? generateMiddlePage() { ? ? ? ? ? ? ? ? let arr = []; ? ? ? ? ? ? ? ? //避免頁(yè)面中同時(shí)使用 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) { ? ? ? ? ? ? ?? ?//自定義事件子頁(yè)面向父頁(yè)面?zhèn)鲄ⅲ?jì)算屬性值 ? ? ? ? ? ? ? ? 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、在頁(yè)面中引入組件
<page ? ? ? ? :pageNo="pageNo" ? ? ? ? :pageSize="pageSize" ? ? ? ? :total="pageTotal" ? ? ? ? :continues="5" ?//超過(guò)5時(shí)中建按鈕有省略號(hào) ? ? ? ? @getPageNo="getPageNo" ? ? ? ? /> ? import page from '@/components/page' ? data(){ ? ?return{ ? ? ?pageNo:1, ? ? ?pageSize:1,? ? ? ?pageTotal:5, ? ?} } ? //方法中 methods:{ ? ? ?getPageNo(pageNo){ ? ? ? ? this.pageNo=pageNo ? ? ? }, ? }
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
詳解vue中使用express+fetch獲取本地json文件
本篇文章主要介紹了詳解vue中使用express+fetch獲取本地json文件,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2017-10-10ant design vue中日期選擇框混合時(shí)間選擇器的用法說(shuō)明
這篇文章主要介紹了ant design vue中日期選擇框混合時(shí)間選擇器的用法說(shuō)明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-10-10babel7.x和webpack4.x配置vue項(xiàng)目的方法步驟
這篇文章主要介紹了babel7.x和webpack4.x配置vue項(xiàng)目的方法步驟,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-05-05vue3+vite+vant4手機(jī)端項(xiàng)目實(shí)戰(zhàn)記錄
這篇文章主要給大家介紹了關(guān)于vue3+vite+vant4手機(jī)端項(xiàng)目實(shí)戰(zhàn)的相關(guān)資料,Vue3是一種前端開(kāi)發(fā)框架,它的目標(biāo)是提供更好的性能和開(kāi)發(fā)體驗(yàn),需要的朋友可以參考下2023-08-08vue axios 封裝請(qǐng)求攔截多次彈窗的問(wèn)題及解決
這篇文章主要介紹了vue axios 封裝請(qǐng)求攔截多次彈窗的問(wèn)題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08關(guān)于Vue新搭檔TypeScript快速入門實(shí)踐
這篇文章主要介紹了關(guān)于Vue新搭檔TypeScript快速入門實(shí)踐,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-09-09基于vue實(shí)現(xiàn)swipe分頁(yè)組件實(shí)例
本篇文章主要介紹了基于vue實(shí)現(xiàn)swipe分頁(yè)組件實(shí)例,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-05-05