|
@@ -1,7 +1,17 @@
|
|
|
<template>
|
|
<template>
|
|
|
<view class="uni-pagination">
|
|
<view class="uni-pagination">
|
|
|
|
|
+ <!-- #ifndef MP -->
|
|
|
|
|
+ <picker v-if="showPageSize === true || showPageSize === 'true'" class="select-picker" mode="selector"
|
|
|
|
|
+ :value="pageSizeIndex" :range="pageSizeRange" @change="pickerChange" @cancel="pickerClick"
|
|
|
|
|
+ @click.native="pickerClick">
|
|
|
|
|
+ <button type="default" size="mini" :plain="true">
|
|
|
|
|
+ <text>{{pageSizeRange[pageSizeIndex]}} {{piecePerPage}}</text>
|
|
|
|
|
+ <uni-icons class="select-picker-icon" type="arrowdown" size="12" color="#999"></uni-icons>
|
|
|
|
|
+ </button>
|
|
|
|
|
+ </picker>
|
|
|
|
|
+ <!-- #endif -->
|
|
|
<!-- #ifndef APP-NVUE -->
|
|
<!-- #ifndef APP-NVUE -->
|
|
|
- <!-- <view class="uni-pagination__total is-phone-hide">共 {{ total }} 条</view> -->
|
|
|
|
|
|
|
+ <view class="uni-pagination__total is-phone-hide">共 {{ total }} 条</view>
|
|
|
<!-- #endif -->
|
|
<!-- #endif -->
|
|
|
<view class="uni-pagination__btn"
|
|
<view class="uni-pagination__btn"
|
|
|
:class="currentIndex === 1 ? 'uni-pagination--disabled' : 'uni-pagination--enabled'"
|
|
:class="currentIndex === 1 ? 'uni-pagination--disabled' : 'uni-pagination--enabled'"
|
|
@@ -16,8 +26,7 @@
|
|
|
</view>
|
|
</view>
|
|
|
<view class="uni-pagination__num uni-pagination__num-flex-none">
|
|
<view class="uni-pagination__num uni-pagination__num-flex-none">
|
|
|
<view class="uni-pagination__num-current">
|
|
<view class="uni-pagination__num-current">
|
|
|
- <text class="uni-pagination__num-current-text is-pc-hide"
|
|
|
|
|
- style="color:#DF230F">{{ currentIndex }}</text>
|
|
|
|
|
|
|
+ <text class="uni-pagination__num-current-text is-pc-hide current-index-text">{{ currentIndex }}</text>
|
|
|
<text class="uni-pagination__num-current-text is-pc-hide">/{{ maxPage || 0 }}</text>
|
|
<text class="uni-pagination__num-current-text is-pc-hide">/{{ maxPage || 0 }}</text>
|
|
|
<!-- #ifndef APP-NVUE -->
|
|
<!-- #ifndef APP-NVUE -->
|
|
|
<view v-for="(item, index) in paper" :key="index" :class="{ 'page--active': item === currentIndex }"
|
|
<view v-for="(item, index) in paper" :key="index" :class="{ 'page--active': item === currentIndex }"
|
|
@@ -49,11 +58,15 @@
|
|
|
* @tutorial https://ext.dcloud.net.cn/plugin?id=32
|
|
* @tutorial https://ext.dcloud.net.cn/plugin?id=32
|
|
|
* @property {String} prevText 左侧按钮文字
|
|
* @property {String} prevText 左侧按钮文字
|
|
|
* @property {String} nextText 右侧按钮文字
|
|
* @property {String} nextText 右侧按钮文字
|
|
|
|
|
+ * @property {String} piecePerPageText 条/页文字
|
|
|
* @property {Number} current 当前页
|
|
* @property {Number} current 当前页
|
|
|
* @property {Number} total 数据总量
|
|
* @property {Number} total 数据总量
|
|
|
* @property {Number} pageSize 每页数据量
|
|
* @property {Number} pageSize 每页数据量
|
|
|
- * @property {Number} showIcon = [true|false] 是否以 icon 形式展示按钮
|
|
|
|
|
|
|
+ * @property {Boolean} showIcon = [true|false] 是否以 icon 形式展示按钮
|
|
|
|
|
+ * @property {Boolean} showPageSize = [true|false] 是否展示每页条数
|
|
|
|
|
+ * @property {Array} pageSizeRange = [20, 50, 100, 500] 每页条数选框
|
|
|
* @event {Function} change 点击页码按钮时触发 ,e={type,current} current为当前页，type值为：next/prev，表示点击的是上一页还是下一个
|
|
* @event {Function} change 点击页码按钮时触发 ,e={type,current} current为当前页，type值为：next/prev，表示点击的是上一页还是下一个
|
|
|
|
|
+ * * @event {Function} pageSizeChange 当前每页条数改变时触发 ,e={pageSize} pageSize 为当前所选的每页条数
|
|
|
*/
|
|
*/
|
|
|
|
|
|
|
|
import {
|
|
import {
|
|
@@ -65,7 +78,7 @@
|
|
|
} = initVueI18n(messages)
|
|
} = initVueI18n(messages)
|
|
|
export default {
|
|
export default {
|
|
|
name: 'UniPagination',
|
|
name: 'UniPagination',
|
|
|
- emits: ['update:modelValue', 'input', 'change'],
|
|
|
|
|
|
|
+ emits: ['update:modelValue', 'input', 'change', 'pageSizeChange'],
|
|
|
props: {
|
|
props: {
|
|
|
value: {
|
|
value: {
|
|
|
type: [Number, String],
|
|
type: [Number, String],
|
|
@@ -81,6 +94,9 @@
|
|
|
nextText: {
|
|
nextText: {
|
|
|
type: String,
|
|
type: String,
|
|
|
},
|
|
},
|
|
|
|
|
+ piecePerPageText: {
|
|
|
|
|
+ type: String
|
|
|
|
|
+ },
|
|
|
current: {
|
|
current: {
|
|
|
type: [Number, String],
|
|
type: [Number, String],
|
|
|
default: 1
|
|
default: 1
|
|
@@ -100,18 +116,32 @@
|
|
|
type: [Boolean, String],
|
|
type: [Boolean, String],
|
|
|
default: false
|
|
default: false
|
|
|
},
|
|
},
|
|
|
|
|
+ showPageSize: {
|
|
|
|
|
+ // 是否以 icon 形式展示按钮
|
|
|
|
|
+ type: [Boolean, String],
|
|
|
|
|
+ default: false
|
|
|
|
|
+ },
|
|
|
pagerCount: {
|
|
pagerCount: {
|
|
|
type: Number,
|
|
type: Number,
|
|
|
default: 7
|
|
default: 7
|
|
|
|
|
+ },
|
|
|
|
|
+ pageSizeRange: {
|
|
|
|
|
+ type: Array,
|
|
|
|
|
+ default: () => [20, 50, 100, 500]
|
|
|
}
|
|
}
|
|
|
},
|
|
},
|
|
|
data() {
|
|
data() {
|
|
|
return {
|
|
return {
|
|
|
|
|
+ pageSizeIndex: 0,
|
|
|
currentIndex: 1,
|
|
currentIndex: 1,
|
|
|
- paperData: []
|
|
|
|
|
|
|
+ paperData: [],
|
|
|
|
|
+ pickerShow: false
|
|
|
}
|
|
}
|
|
|
},
|
|
},
|
|
|
computed: {
|
|
computed: {
|
|
|
|
|
+ piecePerPage() {
|
|
|
|
|
+ return this.piecePerPageText || t('uni-pagination.piecePerPage')
|
|
|
|
|
+ },
|
|
|
prevPageText() {
|
|
prevPageText() {
|
|
|
return this.prevText || t('uni-pagination.prevText')
|
|
return this.prevText || t('uni-pagination.prevText')
|
|
|
},
|
|
},
|
|
@@ -199,9 +229,31 @@
|
|
|
this.currentIndex = val
|
|
this.currentIndex = val
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
|
|
+ },
|
|
|
|
|
+ pageSizeIndex(val) {
|
|
|
|
|
+ this.$emit('pageSizeChange', this.pageSizeRange[val])
|
|
|
}
|
|
}
|
|
|
},
|
|
},
|
|
|
methods: {
|
|
methods: {
|
|
|
|
|
+ pickerChange(e) {
|
|
|
|
|
+ this.pageSizeIndex = e.detail.value
|
|
|
|
|
+ this.pickerClick()
|
|
|
|
|
+ },
|
|
|
|
|
+ pickerClick() {
|
|
|
|
|
+ // #ifdef H5
|
|
|
|
|
+ const body = document.querySelector('body')
|
|
|
|
|
+ if (!body) return
|
|
|
|
|
+
|
|
|
|
|
+ const className = 'uni-pagination-picker-show'
|
|
|
|
|
+ this.pickerShow = !this.pickerShow
|
|
|
|
|
+
|
|
|
|
|
+ if (this.pickerShow) {
|
|
|
|
|
+ body.classList.add(className)
|
|
|
|
|
+ } else {
|
|
|
|
|
+ setTimeout(() => body.classList.remove(className), 300)
|
|
|
|
|
+ }
|
|
|
|
|
+ // #endif
|
|
|
|
|
+ },
|
|
|
// 选择标签
|
|
// 选择标签
|
|
|
selectPage(e, index) {
|
|
selectPage(e, index) {
|
|
|
if (parseInt(e)) {
|
|
if (parseInt(e)) {
|
|
@@ -257,7 +309,7 @@
|
|
|
</script>
|
|
</script>
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
<style lang="scss" scoped>
|
|
|
- $uni-primary: #DF230F;
|
|
|
|
|
|
|
+ $uni-primary: #2979ff !default;
|
|
|
.uni-pagination {
|
|
.uni-pagination {
|
|
|
/* #ifndef APP-NVUE */
|
|
/* #ifndef APP-NVUE */
|
|
|
display: flex;
|
|
display: flex;
|
|
@@ -352,6 +404,10 @@
|
|
|
font-size: 15px;
|
|
font-size: 15px;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
+ .current-index-text{
|
|
|
|
|
+ color: $uni-primary;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
.uni-pagination--enabled {
|
|
.uni-pagination--enabled {
|
|
|
color: #333333;
|
|
color: #333333;
|
|
|
opacity: 1;
|
|
opacity: 1;
|
xionghaojie