index.vue 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184
  1. <template>
  2. <div class="layout">
  3. <a class="next-page pre-page" v-if="index>1" @click="clickHandle(index - 1)"></a>
  4. <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
  5. v-if="page!==maxPage && page!==1"
  6. v-for="page in pages"
  7. :key="page"
  8. @click="clickHandle(page)"
  9. class="page-item"
  10. :class="{active: index === page}"
  11. >{{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>
  12. <a v-if="index !== maxPage" class="next-page next-page-item" @click="clickHandle(index + 1)"></a>
  13. </div>
  14. </template>
  15. <script>
  16. import {mapState} from 'vuex'
  17. /**
  18. * 取得页码数组
  19. * @param showPageMaxCount 允许显示的页码最大数量
  20. * @param pageNow 当前页码
  21. * @param pageCount 总页数
  22. * @return 页码数组(整数数组)
  23. */
  24. function getPageNumArr (showPageMaxCount, pageNow, pageCount) {
  25. let pageNumArr = []
  26. let pageNumBegin, pageNumEnd
  27. if (pageCount <= showPageMaxCount) {
  28. pageNumBegin = 1
  29. pageNumEnd = pageCount
  30. } else {
  31. if (pageNow <= Math.floor(showPageMaxCount / 2)) {
  32. pageNumBegin = 1
  33. pageNumEnd = showPageMaxCount
  34. } else if (pageCount - pageNow <= Math.floor(showPageMaxCount / 2)) {
  35. pageNumBegin = pageCount - showPageMaxCount
  36. pageNumEnd = pageCount
  37. pageNumEnd - pageNumBegin >= showPageMaxCount && pageNumBegin++
  38. } else {
  39. pageNumBegin = Math.ceil(pageNow - showPageMaxCount / 2)
  40. pageNumEnd = Math.floor(pageNow + showPageMaxCount / 2)
  41. pageNumEnd - pageNumBegin >= showPageMaxCount && pageNumBegin++
  42. }
  43. }
  44. for (let i = pageNumBegin; i <= pageNumEnd; i++) {
  45. pageNumArr.push(i)
  46. }
  47. return pageNumArr
  48. }
  49. export default {
  50. props: {
  51. current: {
  52. default: 1
  53. },
  54. reindex: {
  55. default: 1
  56. },
  57. total: {
  58. default: 10
  59. },
  60. equable: {
  61. default: 10
  62. },
  63. length: {
  64. default: 5
  65. },
  66. value: {
  67. default: 1
  68. },
  69. color: {
  70. default: '#2d2d2d'
  71. }
  72. },
  73. data () {
  74. return { index: this.value }
  75. },
  76. mounted () {
  77. this.$emit('maxPage', this.maxPage)
  78. },
  79. computed: {
  80. ...mapState({
  81. language: state => state.language.current
  82. }),
  83. maxPage () {
  84. let val = Math.ceil(this.total / this.equable)
  85. this.$emit('maxPage', val)
  86. return val
  87. },
  88. pages () {
  89. let temp = getPageNumArr(this.length, this.index, this.maxPage)
  90. return temp
  91. }
  92. },
  93. methods: {
  94. clickHandle (index) {
  95. if (index > 0 && index <= this.maxPage) {
  96. this.index = index
  97. }
  98. this.$emit('clickHandle', this.index)
  99. }
  100. },
  101. watch: {
  102. index (newVal) {
  103. this.$bus.$emit('input', newVal)
  104. },
  105. current (newVal) {
  106. this.index = newVal
  107. }
  108. }
  109. }
  110. </script>
  111. <style scoped>
  112. .layout .more:hover::after{
  113. transform: scaleX(0)!important;
  114. }
  115. .layout .next-page-item:hover::before{
  116. transform: scaleX(2);
  117. }
  118. .layout .next-page-item:hover::after{
  119. transform: translateX(5px);
  120. }
  121. .layout .next-page-item::before{
  122. background-color: #111;
  123. height: 2px;
  124. width: 8px;
  125. transform-origin: 0 0;
  126. }
  127. .layout .next-page-item::after{
  128. width: 0;
  129. height: 0;
  130. border-style: solid;
  131. border-width: 5px 0 5px 8px;
  132. border-color: transparent transparent transparent #011111;
  133. }
  134. .layout .pre-page::after {
  135. transform-origin: 100% 0;
  136. }
  137. .layout .pre-page:hover::after{
  138. transform: scaleX(2);
  139. transform-origin: 100% 0;
  140. }
  141. .layout .pre-page:hover::before{
  142. transform: translateX(-5px);
  143. }
  144. .layout .pre-page::after{
  145. background-color: #111;
  146. height: 2px;
  147. width: 8px;
  148. }
  149. .layout .pre-page::before{
  150. width: 0;
  151. height: 0;
  152. border-style: solid;
  153. border-width: 5px 8px 5px 0;
  154. border-color: transparent #011111 transparent transparent;
  155. }
  156. /* .layout {
  157. text-align: center;
  158. }
  159. .layout a {
  160. margin: 10px;
  161. font-size: 18px;
  162. display: inline-block;
  163. cursor: pointer;
  164. user-select: none;
  165. color: #2d2d2d;
  166. }
  167. .layout a.active,
  168. .layout a:hover {
  169. color: #111111;
  170. border-bottom: 2px solid #111;
  171. } */
  172. </style>