influence/components/common/pagination.vue

<template>
  <div class="pagination-wrapper">
    <!-- 첫 페이지 이동-->
    <v-btn class="pagination-btn prev2" :disabled="pageObj.page == 1 || pageObj.pageMaxNumSize >= totalPages" @click="$emit('chg_page', 1)"></v-btn>
    <!-- 왼쪽 이동 -->
    <v-btn class="pagination-btn prev1" :disabled="pageObj.page == 1" @click="$emit('chg_page', pageObj.page - 1)"></v-btn>

    <!-- 첫페이지 -->
    <v-btn class="pagination-btn number" :class="{'on':pageObj.page==1}" @click="$emit('chg_page', 1)" v-if="totalPages>0">1</v-btn>
    <!-- 첫 번째 ellipsis -->
    <span class="pagination-btn more" v-if="showStartEllipsis"></span>
    <!-- 중간 페이지 -->
    <v-btn
      v-for="page in visiblePages"
      :key="page"
      @click="$emit('chg_page', page)"
      class="pagination-btn number"
      :class="{'on':page === pageObj.page}"
    >
      {{ page }}
    </v-btn>
    <!-- 두 번째 ellipsis -->
    <span class="pagination-btn more" v-if="showEndEllipsis"></span>
    <!-- 마지막 페이지 -->
    <v-btn class="pagination-btn number" :class="{'on':pageObj.page === totalPages}" @click="$emit('chg_page', totalPages)" v-if="totalPages!==0 && totalPages !== 1">{{ totalPages }}</v-btn>
    
    <!-- 오른쪽 이동 -->
    <v-btn class="pagination-btn next1" :disabled="pageObj.page == totalPages || pageObj.totalCnt == 0" @click="$emit('chg_page', pageObj.page + 1)"></v-btn>
    <!-- 마지막 페이지 이동-->
    <v-btn class="pagination-btn next2" :disabled="pageObj.page == totalPages || pageObj.totalCnt == 0 || pageObj.pageMaxNumSize >= totalPages" @click="$emit('chg_page', totalPages)"></v-btn>
  
    <div class="page-go">
      <v-text-field 
        v-model="pageGo" 
        class="custom-input mini" 
        style="width:calc(1vw * (70 / 19.2))"
      ></v-text-field>
      <button @click="fnPageGo">Go</button>
    </div>

  </div>
</template>

<script setup>
  import { computed, ref } from 'vue';

  const {$toast, $log, $eventBus } = useNuxtApp()
  let pageId = 'pagination'

  // props
  const props = defineProps({
    pageObj: Object,
  })
  // 발신 이벤트 선언
  const emit = defineEmits(['chg_page'])

  // data
  const pageGo = ref(1)       // 입력 페이지
  const pageGoClone = ref(1)  // 복구 페이지

  // 페이지 복구
  $eventBus.off('SET_INIT_PAGE')
  $eventBus.on('SET_INIT_PAGE', () => {
    if(!useUtil.isNull(pageGoClone.value)) {
      pageGo.value = pageGoClone.value
    }
  })

  $eventBus.off('SET_PAGE')
  $eventBus.on('SET_PAGE', (param) => {
    pageGo.value = param
  })

  // 전체 페이지수(마지막 페이지) 
  const totalPages = computed(() => {
    return Math.ceil(props.pageObj.totalCnt / props.pageObj.pageSize)
  })

  // 첫, 마지막 페이지 제외한 노출 페이지 리스트
  const visiblePages = computed(() => {
    const pages = []
    // 현재 페이지 기준 좌우에 표현할 수
    const halfRange = Math.floor((props.pageObj.pageMaxNumSize - 4) / 2)  // ...페이지 2개, 첫번째 마지막페이지 2개로 인해 -4를 한다
    let start = props.pageObj.page - halfRange
    let end = props.pageObj.page + halfRange

    if (start < 2) {
      start = 2
      end = start + (props.pageObj.pageMaxNumSize - 4)
    }

    if (end >= totalPages.value) {
      end = totalPages.value - 1
      start = end - (props.pageObj.pageMaxNumSize - 4)
      if (start < 2) {
        start = 2
      }
    }

    for (let i = start; i <= end; i++) {
      pages.push(i)
    }

    return pages
  })

  // 첫 번째 ellipsis
  const showStartEllipsis = computed(() => {
    return visiblePages.value.length && visiblePages.value[0] > 2
  })
  // 두 번째 ellipsis
  const showEndEllipsis = computed(() => {
    return visiblePages.value.length && visiblePages.value[visiblePages.value.length - 1] < totalPages.value - 1
  })
  
  /**
   * 페이지 입력 이동
   */
  function fnPageGo(){
    let page = Number(pageGo.value)
    if(page > totalPages.value) {
      fnErrorPageAlert()
    }else if(page < 1){
      fnErrorPageAlert()
    }else{
      emit('chg_page', page)
      pageGoClone.value = _cloneDeep(page)
    }
  }
  /**
   * 입력페이지 에러 comfirm alert
   */
  function fnErrorPageAlert(){
    let param = {
      id: pageId,
      title:'Notice',
      content:'입력하신 페이지가 존재하지 않습니다.',
      yes:{
        text:'OK',
        isProc:true,
        event:'SET_INIT_PAGE',
        param:{},
      }
    }
    $eventBus.emit('OPEN_CONFIRM_POP_UP', param)
  }
</script>

<style lang="scss" scoped>

</style>