From b0b1d97f04f70a2b5edc731e68803c31835842ee Mon Sep 17 00:00:00 2001
From: whycq <10027870+whycq@user.noreply.gitee.com>
Date: 星期四, 09 二月 2023 17:03:54 +0800
Subject: [PATCH] #
---
uni_modules/uni-pagination/components/uni-pagination/uni-pagination.vue | 409 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 409 insertions(+), 0 deletions(-)
diff --git a/uni_modules/uni-pagination/components/uni-pagination/uni-pagination.vue b/uni_modules/uni-pagination/components/uni-pagination/uni-pagination.vue
new file mode 100644
index 0000000..c62150e
--- /dev/null
+++ b/uni_modules/uni-pagination/components/uni-pagination/uni-pagination.vue
@@ -0,0 +1,409 @@
+<template>
+ <view class="uni-pagination">
+ <!-- #ifndef APP-NVUE -->
+ <view class="uni-pagination__total is-phone-hide">鍏� {{ total }} 鏉�</view>
+ <!-- #endif -->
+ <view class="uni-pagination__btn"
+ :class="currentIndex === 1 ? 'uni-pagination--disabled' : 'uni-pagination--enabled'"
+ :hover-class="currentIndex === 1 ? '' : 'uni-pagination--hover'" :hover-start-time="20"
+ :hover-stay-time="70" @click="clickLeft">
+ <template v-if="showIcon === true || showIcon === 'true'">
+ <uni-icons color="#666" size="16" type="left" />
+ </template>
+ <template v-else>
+ <text class="uni-pagination__child-btn">{{ prevPageText }}</text>
+ </template>
+ </view>
+ <view class="uni-pagination__num uni-pagination__num-flex-none">
+ <view class="uni-pagination__num-current">
+ <text class="uni-pagination__num-current-text is-pc-hide"
+ style="color:#409EFF">{{ currentIndex }}</text>
+ <text class="uni-pagination__num-current-text is-pc-hide">/{{ maxPage || 0 }}</text>
+ <!-- #ifndef APP-NVUE -->
+ <view v-for="(item, index) in paper" :key="index" :class="{ 'page--active': item === currentIndex }"
+ class="uni-pagination__num-tag tag--active is-phone-hide" @click.top="selectPage(item, index)">
+ <text>{{ item }}</text>
+ </view>
+ <!-- #endif -->
+
+ </view>
+ </view>
+ <view class="uni-pagination__btn"
+ :class="currentIndex >= maxPage ? 'uni-pagination--disabled' : 'uni-pagination--enabled'"
+ :hover-class="currentIndex === maxPage ? '' : 'uni-pagination--hover'" :hover-start-time="20"
+ :hover-stay-time="70" @click="clickRight">
+ <template v-if="showIcon === true || showIcon === 'true'">
+ <uni-icons color="#666" size="16" type="right" />
+ </template>
+ <template v-else>
+ <text class="uni-pagination__child-btn">{{ nextPageText }}</text>
+ </template>
+ </view>
+ </view>
+</template>
+
+<script>
+ /**
+ * Pagination 鍒嗛〉鍣�
+ * @description 鍒嗛〉鍣ㄧ粍浠讹紝鐢ㄤ簬灞曠ず椤电爜銆佽姹傛暟鎹瓑
+ * @tutorial https://ext.dcloud.net.cn/plugin?id=32
+ * @property {String} prevText 宸︿晶鎸夐挳鏂囧瓧
+ * @property {String} nextText 鍙充晶鎸夐挳鏂囧瓧
+ * @property {Number} current 褰撳墠椤�
+ * @property {Number} total 鏁版嵁鎬婚噺
+ * @property {Number} pageSize 姣忛〉鏁版嵁閲�
+ * @property {Number} showIcon = [true|false] 鏄惁浠� icon 褰㈠紡灞曠ず鎸夐挳
+ * @event {Function} change 鐐瑰嚮椤电爜鎸夐挳鏃惰Е鍙� ,e={type,current} current涓哄綋鍓嶉〉锛宼ype鍊间负锛歯ext/prev锛岃〃绀虹偣鍑荤殑鏄笂涓�椤佃繕鏄笅涓�涓�
+ */
+
+ import {
+ initVueI18n
+ } from '@dcloudio/uni-i18n'
+ import messages from './i18n/index.js'
+ const {
+ t
+ } = initVueI18n(messages)
+ export default {
+ name: 'UniPagination',
+ emits: ['update:modelValue', 'input', 'change'],
+ props: {
+ value: {
+ type: [Number, String],
+ default: 1
+ },
+ modelValue: {
+ type: [Number, String],
+ default: 1
+ },
+ prevText: {
+ type: String,
+ },
+ nextText: {
+ type: String,
+ },
+ current: {
+ type: [Number, String],
+ default: 1
+ },
+ total: {
+ // 鏁版嵁鎬婚噺
+ type: [Number, String],
+ default: 0
+ },
+ pageSize: {
+ // 姣忛〉鏁版嵁閲�
+ type: [Number, String],
+ default: 10
+ },
+ showIcon: {
+ // 鏄惁浠� icon 褰㈠紡灞曠ず鎸夐挳
+ type: [Boolean, String],
+ default: false
+ },
+ pagerCount: {
+ type: Number,
+ default: 7
+ }
+ },
+ data() {
+ return {
+ currentIndex: 1,
+ paperData: []
+ }
+ },
+ computed: {
+ prevPageText() {
+ return this.prevText || t('uni-pagination.prevText')
+ },
+ nextPageText() {
+ return this.nextText || t('uni-pagination.nextText')
+ },
+ maxPage() {
+ let maxPage = 1
+ let total = Number(this.total)
+ let pageSize = Number(this.pageSize)
+ if (total && pageSize) {
+ maxPage = Math.ceil(total / pageSize)
+ }
+ return maxPage
+ },
+ paper() {
+ const num = this.currentIndex
+ // TODO 鏈�澶ч〉鏁�
+ const pagerCount = this.pagerCount
+ // const total = 181
+ const total = this.total
+ const pageSize = this.pageSize
+ let totalArr = []
+ let showPagerArr = []
+ let pagerNum = Math.ceil(total / pageSize)
+ for (let i = 0; i < pagerNum; i++) {
+ totalArr.push(i + 1)
+ }
+ showPagerArr.push(1)
+ const totalNum = totalArr[totalArr.length - (pagerCount + 1) / 2]
+ totalArr.forEach((item, index) => {
+ if ((pagerCount + 1) / 2 >= num) {
+ if (item < pagerCount + 1 && item > 1) {
+ showPagerArr.push(item)
+ }
+ } else if (num + 2 <= totalNum) {
+ if (item > num - (pagerCount + 1) / 2 && item < num + (pagerCount + 1) / 2) {
+ showPagerArr.push(item)
+ }
+ } else {
+ if ((item > num - (pagerCount + 1) / 2 || pagerNum - pagerCount < item) && item < totalArr[
+ totalArr.length - 1]) {
+ showPagerArr.push(item)
+ }
+ }
+ })
+ if (pagerNum > pagerCount) {
+ if ((pagerCount + 1) / 2 >= num) {
+ showPagerArr[showPagerArr.length - 1] = '...'
+ } else if (num + 2 <= totalNum) {
+ showPagerArr[1] = '...'
+ showPagerArr[showPagerArr.length - 1] = '...'
+ } else {
+ showPagerArr[1] = '...'
+ }
+ showPagerArr.push(totalArr[totalArr.length - 1])
+ } else {
+ if ((pagerCount + 1) / 2 >= num) {} else if (num + 2 <= totalNum) {} else {
+ showPagerArr.shift()
+ showPagerArr.push(totalArr[totalArr.length - 1])
+ }
+ }
+
+ return showPagerArr
+ }
+ },
+ watch: {
+ current: {
+ immediate: true,
+ handler(val, old) {
+ if (val < 1) {
+ this.currentIndex = 1
+ } else {
+ this.currentIndex = val
+ }
+ }
+ },
+ value: {
+ immediate: true,
+ handler(val) {
+ if (Number(this.current) !== 1) return
+ if (val < 1) {
+ this.currentIndex = 1
+ } else {
+ this.currentIndex = val
+ }
+ }
+ }
+ },
+ methods: {
+ // 閫夋嫨鏍囩
+ selectPage(e, index) {
+ if (parseInt(e)) {
+ this.currentIndex = e
+ this.change('current')
+ } else {
+ let pagerNum = Math.ceil(this.total / this.pageSize)
+ // let pagerNum = Math.ceil(181 / this.pageSize)
+ // 涓婁竴椤�
+ if (index <= 1) {
+ if (this.currentIndex - 5 > 1) {
+ this.currentIndex -= 5
+ } else {
+ this.currentIndex = 1
+ }
+ return
+ }
+ // 涓嬩竴椤�
+ if (index >= 6) {
+ if (this.currentIndex + 5 > pagerNum) {
+ this.currentIndex = pagerNum
+ } else {
+ this.currentIndex += 5
+ }
+ return
+ }
+ }
+ },
+ clickLeft() {
+ if (Number(this.currentIndex) === 1) {
+ return
+ }
+ this.currentIndex -= 1
+ this.change('prev')
+ },
+ clickRight() {
+ if (Number(this.currentIndex) >= this.maxPage) {
+ return
+ }
+ this.currentIndex += 1
+ this.change('next')
+ },
+ change(e) {
+ this.$emit('input', this.currentIndex)
+ this.$emit('update:modelValue', this.currentIndex)
+ this.$emit('change', {
+ type: e,
+ current: this.currentIndex
+ })
+ }
+ }
+ }
+</script>
+
+<style lang="scss" scoped>
+ $uni-primary: #2979ff;
+ .uni-pagination {
+ /* #ifndef APP-NVUE */
+ display: flex;
+ /* #endif */
+ position: relative;
+ overflow: hidden;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ }
+
+ .uni-pagination__total {
+ font-size: 14px;
+ color: #999;
+ margin-right: 15px;
+ }
+
+ .uni-pagination__btn {
+ /* #ifndef APP-NVUE */
+ display: flex;
+ cursor: pointer;
+ /* #endif */
+ padding: 0 8px;
+ line-height: 30px;
+ font-size: 12px;
+ position: relative;
+ background-color: #F0F0F0;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ text-align: center;
+ border-radius: 5px;
+ // border-width: 1px;
+ // border-style: solid;
+ // border-color: $uni-border-color;
+ }
+
+ .uni-pagination__child-btn {
+ /* #ifndef APP-NVUE */
+ display: flex;
+ /* #endif */
+ font-size: 12px;
+ position: relative;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ text-align: center;
+ color: #666;
+ font-size: 12px;
+ }
+
+ .uni-pagination__num {
+ /* #ifndef APP-NVUE */
+ display: flex;
+ /* #endif */
+ flex: 1;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ height: 30px;
+ line-height: 30px;
+ font-size: 12px;
+ color: #666;
+ margin: 0 5px;
+ }
+
+ .uni-pagination__num-tag {
+ /* #ifdef H5 */
+ cursor: pointer;
+ min-width: 30px;
+ /* #endif */
+ margin: 0 5px;
+ height: 30px;
+ text-align: center;
+ line-height: 30px;
+ // border: 1px red solid;
+ color: #999;
+ border-radius: 4px;
+ // border-width: 1px;
+ // border-style: solid;
+ // border-color: $uni-border-color;
+ }
+
+ .uni-pagination__num-current {
+ /* #ifndef APP-NVUE */
+ display: flex;
+ /* #endif */
+ flex-direction: row;
+ }
+
+ .uni-pagination__num-current-text {
+ font-size: 15px;
+ }
+
+ .uni-pagination--enabled {
+ color: #333333;
+ opacity: 1;
+ }
+
+ .uni-pagination--disabled {
+ opacity: 0.5;
+ /* #ifdef H5 */
+ cursor: default;
+ /* #endif */
+ }
+
+ .uni-pagination--hover {
+ color: rgba(0, 0, 0, 0.6);
+ background-color: #eee;
+ }
+
+ .tag--active:hover {
+ color: $uni-primary;
+ }
+
+ .page--active {
+ color: #fff;
+ background-color: $uni-primary;
+ }
+
+ .page--active:hover {
+ color: #fff;
+ }
+
+ /* #ifndef APP-NVUE */
+ .is-pc-hide {
+ display: block;
+ }
+
+ .is-phone-hide {
+ display: none;
+ }
+
+ @media screen and (min-width: 450px) {
+ .is-pc-hide {
+ display: none;
+ }
+
+ .is-phone-hide {
+ display: block;
+ }
+
+ .uni-pagination__num-flex-none {
+ flex: none;
+ }
+ }
+
+ /* #endif */
+</style>
--
Gitblit v1.9.1