需求分析

• 支持传入当前页码参数并展示；
• 支持页数过多的部分用省略号显示，并会动态变化；
• 支持支持点击左右方向键切换页码；
• 支持在只有一页的时候隐藏pager；

方法实现

1、pager外部组件传参定义：

一共可传4个参数：

• total，页码条数
• current，当前页码
• current.sync，点击页码的current参数回调
• hide-one-page, 默认不填一页时显示，false则隐藏

<T-pager :total="10" :current="1" :current.sync="currentPage" :hide-one-page="false"></T-pager>

2、pager组件内部实现：

HTML

<template><div class="pager-content" :class="{hide: !hideOnePage && pages <= 1}"><span class="pager-content-nav prev"@click="onClickPage(current-1)":class="{disabled: current === 1}"><t-icon name="left"></t-icon></span><template v-for="page in pages"><template v-if="page === current"><span class="pager-content-item current">{{page}}</span></template><template v-else-if="page === '...'"><span class="pager-content-item separator">...</span></template><template v-else><span class="pager-content-item other" @click="onClickPage(page)">{{page}}</span></template></template><span class="pager-content-nav next"@click="onClickPage(current+1)":class="{disabled: current === total}"><t-icon name="right"></t-icon></span></div>
</template>

JS

<script>import TIcon from '../icon'export default {name: 'pager',components: {TIcon},props: {total: {type: Number,default: 1},current: {type: Number,default: 1},hideOnePage: {type: Boolean,default: true}},computed: {pages() {let pages = [1, this.total, this.current, this.current-1, this.current-2, this.current+1, this.current+2]let u = pages.filter(n => n >= 1 && n <= this.total)let u1 = this.unique(u.sort((a, b) => a - b))return u1.reduce((a, b, index, array) => { // 过滤，添加...a.push(b)if (array[index + 1] !== undefined && array[index+1] - array[index] > 1) {a.push('...')}return a}, [])}},methods: {onClickPage(n) {if (n >=1 && n <= this.total) {this.$emit('update:current', n)}},unique(array) { //数组去重const object = {}array.map(item => {object[item] = true})return Object.keys(object).map(value => parseInt(value, 10))}}}
</script>

1. 省略号：通过计算属性pages，四重遍历动态计算出省略号的位置，小于5条total则不展示省略号。
2. 监听pager点击结构样式变化：onClickPage()方法，将变化的数据传出去，再通过current.sync接收，更新current的值，从而达到单向数据流的目的，实现功能的同时，还可简化逻辑。
3. 一页样式隐藏：通过css类做判断即可。
4. 左右方向箭头切换：增加或减少current的值即可，但要留意边界情况（小于1条大于最后一条），最后走‘update:current’单向数据流出发外部current参数回调即可。

3、在v-for中使用不同标签展示数据的方法：

参考下面的HTML代码，只需通过template模板遍历即可。应为template模板标签在浏览器渲染中不会变成标签。

<template v-for="page in pages"><template v-if="page === current"><span class="pager-content-item current">{{page}}</span></template><template v-else-if="page === '...'"><div class="pager-content-item separator">...</div></template><template v-else><a class="pager-content-item other" @click="onClickPage(page)">{{page}}</a></template>
</template>