wangpeng/yimo-resource-blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

init

Browse Source
This commit is contained in:
王鹏
2025-08-14 15:04:24 +08:00
commit a47c6dd47a
399 changed files with 66761 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
uni_modules/uni-pagination/changelog.md Normal file
View File

@@ -0,0 +1,27 @@
## 1.2.4（2022-09-19）
- 修复，未对主题色设置默认色，导致未引入 uni-scss 变量文件报错。
- 修复，未对移动端当前页文字做主题色适配。
## 1.2.3（2022-09-15）
- 修复未使用 uni-scss 主题色的 bug。
## 1.2.2（2022-07-06）
- 修复 es 语言 i18n 错误
## 1.2.1（2021-11-22）
- 修复 vue3中某些scss变量无法找到的问题
## 1.2.0（2021-11-19）
- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-pagination](https://uniapp.dcloud.io/component/uniui/uni-pagination)
## 1.1.2（2021-10-08）
- 修复 current 、value 属性未监听，导致高亮样式失效的 bug
## 1.1.1（2021-08-20）
- 新增 支持国际化
## 1.1.0（2021-07-30）
- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
## 1.0.7（2021-05-12）
- 新增 组件示例地址
## 1.0.6（2021-04-12）
- 新增 PC 和 移动端适配不同的 ui
## 1.0.5（2021-02-05）
- 优化 组件引用关系，通过uni_modules引用组件
## 1.0.4（2021-02-05）
- 调整为uni_modules目录规范

5
uni_modules/uni-pagination/components/uni-pagination/i18n/en.json Normal file
View File

@@ -0,0 +1,5 @@
{
"uni-pagination.prevText": "prev",
"uni-pagination.nextText": "next",
"uni-pagination.piecePerPage": "piece/page"
}

5
uni_modules/uni-pagination/components/uni-pagination/i18n/es.json Normal file
View File

@@ -0,0 +1,5 @@
{
"uni-pagination.prevText": "anterior",
"uni-pagination.nextText": "prxima",
"uni-pagination.piecePerPage": "Art<72><74>culo/P<><50>gina"
}

5
uni_modules/uni-pagination/components/uni-pagination/i18n/fr.json Normal file
View File

@@ -0,0 +1,5 @@
{
"uni-pagination.prevText": "précédente",
"uni-pagination.nextText": "suivante",
"uni-pagination.piecePerPage": "Articles/Pages"
}

12
uni_modules/uni-pagination/components/uni-pagination/i18n/index.js Normal file
View File

@@ -0,0 +1,12 @@
import en from './en.json'
import es from './es.json'
import fr from './fr.json'
import zhHans from './zh-Hans.json'
import zhHant from './zh-Hant.json'
export default {
en,
es,
fr,
'zh-Hans': zhHans,
'zh-Hant': zhHant
}

5
uni_modules/uni-pagination/components/uni-pagination/i18n/zh-Hans.json Normal file
View File

@@ -0,0 +1,5 @@
{
"uni-pagination.prevText": "上一页",
"uni-pagination.nextText": "下一页",
"uni-pagination.piecePerPage": "条/页"
}

5
uni_modules/uni-pagination/components/uni-pagination/i18n/zh-Hant.json Normal file
View File

@@ -0,0 +1,5 @@
{
"uni-pagination.prevText": "上一頁",
"uni-pagination.nextText": "下一頁",
"uni-pagination.piecePerPage": "條/頁"
}

465
uni_modules/uni-pagination/components/uni-pagination/uni-pagination.vue Normal file
View File

@@ -0,0 +1,465 @@
<template>
<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 -->
<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 current-index-text">{{ 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 {String} piecePerPageText 条/页文字
* @property {Number} current 当前页
* @property {Number} total 数据总量
* @property {Number} pageSize 每页数据量
* @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} pageSizeChange 当前每页条数改变时触发 ,e={pageSize} pageSize 为当前所选的每页条数
*/
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', 'pageSizeChange'],
props: {
value: {
type: [Number, String],
default: 1
},
modelValue: {
type: [Number, String],
default: 1
},
prevText: {
type: String,
},
nextText: {
type: String,
},
piecePerPageText: {
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
},
showPageSize: {
// 是否以 icon 形式展示按钮
type: [Boolean, String],
default: false
},
pagerCount: {
type: Number,
default: 7
},
pageSizeRange: {
type: Array,
default: () => [20, 50, 100, 500]
}
},
data() {
return {
pageSizeIndex: 0,
currentIndex: 1,
paperData: [],
pickerShow: false
}
},
computed: {
piecePerPage() {
return this.piecePerPageText || t('uni-pagination.piecePerPage')
},
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
}
}
},
pageSizeIndex(val) {
this.$emit('pageSizeChange', this.pageSizeRange[val])
}
},
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) {
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 !default;
.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;
}
.current-index-text{
color: $uni-primary;
}
.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>

83
uni_modules/uni-pagination/package.json Normal file
View File

@@ -0,0 +1,83 @@
{
"id": "uni-pagination",
"displayName": "uni-pagination 分页器",
"version": "1.2.4",
"description": "Pagination 分页器组件，用于展示页码、请求数据等。",
"keywords": [
"uni-ui",
"uniui",
"分页器",
"页码"
],
"repository": "https://github.com/dcloudio/uni-ui",
"engines": {
"HBuilderX": ""
},
"directories": {
"example": "../../temps/example_temps"
},
"dcloudext": {
"sale": {
"regular": {
"price": "0.00"
},
"sourcecode": {
"price": "0.00"
}
},
"contact": {
"qq": ""
},
"declaration": {
"ads": "无",
"data": "无",
"permissions": "无"
},
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui",
"type": "component-vue"
},
"uni_modules": {
"dependencies": ["uni-scss","uni-icons"],
"encrypt": [],
"platforms": {
"cloud": {
"tcb": "y",
"aliyun": "y"
},
"client": {
"App": {
"app-vue": "y",
"app-nvue": "y"
},
"H5-mobile": {
"Safari": "y",
"Android Browser": "y",
"微信浏览器(Android)": "y",
"QQ浏览器(Android)": "y"
},
"H5-pc": {
"Chrome": "y",
"IE": "y",
"Edge": "y",
"Firefox": "y",
"Safari": "y"
},
"小程序": {
"微信": "y",
"阿里": "y",
"百度": "y",
"字节跳动": "y",
"QQ": "y"
},
"快应用": {
"华为": "u",
"联盟": "u"
},
"Vue": {
"vue2": "y",
"vue3": "y"
}
}
}
}
}

11
uni_modules/uni-pagination/readme.md Normal file
View File

@@ -0,0 +1,11 @@
## Pagination 分页器
> **组件名：uni-pagination**
> 代码块： `uPagination`
分页器组件，用于展示页码、请求数据等。
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-pagination)
#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839