vue3中setup語法糖下通用的分頁插件實例詳解
更新時間:2022年10月12日 10:43:46 作者:梁云亮
這篇文章主要介紹了vue3中setup語法糖下通用的分頁插件,實例代碼介紹了自定義分頁插件:PagePlugin.vue,文中提到了vue3中setup語法糖下父子組件之間的通信,需要的朋友可以參考下
先給大家介紹下vue3中setup語法糖下通用的分頁插件,內容如下所示:
效果
自定義分頁插件:PagePlugin.vue
<script setup lang="ts"> // total :用來傳遞數(shù)據(jù)總條數(shù) // pageSize :每頁展示幾條數(shù)據(jù) // currentPage :當前默認頁碼 // change-page :頁碼改變時觸發(fā)的事件,參數(shù)為當前頁碼 const props = defineProps({ //數(shù)據(jù)總條數(shù) total: { type: Number, default: 88 }, //頁面大小 pageSize: { type: Number, default: 16 }, //當前顯示的頁碼 currentPage: { type: Number, default: 1 } }); let currentNum = ref(props.currentPage); import {computed, ref} from 'vue' // 頁碼顯示組合 // 計算總頁數(shù) const pages = computed(() => Math.ceil(props.total / props.pageSize )); const list = computed(() => { const result = [] // 總頁數(shù)小于等于5頁的時候 if (pages.value <= 5) { for (let i = 1; i <= pages.value; i++) { result.push(i) } } else { // 總頁數(shù)大于5頁的時候 // 控制兩端的省略號的有無,頁碼的顯示個數(shù)與選中頁碼居中 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) { // 點擊上一頁按鈕 if (type === false) { if (currentNum.value <= 1) return currentNum.value -= 1 } else if (type === true) { // 點擊下一頁按鈕 if (currentNum.value >= pages.value) return currentNum.value += 1 } else { // 點擊頁碼 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)">上一頁</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)">下一頁</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> <!--分頁--> <PagePlugin :total="total" :pagesize="pageSize" :currentPage="pageNum" @change-page="changePage"/> </template>
vue3中setup語法糖下父子組件之間的通信
準備工作
在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
父傳子:
第一步: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>
到此這篇關于vue3中setup語法糖下通用的分頁插件的文章就介紹到這了,更多相關vue3分頁插件內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
您可能感興趣的文章:
- vue3中setup語法糖下父子組件間傳遞數(shù)據(jù)的方式
- Vue3.2中setup語法糖的使用教程分享
- vue3中<script?setup>?和?setup函數(shù)的區(qū)別對比
- Vue3?setup的注意點及watch監(jiān)視屬性的六種情況分析
- vue3在setup中使用mapState解讀
- Vue3中關于setup與自定義指令詳解
- Vue3中的setup語法糖、computed函數(shù)、watch函數(shù)詳解
- Vue3?setup?的作用實例詳解
- Vue3?setup添加name的方法步驟
- Vue3的setup在el-tab中動態(tài)加載組件的方法
- vue3.0?setup中使用vue-router問題
- vue3?setup語法糖各種語法新特性的使用方法(vue3+vite+pinia)
- vue3 setup的使用和原理實例詳解
相關文章
vue-router使用next()跳轉到指定路徑時會無限循環(huán)問題
這篇文章主要介紹了vue-router使用next()跳轉到指定路徑時會無限循環(huán)問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-11-11VUE使用router.push實現(xiàn)頁面跳轉和傳參方式
這篇文章主要介紹了VUE使用router.push實現(xiàn)頁面跳轉和傳參方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-01-01