Vue + TS инкапсулирует глобальные компоненты подкачки.

В проектах Vue3 мы часто используем компоненты нумерации страниц. Чтобы облегчить повторное использование и унификацию стилей, мы можем инкапсулировать глобальный компонент подкачки.

Идеи реализации

1. Определите компонент разбиения на страницы, включая логику и стили разбиения на страницы.
2. Зарегистрируйте компонент пагинации глобально.
3. Внедряйте и используйте там, где требуются компоненты нумерации страниц.

Код

Компонент нумерации страниц

<template>
  <div class="pagination">
    <button :disabled="page === 1" @click="pageChange(page - 1)">上一页</button>
    <span v-for="index in totalPage" :key="index" :class="{active: index === page}" @click="pageChange(index)">{
    
    {
    
    index}}</span>
    <button :disabled="page === totalPage" @click="pageChange(page + 1)">下一页</button>
  </div>
</template>

<script lang="ts">
import {
    
     defineComponent } from 'vue'

export default defineComponent({
    
    
  name: 'Pagination',
  props: {
    
    
    total: {
    
    
      type: Number,
      required: true
    },
    pageSize: {
    
    
      type: Number,
      default: 10
    },
    currentPage: {
    
    
      type: Number,
      default: 1
    }
  },
  computed: {
    
    
    totalPage() {
    
    
      return Math.ceil(this.total / this.pageSize)
    },
    page() {
    
    
      return this.currentPage
    }
  },
  methods: {
    
    
    pageChange(page: number) {
    
    
      if (page < 1 || page > this.totalPage) {
    
    
        return
      }
      this.$emit('page-change', page)
    }
  }
})
</script>

<style scoped>
.pagination {
    
    
  display: flex;
  justify-content: center;
  align-items: center;
  button, span {
    
    
    margin: 0 5px;
    padding: 5px 10px;
    border-radius: 5px;
    cursor: pointer;
  }
  button:disabled, span.disabled {
    
    
    color: #999;
    cursor: not-allowed;
  }
  span.active {
    
    
    background-color: #1890ff;
    color: #fff;
  }
}
</style>

глобальная регистрация

import {
    
     createApp } from 'vue'
import Pagination from './components/Pagination.vue'

const app = createApp(App)

app.component('Pagination', Pagination)

app.mount('#app')

использовать

<template>
  <div>
    <table>
      <!-- 表格内容 -->
    </table>
    <Pagination :total="total" :current-page="currentPage" @page-change="handlePageChange" />
  </div>
</template>

<script lang="ts">
import {
    
     defineComponent, ref } from 'vue'

export default defineComponent({
    
    
  name: 'MyComponent',
  setup() {
    
    
    const total = ref(50)
    const currentPage = ref(1)

    const handlePageChange = (page: number) => {
    
    
      currentPage.value = page
      // 发起请求获取指定页数据
    }

    return {
    
    
      total,
      currentPage,
      handlePageChange
    }
  }
})
</script>

Подведем итог

Выполнив описанные выше шаги, мы успешно инкапсулировали глобальный компонент подкачки. Там, где вам нужно его использовать, вам нужно только ввести и передать необходимые параметры.