VUE3 개발 입문 튜토리얼: 컴포넌트를 사용하여 페이징 구현

<template>
  <div>
    <ul v-if="pages.length">
      <li v-if="currentPage !== 1" @click="changePage(currentPage - 1)">&lt;</li>
      <li v-for="page in pages" :key="page" :class="{'active': page === currentPage}" @click="changePage(page)">{{ page }}</li>
      <li v-if="currentPage !== totalPage && totalPage > 1" @click="changePage(currentPage + 1)">&gt;</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'Pagination',
  data() {
    return {
      currentPage: 1,
      pageSize: 10,
      totalPage: 0,
      pages: []
    }
  },
  props: {
    total: {
      type: Number,
      default: 0
    },
    pageSize: {
      type: Number,
      default: 10
    }
  },
  watch: {
    total() {
      this.init()
    }
  },
  methods: {
    init() {
      this.totalPage = Math.ceil(this.total / this.pageSize)
      this.pages = []
      for (let i = 1; i <= this.totalPage; i++) {
        this.pages.push(i)
      }
    },
    changePage(page) {
      if (this.currentPage === page) return
      this.currentPage = page
      // 触发自定义事件
      this.$emit('page-change', this.currentPage)
    }
  },
  created() {
    this.init()
  }
}
</script>

<style>
.pagination {
  text-align: center;
}

ul {
  display: inline-block;
  padding-left: 0;
  margin: 0;
  border-radius: 4px;
}

li {
  display: inline;
  color: #2b2b2b;
  float: left;
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  border: 1px solid #eee;
  margin-right: 3px;
  cursor: pointer;
}

li:hover {
  background-color: #eee;
}

.active {
  background-color: #00a0e9;
  color: #fff;
  border: 1px solid #00a0e9;
  cursor: default;
}

li:first-child {
  margin-right: 10px !important;
}

li:last-child {
  margin-left: 10px !important;
}
</style>

<template>
  <div class="container">
    <ul>
      <li v-for="item in list" :key="item.id">{{item.text}}</li>
    </ul>
    <Pagination :total="total" :page-size="pageSize" @page-change="handlePageChange"/>
  </div>
</template>

<script>
import Pagination from './components/Pagination'

export default {
  name: 'App',
  components: {
    Pagination
  },
  data() {
    return {
      total: 100,
      list: []
    }
  },
  methods: {
    initData() {
      for (let i = 1; i <= this.total; i++) {
        this.list.push({
          id: i,
          text: `第 ${i} 条数据`
        })
      }
    },
    handlePageChange(page) {
      const start = (page - 1) * this.pageSize
      const end = start + this.pageSize > this.total ? this.total : start + this.pageSize
      this.list = []
      for (let i = start + 1; i <= end; i++) {
        this.list.push({
          id: i,
          text: `第 ${i} 条数据`
        })
      }
    }
  },
  created() {
    this.initData()
  }
}
</script>

<style>
.container {
  margin: 0 auto;
  width: 500px;
}

ul {
  padding: 0;
  list-style: none;
}

li {
  border: 1px solid #eee;
  margin-top: 10px;
  padding: 10px;
}
</style>