vue封装分页组件并注册为全局组件

Posted 2022-05-30 初辰ge

在components文件夹中新建paging.vue文件

<template>
  <div class="pagingBox">
    <div class="pagItem"
         @click="pageChange(1)">
      isEn?'First':'首页'
    </div>
    <div class="pagItem"
         @click="pageChange('pre')">
      isEn?'Previous':'上一页'
    </div>
    <div v-if="pageList[2] - 2 > 1"
         class="pagItem">...</div>
    <div class="pagItem"
         v-for="(item, index) in pageList"
         :key="index"
         :class=" pagActive: page == item "
         @click="pageChange(item)"> item </div>
    <div v-if="pageMax - pageList[2] > 2"
         class="pagItem">...</div>
    <div class="pagItem"
         @click="pageChange('next')">
      isEn?'Next':'下一页'
    </div>
    <div class="pagItem"
         @click="pageChange(pageMax)">
      isEn?'Last':'尾页'
    </div>
    <div class="pagTotal"
         v-show="isTotal">
      isEn?'Total '+total:'共 '+total+' 条'
    </div>
  </div>
</template>

<script>
export default 
  props: 
    // 内容总数
    total: 
      type: Number,
      default: 0
    ,
    // 每页数量
    limit: 
      type: Number,
      default: 10
    ,
    // 当前页码
    page: 
      type: Number,
      default: 1
    ,
    // 是否英文
    isEn: 
      type: Boolean,
      default: false
    ,
    // 是否展示总数
    isTotal: 
      type: Boolean,
      default: false
    
  ,
  data () 
    return 
      pageList: [] // 页码列表
    ;
  ,
  computed: 
    // 最大页数
    pageMax () 
      return Math.ceil(this.total / this.limit);
    
  ,
  created () 
    this.initData();
  ,
  methods: 
    // 生成pageList页码列表
    initData () 
      this.pageList = []; // 清空页码
      for (let i = 1; i <= this.pageMax; i++) 
        if (i <= 5) this.pageList.push(i);
      
    ,
    // 子组件事件回调：分页
    pageChange (pageCurrent) 
      if (pageCurrent == 'pre') 
        if (this.page > 1) 
          this.$emit('page-change', this.page - 1);
         else 
          this.$emit('page-change', this.page);
        
       else if (pageCurrent == 'next') 
        if (this.page < this.pageMax) 
          this.$emit('page-change', this.page + 1);
         else 
          this.$emit('page-change', this.page);
        
       else 
        this.$emit('page-change', pageCurrent);
      
    
  ,
  watch: 
    // 监听页码变化 -> 页码列表更新
    page (val) 
      if (val <= 3) 
        this.initData();
       else if (val === this.pageMax) 
        this.pageList = [val - 2, val - 1, val];
       else if (val === this.pageMax - 1) 
        this.pageList = [val - 2, val - 1, val, val + 1];
       else 
        this.pageList = [val - 2, val - 1, val, val + 1, val + 2];
      
    ,
    // 监听页码变化 -> 总数更新
    total () 
      this.initData();
    
  
;
</script>

<style scoped>
.pagingBox 
    margin-top: 35px;
    margin-bottom: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    line-height: 18px;

.pagItem 
    padding: 7px 11px;
    border: 1px solid #ddd;
    color: #333;
    margin-right: 10px;
    cursor: pointer;

.pagActive 
    background: #0b8686;
    color: #fff;
    border: 1px solid #0b8686;

.pagTotal 
    font-size: 15px;
    color: rgb(58, 58, 58);
    margin-right: -40px;
    margin-left: 20px;

</style>

在main.js中引入并注册paging组件

import paging from '../../components/paging'
Vue.component('paging', paging)

使用paging分页组件

<template>
  <div>
    <paging :total="this.paging.total"
            :limit="this.paging.limit"
            :page="this.paging.page"
            isTotal
            @page-change="pageChange"></paging>
  </div>
</template>

<script>
export default 
  data () 
    return 
      paging: 
        total: 60,
        limit: 8,
        page: 1
      
    ;
  ,
  methods: 
    pageChange (page) 
      if (page == this.paging.page) 
        return;
      
      this.paging.page = page;
    
  
;
</script>