基于Vue如何封装分页组件

我可以为你详细讲解如何基于Vue封装一个分页组件。

在Vue中，我们可以通过以下的步骤来封装一个分页组件：

1. 创建分页组件所需要的数据和属性

我们需要定义组件所需的数据和属性，例如：当前页码、总页数、每页显示数量等。

<template>
  <div>
    <ul>
      <li v-for="page in pages" :key="page">
        <!-- 这里定义每个页码的样式和相关事件 -->
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
    props: {
      currentPage: {
        type: Number,
        required: true
      },
      totalPages: {
        type: Number,
        required: true
      },
      pageSize: {
        type: Number,
        required: true
      }
    },
    data() {
      return {}
    },
    computed: {
      pages() {
        /* 在这里计算生成分页的页码 */
      }
    },
    methods: {
      /* 在这里定义翻页事件的回调函数 */
    }
  }
</script>

2. 生成分页页码

我们需要计算生成分页的页码，并将页码渲染到页面中。这可以通过computed属性实现。

<template>
  <div>
    <ul>
      <li v-for="page in pages" :key="page" :class="{active: page === currentPage}">
        <a href="#" @click="goToPage(page)">{{ page }}</a>
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
    props: {
      currentPage: {
        type: Number,
        required: true
      },
      totalPages: {
        type: Number,
        required: true
      },
      pageSize: {
        type: Number,
        required: true
      }
    },
    data() {
      return {}
    },
    computed: {
      pages() {
        /* 生成分页的页码 */
        const range = 3
        const pages = []
        let start = Math.max(this.currentPage - range, 1)
        let end = Math.min(this.currentPage + range, this.totalPages)
        if (start > 1) {
          pages.push('...')
        }
        for (let i = start; i <= end; i++) {
          pages.push(i)
        }
        if (end < this.totalPages) {
          pages.push('...')
        }
        return pages
      }
    },
    methods: {
      goToPage(page) {
        /* 点击页码触发的翻页事件 */
        this.$emit('page-changed', page)
      }
    }
  }
</script>

<style>
  /* 样式可以根据自己的需求进行调整 */
  ul {
    display: flex;
    justify-content: center;
    list-style: none;
  }
  li {
    margin: 0 10px;
  }
  li a {
    display: block;
    padding: 3px 8px;
    border: 1px solid #ccc;
    border-radius: 3px;
    color: #333;
    text-decoration: none;
  }
  li a:hover {
    background-color: #eee;
  }
  li.active a {
    background-color: #66b3ff;
    color: #fff;
  }
</style>

3. 在父组件中使用封装的分页组件

我们需要在父组件中使用封装的分页组件，并通过传递props属性来控制组件的行为。

<template>
  <div>
    <!-- 父组件中使用分页组件 -->
    <Pagination
      :current-page="currentPage"
      :total-pages="totalPages"
      :page-size="pageSize"
      @page-changed="handlePageChanged"
    />
  </div>
</template>

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

  export default {
    components: {
      Pagination
    },
    data() {
      return {
        currentPage: 1,
        totalPages: 10,
        pageSize: 10
      }
    },
    methods: {
      handlePageChanged(page) {
        /* 处理翻页事件的回调函数 */
        this.currentPage = page
        // 调用API获取数据重新渲染页面
      }
    }
  }
</script>

下面是两个示例说明：

1. 例1：假设我们有一个视频网站，需要实现分页加载视频列表的功能。视频列表数据通过API获取。可以根据需要在分页组件上添加加载动画等样式。

<template>
  <div>
    <ul> <!-- 列举视频列表数据 --> </ul>
    <Pagination
      :current-page="currentPage"
      :total-pages="totalPages"
      :page-size="pageSize"
      @page-changed="handlePageChanged"
    />
  </div>
</template>

<script>
  import Pagination from './Pagination.vue'
  import { loadVideoList } from './api'

  export default {
    components: {
      Pagination
    },
    data() {
      return {
        currentPage: 1,
        totalPages: 0,
        pageSize: 20,
        videoList: []
      }
    },
    async created() {
      await this.loadData()
    },
    methods: {
      async loadData() {
        const res = await loadVideoList({
          page: this.currentPage,
          pageSize: this.pageSize
        })
        this.totalPages = Math.ceil(res.totalCount / this.pageSize)
        this.videoList = res.items
      },
      async handlePageChanged(page) {
        this.currentPage = page
        await this.loadData()
      }
    }
  }
</script>

1. 例2：假设我们有一个博客网站，需要实现文章列表的分页功能。文章列表数据通过props传递进来。

<template>
  <div>
    <ul> <!-- 列举文章列表数据 --> </ul>
    <Pagination
      :current-page="currentPage"
      :total-pages="totalPages"
      :page-size="pageSize"
      @page-changed="handlePageChanged"
    />
  </div>
</template>

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

  export default {
    components: {
      Pagination
    },
    props: {
      articleList: {
        type: Array,
        required: true
      },
      pageSize: {
        type: Number,
        required: true
      }
    },
    data() {
      return {
        currentPage: 1,
        totalPages: 0,
        visibleList: []
      }
    },
    created() {
      this.loadData()
    },
    watch: {
      articleList() {
        /* 监听传入数据的变化，重新计算总页数 */
        this.totalPages = Math.ceil(this.articleList.length / this.pageSize)
        this.loadData()
      }
    },
    methods: {
      loadData() {
        /* 根据页码和每页显示数量计算要显示的文章数据 */
        const start = (this.currentPage - 1) * this.pageSize
        const end = start + this.pageSize
        this.visibleList = this.articleList.slice(start, end)
      },
      handlePageChanged(page) {
        this.currentPage = page
        this.loadData()
      }
    }
  }
</script>

以上就是基于Vue封装分页组件的完整攻略。我们可以根据自己的需要，对分页组件进行样式和功能的调整。