vue pc端 左右翻页样式

在Vue.js中创建左右翻页样式，你可以采用以下步骤：

1. **组件化设计**：
创建一个名为`Pagination`的可复用组件，包含左右箭头按钮和当前页数展示。

<template>
  <div class="pagination">
    <button @click="prevPage" :disabled="isFirstPage">«</button>
    <span>{{ currentPage }}</span>
    <button @click="nextPage" :disabled="isLastPage">»</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentPage: 1,
      totalPages: 0,
      isFirstPage: true,
      isLastPage: false,
    };
  },
  methods: {
    prevPage() {
      if (this.currentPage > 1) {
        this.currentPage--;
      } else {
        this.isFirstPage = true;
      }
    },
    nextPage() {
      if (this.currentPage < this.totalPages) {
        this.currentPage++;
      } else {
        this.isLastPage = true;
      }
    },
  },
};
</script>

2. **绑定数据源**：
在父组件中，将数据总量和每页的列表绑定给`Pagination`组件，并更新数据时同步更改页码。

<template>
  <div v-for="(item, index) in items" :key="index"></div>
  <pagination :totalPages="totalItems" :currentPage="currentPage" />
</template>

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

export default {
  components: { Pagination },
  data() {
    return {
      items: [], // 你的数据数组
      totalItems: 0, // 数据总数
    };
  },
  computed: {
    currentPage() {
      return Math.ceil(this.items.length / this.pageSize); // 假设pageSize是你设定的每页数据数
    },
  },
  // 更新items时同步更新Pagination组件
  watch: {
    items(newItems) {
      this.totalItems = newItems.length;
      this.$refs.pagination.updateTotalPages();
    },
  },
};
</script>

3. **样式美化**：
通过CSS对组件进行美化，添加适当的间距、颜色和动画效果，让翻页看起来更专业。

.pagination {
  display: flex;
  justify-content: space-between;
}
.button {
  margin-right: 10px;
  cursor: pointer;
}

/* 可选的过渡效果 */
.pagination-enter-active,
.pagination-leave-active {
  transition: all 0.3s ease-in-out;
}