vue3中setup語(yǔ)法糖下通用的分頁(yè)插件實(shí)例詳解
先給大家介紹下vue3中setup語(yǔ)法糖下通用的分頁(yè)插件,內(nèi)容如下所示:
效果
自定義分頁(yè)插件:PagePlugin.vue
<script setup lang="ts"> // total :用來(lái)傳遞數(shù)據(jù)總條數(shù) // pageSize :每頁(yè)展示幾條數(shù)據(jù) // currentPage :當(dāng)前默認(rèn)頁(yè)碼 // change-page :頁(yè)碼改變時(shí)觸發(fā)的事件,參數(shù)為當(dāng)前頁(yè)碼 const props = defineProps({ //數(shù)據(jù)總條數(shù) total: { type: Number, default: 88 }, //頁(yè)面大小 pageSize: { type: Number, default: 16 }, //當(dāng)前顯示的頁(yè)碼 currentPage: { type: Number, default: 1 } }); let currentNum = ref(props.currentPage); import {computed, ref} from 'vue' // 頁(yè)碼顯示組合 // 計(jì)算總頁(yè)數(shù) const pages = computed(() => Math.ceil(props.total / props.pageSize )); const list = computed(() => { const result = [] // 總頁(yè)數(shù)小于等于5頁(yè)的時(shí)候 if (pages.value <= 5) { for (let i = 1; i <= pages.value; i++) { result.push(i) } } else { // 總頁(yè)數(shù)大于5頁(yè)的時(shí)候 // 控制兩端的省略號(hào)的有無(wú),頁(yè)碼的顯示個(gè)數(shù)與選中頁(yè)碼居中 if (currentNum.value <= 2) { for (let i = 1; i <= 5; i++) { result.push(i) } } else if (currentNum.value >= 3 && currentNum.value <= pages.value - 2) { for (let i = currentNum.value - 2; i <= currentNum.value + 2; i++) { result.push(i) } } else if (currentNum.value > pages.value - 2) { for (let i = pages.value - 4; i <= pages.value; i++) { result.push(i) } } } return result; }) const emit = defineEmits(["changePage"]) function changePage(type) { // 點(diǎn)擊上一頁(yè)按鈕 if (type === false) { if (currentNum.value <= 1) return currentNum.value -= 1 } else if (type === true) { // 點(diǎn)擊下一頁(yè)按鈕 if (currentNum.value >= pages.value) return currentNum.value += 1 } else { // 點(diǎn)擊頁(yè)碼 currentNum.value = type } emit('changePage',currentNum.value); } </script> <template> <div class="my-pagination"> <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" :class="{ disabled: currentNum === 1 }" @click="changePage(false)">上一頁(yè)</a> <span v-if="currentNum > 3">...</span> <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" v-for="item in list" :key="item" :class="{ active: currentNum === item }" @click="changePage(item)" >{{ item }}</a> <span v-if="currentNum < pages - 2">...</span> <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" :class="{ disabled: currentNum === pages }" @click="changePage(true)">下一頁(yè)</a> </div> </template> <style scoped lang="less"> .my-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: #27BA9B; } &.active { background: #27BA9B; color: #fff; border-color: #27BA9B; } &.disabled { cursor: not-allowed; opacity: 0.4; &:hover { color: #333; } } } > span { margin-right: 10px; } } </style>
使用插件
<script setup lang="ts"> import PagePlugin from "@/components/PagePlugin.vue"; function changePage(currentPage){ // alert(currentPage) console.log(currentPage) } </script> <template> <!--分頁(yè)--> <PagePlugin :total="total" :pagesize="pageSize" :currentPage="pageNum" @change-page="changePage"/> </template>
vue3中setup語(yǔ)法糖下父子組件之間的通信
準(zhǔn)備工作
在router文件夾中創(chuàng)建index.ts文件:
import {createRouter, createWebHashHistory} from 'vue-router' import Father from '../views/Father.vue' const routes = [ { path: '/', name: "Father", component: Father }, { path: '/Son', name: 'Son', component: () => import('../views/Son.vue') } ] const router = createRouter({ history: createWebHashHistory(), routes }) export default router
父?jìng)髯樱?/h3>
第一步:Father.vue
<template> <h2>父組件</h2> <hr> <Son :num="num" :arr="array" ></Son> </template> <script lang="ts" setup> import {ref} from 'vue' import Son from "./Son.vue"; let num = ref(6688) let array = ref([11, 22, 33, 44]) </script>
第二步:Sun.vue
<template> <h2>子組件</h2> {{props.num}}--{{props.arr}} </template> <script lang="ts" setup> let props = defineProps({ num: Number, arr: { type: Array, default: () => [1, 2, 3, 4] } }) </script>
子傳父:
第一步:Sun.vue
<template> <h2>子組件</h2> <button @click="sendMsg">向父組件傳遞數(shù)據(jù)</button> </template> <script lang="ts" setup> import {ref} from 'vue' const emit = defineEmits(["son_sendMsg"]); const msg = ref("子組件傳遞給父組件的數(shù)據(jù)") function sendMsg() { emit("son_sendMsg", msg.value) } </script>
第二步:Father.vue:
<template> <h2>父組件</h2> {{ message }} <hr> <Son @son_sendMsg="fun"></Son> </template> <script lang="ts" setup> import {ref} from 'vue' import Son from "./Son.vue" let message = ref("") function fun(msg) { message.value = msg } </script>
到此這篇關(guān)于vue3中setup語(yǔ)法糖下通用的分頁(yè)插件的文章就介紹到這了,更多相關(guān)vue3分頁(yè)插件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- vue3中setup語(yǔ)法糖下父子組件間傳遞數(shù)據(jù)的方式
- Vue3.2中setup語(yǔ)法糖的使用教程分享
- vue3中<script?setup>?和?setup函數(shù)的區(qū)別對(duì)比
- Vue3?setup的注意點(diǎn)及watch監(jiān)視屬性的六種情況分析
- vue3在setup中使用mapState解讀
- Vue3中關(guān)于setup與自定義指令詳解
- Vue3中的setup語(yǔ)法糖、computed函數(shù)、watch函數(shù)詳解
- Vue3?setup?的作用實(shí)例詳解
- Vue3?setup添加name的方法步驟
- Vue3的setup在el-tab中動(dòng)態(tài)加載組件的方法
- vue3.0?setup中使用vue-router問(wèn)題
- vue3?setup語(yǔ)法糖各種語(yǔ)法新特性的使用方法(vue3+vite+pinia)
- vue3 setup的使用和原理實(shí)例詳解
相關(guān)文章
Vue3格式化Volar報(bào)錯(cuò)的原因分析與解決
Volar 與vetur相同,volar是一個(gè)針對(duì)vue的vscode插件,下面這篇文章主要給大家介紹了關(guān)于Vue3格式化Volar報(bào)錯(cuò)的原因分析與解決方法,文中通過(guò)圖文介紹的非常詳細(xì),需要的朋友可以參考下2022-06-06vue-router使用next()跳轉(zhuǎn)到指定路徑時(shí)會(huì)無(wú)限循環(huán)問(wèn)題
這篇文章主要介紹了vue-router使用next()跳轉(zhuǎn)到指定路徑時(shí)會(huì)無(wú)限循環(huán)問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11vue router 跳轉(zhuǎn)時(shí)打開(kāi)新頁(yè)面的示例方法
這篇文章主要介紹了vue router 跳轉(zhuǎn)時(shí)打開(kāi)新頁(yè)面的示例方法,本文通過(guò)示例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-07-07VUE使用router.push實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)和傳參方式
這篇文章主要介紹了VUE使用router.push實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)和傳參方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-01-01Vue微信公眾號(hào)網(wǎng)頁(yè)分享的示例代碼
這篇文章主要介紹了Vue微信公眾號(hào)網(wǎng)頁(yè)分享的示例代碼,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05