vue2手写一个el-pagenation

当然可以，以下是一个手写的Vue 2的el-pagination组件的示例代码：

<template>
  <div class="el-pagination">
    <button @click="prevPage">Previous</button>
    <ul>
      <li v-for="page in pageCount" :key="page" :class="{ active: currentPage === page }">
        <a @click="changePage(page)">{{ page }}</a>
      </li>
    </ul>
    <button @click="nextPage">Next</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentPage: 1,
      pageSize: 10,
      total: 100
    };
  },
  computed: {
    pageCount() {
      return Math.ceil(this.total / this.pageSize);
    }
  },
  methods: {
    changePage(page) {
      this.currentPage = page;
      // 触发页码改变的事件，可以在父组件监听该事件并更新数据
      this.$emit('page-change', page);
    },
    prevPage() {
      if (this.currentPage > 1) {
        this.changePage(this.currentPage - 1);
      }
    },
    nextPage() {
      if (this.currentPage < this.pageCount) {
        this.changePage(this.currentPage + 1);
      }
    }
  }
};
</script>

<style scoped>
.el-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
}

.el-pagination button {
  margin: 0 5px;
}

.el-pagination ul {
  list-style: none;
  display: flex;
}

.el-pagination li {
  margin: 0 5px;
}

.el-pagination li a {
  text-decoration: none;
  color: #333;
  padding: 5px;
}

.el-pagination li.active a {
  font-weight: bold;
}
</style>

这是一个简单的分页组件，包含了上一页、下一页按钮以及页码列表。你可以根据需要进行样式的修改和功能的扩展。希望能帮到你！如果还有其他问题，请继续提问。