123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184 |
- <template>
- <div class="layout">
- <a class="next-page pre-page" v-if="index>1" @click="clickHandle(index - 1)"></a>
- <a class="page-item" @click="clickHandle(1)" :class="{active: index === 1}" >1</a><a class="page-item more" @click="clickHandle(current - 3)" v-if="current>5" >...</a><a
- v-if="page!==maxPage && page!==1"
- v-for="page in pages"
- :key="page"
- @click="clickHandle(page)"
- class="page-item"
- :class="{active: index === page}"
- >{{page}}</a><a class="more page-item" @click="clickHandle(pages[pages.length-1] + 2)" v-if="pages[pages.length-1]+2<=maxPage" >...</a><a @click="clickHandle(maxPage)" class="page-item" v-if="maxPage!==1" :class="{active: index === maxPage}" >{{maxPage}}</a>
- <a v-if="index !== maxPage" class="next-page next-page-item" @click="clickHandle(index + 1)"></a>
- </div>
- </template>
- <script>
- import {mapState} from 'vuex'
- /**
- * 取得页码数组
- * @param showPageMaxCount 允许显示的页码最大数量
- * @param pageNow 当前页码
- * @param pageCount 总页数
- * @return 页码数组(整数数组)
- */
- function getPageNumArr (showPageMaxCount, pageNow, pageCount) {
- let pageNumArr = []
- let pageNumBegin, pageNumEnd
- if (pageCount <= showPageMaxCount) {
- pageNumBegin = 1
- pageNumEnd = pageCount
- } else {
- if (pageNow <= Math.floor(showPageMaxCount / 2)) {
- pageNumBegin = 1
- pageNumEnd = showPageMaxCount
- } else if (pageCount - pageNow <= Math.floor(showPageMaxCount / 2)) {
- pageNumBegin = pageCount - showPageMaxCount
- pageNumEnd = pageCount
- pageNumEnd - pageNumBegin >= showPageMaxCount && pageNumBegin++
- } else {
- pageNumBegin = Math.ceil(pageNow - showPageMaxCount / 2)
- pageNumEnd = Math.floor(pageNow + showPageMaxCount / 2)
- pageNumEnd - pageNumBegin >= showPageMaxCount && pageNumBegin++
- }
- }
- for (let i = pageNumBegin; i <= pageNumEnd; i++) {
- pageNumArr.push(i)
- }
- return pageNumArr
- }
- export default {
- props: {
- current: {
- default: 1
- },
- reindex: {
- default: 1
- },
- total: {
- default: 10
- },
- equable: {
- default: 10
- },
- length: {
- default: 5
- },
- value: {
- default: 1
- },
- color: {
- default: '#2d2d2d'
- }
- },
- data () {
- return { index: this.value }
- },
- mounted () {
- this.$emit('maxPage', this.maxPage)
- },
- computed: {
- ...mapState({
- language: state => state.language.current
- }),
- maxPage () {
- let val = Math.ceil(this.total / this.equable)
- this.$emit('maxPage', val)
- return val
- },
- pages () {
- let temp = getPageNumArr(this.length, this.index, this.maxPage)
- return temp
- }
- },
- methods: {
- clickHandle (index) {
- if (index > 0 && index <= this.maxPage) {
- this.index = index
- }
- this.$emit('clickHandle', this.index)
- }
- },
- watch: {
- index (newVal) {
- this.$bus.$emit('input', newVal)
- },
- current (newVal) {
- this.index = newVal
- }
- }
- }
- </script>
- <style scoped>
- .layout .more:hover::after{
- transform: scaleX(0)!important;
- }
- .layout .next-page-item:hover::before{
- transform: scaleX(2);
- }
- .layout .next-page-item:hover::after{
- transform: translateX(5px);
- }
- .layout .next-page-item::before{
- background-color: #111;
- height: 2px;
- width: 8px;
- transform-origin: 0 0;
- }
- .layout .next-page-item::after{
- width: 0;
- height: 0;
- border-style: solid;
- border-width: 5px 0 5px 8px;
- border-color: transparent transparent transparent #011111;
- }
- .layout .pre-page::after {
- transform-origin: 100% 0;
- }
- .layout .pre-page:hover::after{
- transform: scaleX(2);
- transform-origin: 100% 0;
- }
- .layout .pre-page:hover::before{
- transform: translateX(-5px);
- }
- .layout .pre-page::after{
- background-color: #111;
- height: 2px;
- width: 8px;
- }
- .layout .pre-page::before{
- width: 0;
- height: 0;
- border-style: solid;
- border-width: 5px 8px 5px 0;
- border-color: transparent #011111 transparent transparent;
- }
-
- /* .layout {
- text-align: center;
- }
- .layout a {
- margin: 10px;
- font-size: 18px;
- display: inline-block;
- cursor: pointer;
- user-select: none;
- color: #2d2d2d;
- }
- .layout a.active,
- .layout a:hover {
- color: #111111;
- border-bottom: 2px solid #111;
- } */
- </style>
|