完成类似el-pagination的分页组件，自定义样式

很多时候自己系统的风格和elementUI的组件风格相差太大了，又因为elmentUI的一些组件不太方便改样式，自己看了一下在页面中渲染出来的结构仿写一个

最后的效果：

结构就是前后两个按钮和一个ul li 列表，在加上flex布局实现

HTML:

<!-- 分页 -->
<div class="pagination">
  <div class="changeBotton" @click="lastPage"><i class="el-icon-arrow-left"></i></div>
  <ul>
    <li v-for="index of pagetotal" :key="index" @click="changepage(index)" :style="currentPage == index? 'color:#fff' : '' ">{
   
   {index}}</li>
  </ul>
  <div class="changeBotton" @click="nextPage"><i class="el-icon-arrow-right"></i></div>
</div>

js:

<script>
export default {
  data() {
    return {
      pagetotal:10,
      currentPage:1
   }
 },
 methods: {
    lastPage(){
      if(this.currentPage == 1){
        this.$message.warning("当前已是第一页");
        return;
      }else{
        this.currentPage -= 1;
      }
    },
    nextPage(){
      if(this.currentPage == this.pagetotal){
        this.$message.warning("当前已是最后一页");
        return;
      }else{
        this.currentPage += 1;
      }
    },
    changepage(index){
      this.currentPage = index;
    }
 }
}

CSS:

/* 分页样式 */
.pagination{
  width: 40%;
  height: 10%;
  background-color: #041E2B;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  color: #3dbaf1;
  position: absolute;
  right: 0;
  bottom: -15%;
}

.pagination ul{
  width: 85%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.pagination ul li {
  list-style: none;
  cursor: pointer;
}
.changeBotton{
  cursor: pointer;
}