vue3 浅尝 分页

基于vue3的一个简单分页  父子组件通信传值

父组件

<template>
  <div class="top">
    
  </div>
  <pagination :total="total" :pageNo="pageNo" :pageSize="pageSize" @event="eventData"></pagination><!-- 使用组件 -->
</template>

<script >
import { defineComponent,ref } from "vue"
import Pagination from "@/components/Pagination.vue"            //引入组件
export default {
  components:{                                                  //注册组件
    Pagination
  },
  setup() {
    const pageNo = ref(1)           //当前页
    const pageSize = ref(10)        //每页的数量
    const total = ref(100)          //总数量

    const eventData = (data)=>{ //子组件传值触发
        console.log(data,"子组件传来的值")
    }

    return {
        pageNo,
        pageSize,
        total,
        eventData
    }
  }
}
</script>

<style lang="scss" scoped>
.top{
    height: 600px;
}


</style>

子组件

<template>
    <div class="out">
        <div class="item prev but" @click="prev">上一页</div>

        <!-- 循环计算出来页数 -->
        <template v-for="(item,index) in pageArr" :key="index">
            <div 
                class="item"
                :class="['item',item == newPage?'num':'']"
                @click="selectNum(item)"
            >
                {{item}}
            </div>
        </template>

        <div class="item next but" @click="next">下一页</div>

        <div class="item page">共{{page}}页</div>

        到
        <input class="item skipInput" type="number" v-model="skipNum" >
        页

        <div class="item skip" @click="skip">确定</div>
    </div>
</template>

<script>
import { defineComponent,ref,onMounted } from "vue"
export default {
name:'Pagination',
props:{                     //定义默认的类型及值
    pageNo:{
        type:Number,
        default:1
    },
    pageSize:{
        type:Number,
        default:10,
    },
    total:{
        type:Number,
        default:0,
    }
},
setup(props,{emit}){
    // console.log(props.total,props.pageSize,props.pageNo,"============")             //vue3的查看父组件传来的值

    const page = ref()                  //计算出来页数
    const pageArr = ref([])             //排列出来的页数
    const skipNum = ref()               //填入的跳转页数
    const newPage = ref()               //当前的页数

    newPage.value = props.pageNo            //将默认值赋给子组件内的默认值
    page.value = parseInt((props.total + props.pageSize - 1) / props.pageSize)      //计算展示出来页码有多少
    for(let i = 0;i<page.value;i++){        //将计算出来的页码循环到排列使用的数组里面
        pageArr.value.push(i+1)
    }
    
    const prev = ()=>{                              //上一页
        if(newPage.value ==1){
            console.log("已经是第一页了")              //替换为ui库里面的全局弹框组件里面（以下同理）
            return
        }else{
            newPage.value -= 1
        }
        trigger(newPage.value)                      //将计算好的值传入到触发父组件方法里面
    }
    const next = ()=>{                              //下一页
        if(newPage.value ==page.value){
            console.log("已经是最后一页了")
            return
        }else{
            newPage.value += 1
        }
        trigger(newPage.value)
    }
    const selectNum = (data)=>{                     //选择数字
        trigger(data)
    }
    const trigger = (value)=>{                       //去触发父组件方法函数
        newPage.value = value
        let params = {
            newPage:parseInt(value)
        }
        emit('event',params)
    }
    const skip = ()=>{                                //点击确定
        if(typeof(skipNum.value) != 'number'){
            console.log("不是一个数字")
            return
        }else if(skipNum.value > page.value){
            console.log("不能大于总页数")
            return
        }else if(skipNum.value < 1){
            console.log("不能小于1")
            return
        }
        trigger(skipNum.value)
    }
    return {
        page,
        pageArr,
        skipNum,
        newPage,
        selectNum,
        prev,
        next,
        trigger,
        skip
    }
}
}
</script>

<style lang="scss" scoped>
.out{
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
.item{
    margin: 0 10px;
    width: 34px;
    height: 34px;
    background: linear-gradient(0deg, #DADADA, #F5F5F5);
    box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.4);
    border-radius: 6px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    font-family: Arial;
    font-weight: 400;
    color: #2E2E2E;
}
.item.num{
    background: #B9905F;
    color: #fff;
}
.item.but{
    width: 80px;
}
.item.page{
    width: 80px;
    background: #fff;
    box-shadow:none;
    border: none;
}
.item.skipInput{
    margin: 0 3px;
    width: 50px;
    height: 34px;
    padding: 0 3px;
    margin: 0 0;
    background: #E6E6E6;
    border: #E6E6E6;
    /* box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.35); */
    border-radius: 6px;
    outline-color: #E6E6E6;
}
.item.skip{
    width: 50px;
    background: #B9905F;
    color: #fff;

}
</style>