wyb-pagination.vue 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442
  1. <template>
  2. <view class="wyb-pagination-box" :style="{
  3. paddingLeft: padding + 'rpx',
  4. paddingRight: padding + 'rpx',
  5. '--hover': autoHover}">
  6. <view class="wyb-pagination-left" :style="{opacity: currentPage === 1 ? 0.5 : 1}">
  7. <view v-if="showFirst" :class="'wyb-pagination-first-page-' + (showIcon ? 'i' : 't')" :style="btnStyleStr"
  8. :hover-class="currentPage === 1 ? '' : 'wyb-pagination-hover'" @tap="onPageBtnTap('first-page')">
  9. <view v-if="showIcon" class="iconfont icon-shuangjiantou left-arrow" />
  10. <text v-else>{{firstText}}</text>
  11. </view>
  12. <view :class="'wyb-pagination-prev-page-' + (showIcon ? 'i' : 't')" :style="btnStyleStr"
  13. :hover-class="currentPage === 1 ? '' : 'wyb-pagination-hover'" @tap="onPageBtnTap('prev-page')">
  14. <view v-if="showIcon" class="iconfont icon-danjiantou left-arrow" />
  15. <text v-else>{{prevText}}</text>
  16. </view>
  17. </view>
  18. <view class="wyb-pagination-info" @tap.stop="onInfoTap">
  19. <view class="wyb-pagination-num" v-if="!infoClick">
  20. <text :style="{color: currentColor}">{{currentPage}}</text>
  21. <text class="wyb-pagination-span" :style="{color: pageInfoColor}">/</text>
  22. <text :style="{color: pageInfoColor}">{{totalPage}}</text>
  23. <text v-if="showTotalItem" class="wyb-pagination-info-total"
  24. :style="{color: RGBChange(pageInfoColor, 0.5, 'light')}">
  25. ({{totalItems}})
  26. </text>
  27. </view>
  28. <!-- #ifndef MP-WEIXIN || APP-VUE || APP-NVUE || APP-PLUS || APP-PLUS-NVUE -->
  29. <view class="wyb-pagination-input" v-else>
  30. <input type="number" v-model="inputPage" :onpaste="false" :focus="infoFocus" :value="currentPage"
  31. :style="{color: currentColor}" :cursor-spacing="cursorSpacing" @confirm="onInfoConfirm"
  32. @blur="onInfoBlur" />
  33. </view>
  34. <!-- #endif -->
  35. <!-- #ifdef MP-WEIXIN || APP-VUE || APP-NVUE || APP-PLUS || APP-PLUS-NVUE -->
  36. <view class="wyb-pagination-input" v-else>
  37. <input type="number" v-model="inputPage" :focus="infoFocus" :name="currentPage"
  38. :style="{color: currentColor}" :cursor-spacing="cursorSpacing" @confirm="onInfoConfirm"
  39. @blur="onInfoBlur" />
  40. </view>
  41. <!-- #endif -->
  42. </view>
  43. <view class="wyb-pagination-right" :style="{opacity: currentPage === totalPage ? 0.5 : 1}">
  44. <view :class="'wyb-pagination-next-page-' + (showIcon ? 'i' : 't')" :style="btnStyleStr"
  45. :hover-class="currentPage === totalPage ? '' : 'wyb-pagination-hover'" @tap="onPageBtnTap('next-page')">
  46. <view v-if="showIcon" class="iconfont icon-danjiantou right-arrow" />
  47. <text v-else>{{nextText}}</text>
  48. </view>
  49. <view v-if="showLast" :class="'wyb-pagination-last-page-' + (showIcon ? 'i' : 't')" :style="btnStyleStr"
  50. :hover-class="currentPage === totalPage ? '' : 'wyb-pagination-hover'" @tap="onPageBtnTap('last-page')">
  51. <view v-if="showIcon" class="iconfont icon-shuangjiantou right-arrow" />
  52. <text v-else>{{lastText}}</text>
  53. </view>
  54. </view>
  55. </view>
  56. </template>
  57. <script>
  58. export default {
  59. data() {
  60. return {
  61. currentPage: this.current || 1,
  62. inputPage: '',
  63. infoClick: false,
  64. infoFocus: false
  65. }
  66. },
  67. computed: {
  68. totalPage() {
  69. console.log(parseFloat(this.totalItems),parseFloat(this.pageItems),"this.totalItems)")
  70. return Math.ceil(parseFloat(this.totalItems) / parseFloat(this.pageItems))
  71. },
  72. autoHover() {
  73. if (this.btnStyle.backgroundColor) {
  74. return this.RGBChange(this.btnStyle.backgroundColor, 0.1, 'dark')
  75. } else {
  76. return this.RGBChange('#f8f8f8', 0.05, 'dark')
  77. }
  78. },
  79. btnStyleStr() {
  80. let styleStr = ''
  81. for (let key in this.btnStyle) {
  82. styleStr += `${this.sortFieldMatch(key)}: ${this.btnStyle[key]}; `
  83. }
  84. return styleStr
  85. }
  86. },
  87. watch: {
  88. current(val) {
  89. console.log(val, "currentPage")
  90. const oPage = this.currentPage
  91. if (!Object.is(oPage, val)) {
  92. this.currentPage = val
  93. this.$emit('change', {
  94. type: 'prop-page',
  95. current: this.currentPage,
  96. })
  97. }
  98. }
  99. },
  100. props: {
  101. totalItems: {
  102. type: [String, Number],
  103. default: 20
  104. },
  105. pageItems: {
  106. type: [String, Number],
  107. default: 5
  108. },
  109. current: {
  110. type: [String, Number],
  111. default: 1
  112. },
  113. prevText: {
  114. type: String,
  115. default: '上一页'
  116. },
  117. nextText: {
  118. type: String,
  119. default: '下一页'
  120. },
  121. firstText: {
  122. type: String,
  123. default: '首页'
  124. },
  125. lastText: {
  126. type: String,
  127. default: '尾页'
  128. },
  129. pageInfoColor: {
  130. type: String,
  131. default: '#494949'
  132. },
  133. currentColor: {
  134. type: String,
  135. default: '#007aff'
  136. },
  137. padding: {
  138. type: [String, Number],
  139. default: 15
  140. },
  141. btnStyle: {
  142. type: Object,
  143. default () {
  144. return {}
  145. }
  146. },
  147. showIcon: {
  148. type: Boolean,
  149. default: false
  150. },
  151. showTotalItem: {
  152. type: Boolean,
  153. default: false
  154. },
  155. showFirst: {
  156. type: Boolean,
  157. default: true
  158. },
  159. showLast: {
  160. type: Boolean,
  161. default: true
  162. },
  163. couldInput: {
  164. type: Boolean,
  165. default: true
  166. },
  167. cursorSpacing: {
  168. type: Number,
  169. default: 0
  170. }
  171. },
  172. methods: {
  173. onPageBtnTap(type) {
  174. switch (type) {
  175. case 'first-page':
  176. if (!Object.is(this.currentPage, 1)) {
  177. this.currentPage = 1
  178. this.$emit('change', {
  179. type,
  180. current: this.currentPage
  181. })
  182. }
  183. break
  184. case 'prev-page':
  185. if (!Object.is(this.currentPage, 1)) {
  186. this.currentPage--
  187. this.$emit('change', {
  188. type,
  189. current: this.currentPage
  190. })
  191. }
  192. break
  193. case 'next-page':
  194. if (!Object.is(this.currentPage, this.totalPage)) {
  195. this.currentPage++
  196. this.$emit('change', {
  197. type,
  198. current: this.currentPage
  199. })
  200. }
  201. break
  202. case 'last-page':
  203. if (!Object.is(this.currentPage, this.totalPage)) {
  204. this.currentPage = this.totalPage
  205. this.$emit('change', {
  206. type,
  207. current: this.currentPage
  208. })
  209. }
  210. break
  211. }
  212. },
  213. onInfoTap() {
  214. if (this.couldInput) {
  215. this.infoClick = true
  216. this.inputPage = this.currentPage
  217. setTimeout(() => {
  218. this.infoFocus = true
  219. }, 10)
  220. }
  221. },
  222. onInfoConfirm(e) {
  223. let input = e.detail.value
  224. const oPage = this.currentPage
  225. if (parseFloat(input) > this.totalPage) {
  226. this.currentPage = this.totalPage
  227. } else if (parseFloat(input) < 1) {
  228. this.currentPage = 1
  229. } else if (input === '') {
  230. this.currentPage = oPage
  231. } else {
  232. this.currentPage = parseFloat(input)
  233. }
  234. if (!Object.is(oPage, this.currentPage)) {
  235. this.$emit('change', {
  236. type: 'input-page',
  237. current: this.currentPage,
  238. })
  239. }
  240. this.infoClick = false
  241. this.$nextTick(() => {
  242. this.infoFocus = false
  243. })
  244. },
  245. onInfoBlur(e) {
  246. let input = e.detail.value
  247. const oPage = this.currentPage
  248. if (parseFloat(input) > this.totalPage) {
  249. this.currentPage = this.totalPage
  250. } else if (parseFloat(input) < 1) {
  251. this.currentPage = 1
  252. } else if (input === '') {
  253. this.currentPage = oPage
  254. } else {
  255. this.currentPage = parseFloat(input)
  256. }
  257. if (!Object.is(oPage, this.currentPage)) {
  258. this.$emit('change', {
  259. type: 'input-page',
  260. current: this.currentPage,
  261. })
  262. }
  263. this.infoClick = false
  264. this.$nextTick(() => {
  265. this.infoFocus = false
  266. })
  267. },
  268. RGBChange(color, level, type) {
  269. // 判断颜色类型
  270. let r = 0,
  271. g = 0,
  272. b = 0,
  273. hasAlpha = false,
  274. alpha = 1
  275. if (color.indexOf('#') !== -1) {
  276. // hex转rgb
  277. if (color.length === 4) {
  278. let arr = color.split('')
  279. color = '#' + arr[1] + arr[1] + arr[2] + arr[2] + arr[3] + arr[3]
  280. }
  281. let color16List = [color.substring(1, 3), color.substring(3, 5), color.substring(5, 7)]
  282. r = parseInt(color16List[0], 16)
  283. g = parseInt(color16List[1], 16)
  284. b = parseInt(color16List[2], 16)
  285. } else {
  286. hasAlpha = color.indexOf('a') !== -1
  287. let root = color.slice()
  288. let idx = root.indexOf('(') + 1
  289. root = root.substring(idx)
  290. let firstDotIdx = root.indexOf(',')
  291. r = parseFloat(root.substring(0, firstDotIdx))
  292. root = root.substring(firstDotIdx + 1)
  293. let secondDotIdx = root.indexOf(',')
  294. g = parseFloat(root.substring(0, secondDotIdx))
  295. root = root.substring(secondDotIdx + 1)
  296. if (hasAlpha) {
  297. let thirdDotIdx = root.indexOf(',')
  298. b = parseFloat(root.substring(0, thirdDotIdx))
  299. alpha = parseFloat(root.substring(thirdDotIdx + 1))
  300. } else {
  301. b = parseFloat(root)
  302. }
  303. }
  304. let rgbc = [r, g, b]
  305. // 减淡或加深
  306. for (var i = 0; i < 3; i++)
  307. type === 'light' ? rgbc[i] = Math.floor((255 - rgbc[i]) * level + rgbc[i]) : rgbc[i] = Math.floor(rgbc[
  308. i] * (1 -
  309. level))
  310. if (hasAlpha) {
  311. return `rgba(${rgbc[0]}, ${rgbc[1]}, ${rgbc[2]}, ${alpha})`
  312. } else {
  313. return `rgb(${rgbc[0]}, ${rgbc[1]}, ${rgbc[2]})`
  314. }
  315. },
  316. sortFieldMatch(field) {
  317. const stringArray = field.split('')
  318. let newField = field
  319. stringArray.forEach(t => {
  320. if (/[A-Z]/.test(t)) {
  321. newField = field.replace(t, `-${t.toLowerCase()}`)
  322. }
  323. })
  324. return newField
  325. }
  326. }
  327. }
  328. </script>
  329. <style>
  330. @import 'iconfont.css';
  331. .wyb-pagination-box {
  332. width: 100%;
  333. display: flex;
  334. flex-direction: row;
  335. align-items: center;
  336. box-sizing: border-box;
  337. justify-content: space-between;
  338. flex-wrap: nowrap;
  339. }
  340. .wyb-pagination-left {
  341. flex: 1;
  342. display: flex;
  343. flex-direction: row;
  344. align-items: center;
  345. flex-wrap: nowrap;
  346. justify-content: flex-start;
  347. }
  348. .wyb-pagination-right {
  349. flex: 1;
  350. display: flex;
  351. flex-direction: row;
  352. align-items: center;
  353. flex-wrap: nowrap;
  354. justify-content: flex-end;
  355. }
  356. .wyb-pagination-first-page-t,
  357. .wyb-pagination-prev-page-t,
  358. .wyb-pagination-next-page-t,
  359. .wyb-pagination-last-page-t {
  360. font-size: 27rpx;
  361. padding: 14rpx 25rpx;
  362. box-sizing: border-box;
  363. background-color: #f8f8f8;
  364. border: 1px solid #e5e5e5;
  365. white-space: nowrap;
  366. }
  367. .wyb-pagination-first-page-i,
  368. .wyb-pagination-prev-page-i,
  369. .wyb-pagination-next-page-i,
  370. .wyb-pagination-last-page-i {
  371. font-size: 27rpx;
  372. padding: 14rpx 33rpx;
  373. box-sizing: border-box;
  374. background-color: #f8f8f8;
  375. border: 1px solid #e5e5e5;
  376. white-space: nowrap;
  377. }
  378. .wyb-pagination-first-page-t,
  379. .wyb-pagination-first-page-i {
  380. margin-right: 15rpx;
  381. }
  382. .wyb-pagination-last-page-t,
  383. .wyb-pagination-last-page-i {
  384. margin-left: 15rpx;
  385. }
  386. .wyb-pagination-info {
  387. font-size: 33rpx;
  388. white-space: nowrap;
  389. display: flex;
  390. flex-direction: row;
  391. align-items: center;
  392. justify-content: center;
  393. flex: 1;
  394. }
  395. .wyb-pagination-input input {
  396. text-align: center;
  397. }
  398. .wyb-pagination-span {
  399. margin: 0 2rpx;
  400. }
  401. .wyb-pagination-info-total {
  402. margin-left: 10rpx;
  403. }
  404. .wyb-pagination-first-page-t:active,
  405. .wyb-pagination-prev-page-t:active,
  406. .wyb-pagination-next-page-t:active,
  407. .wyb-pagination-last-page-t:active,
  408. .wyb-pagination-first-page-i:active,
  409. .wyb-pagination-prev-page-i:active,
  410. .wyb-pagination-next-page-i:active,
  411. .wyb-pagination-last-page-i:active {
  412. background-color: var(--hover) !important;
  413. }
  414. .left-arrow {
  415. transform: scale(0.9);
  416. margin-right: 5rpx;
  417. }
  418. .right-arrow {
  419. margin-left: 5rpx;
  420. transform: scale(0.9) rotate(180deg);
  421. -webkit-transform: scale(0.8) rotate(180deg);
  422. }
  423. </style>