pager组件

1. 首先显示所有的page，比如当前有20页

• pager.vue

• dmeo.vue

页面显示为

2. 显示我们所指定的page
   但是我们不希望全部显示，只想显示第一页最后一页还有当前页的前后两个，所以我们直接声明一个pages数组，向数组里添加这些元素

• pager.vue

data(){
    return {
        pages: []
    }
},
created(){
  let pages = [1,this.totalPage,this.currentPage,this.currentPage-1,this.currentPage-2,
  this.currentPage+1,this.currentPage+2
  ]
    this.pages = pages
},

3.对page进行排序
发现顺序不对，所以我们还要对上面拿到的pages进行排序

this.pages = pages.sort()

顺序还是不正确，因为js的排序是按字典拍的
所以我们需要这样写

this.pages = pages.sort((a,b)=>a-b)

4. 对page进行去重
   比如我们当前页是3，那么就会有两个1，所以需要去重

created(){
+    this.unique()
},
methods: {
+    unique(){
        let hash = {}
        this.pages.map(item=>{
            hash[item] = true
        })
        let pages = Object.keys(hash)
        this.pages = pages.map(item=>{
            return Number(item)
        })
    }
}

5. 添加省略号
   对于page中差值大于1的我们就在他们之间添加一个省略号，上面的1和2,2和3,3和4,4和5差值都不大于1，所以不用去管，只需要在5和20之间添加一个省略号就可以了

created(){
+  this.omit()
}
methods: {
  omit() {
    this.pages.map((item, index) => {
        if (this.pages[index + 1] - this.pages[index] > 1) {
            this.pages.splice(index + 1, 0, '...')
            return this.pages
        }
    })
}
}

6. 将省略号页码和上一页下一页分开渲染

7.使用computed实现点击其他页，当前页码显示跟着变化