🚀 Socket Launch Week Day 5:Introducing Repository Access Permissions and Custom Roles.Learn more →
Sign In

@fouro/elx

Package Overview
Dependencies
Maintainers
6
Versions
57
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@fouro/elx - npm Package Compare versions

Comparing version
1.0.48
 to
1.0.49
+6
src/elx.js
export default {
pagination: {
summaries: '第 {start} - {end}， 共 {total}',
pageSizes: '{size}/页',
}
}
+3
-3
package.json
{
"name": "@fouro/elx",
"version": "1.0.48",
"version": "1.0.49",
"description": "element-ui components",

@@ -20,3 +20,3 @@ "main": "/src",

"vue-virtual-scroller": "^0.12.0",
"dayjs": "^1.8.15"
"dayjs": "^1.8.15"
},

@@ -28,2 +28,2 @@ "files": [

]
}
}
+160
-133
src/Pager.vue
<template>
<ul class="el-pager el-pagination">
<li class="page-sizes" v-if="sizeConfig">
<el-select @change="changePageSize" v-model="size">
<el-option v-for="item in pageSizes" :key="item" :label="`${item}/${pageText}`" :value="item"></el-option>
</el-select>
</li>
<li>
{{`${orderText} ${countRange.start} - ${countRange.end} ${totalText} ${total}`}}
</li>
<li>
<button type="button" :disabled="currentPage === 0" class="btn-prev" @click.stop="preClick">
<i class="el-icon el-icon-arrow-left"></i>
</button>
</li>
<li class="page-info">
<span class="curr-page">
{{(currentPage || 0)+1}}
</span>/ {{totalPages}} {{pageText}}
</li>
<li>
<button type="button" :disabled="currentPage === totalPages-1" class="btn-next" @click.stop="nextClick">
<i class="el-icon el-icon-arrow-right"></i>
</button>
</li>
</ul>
<ul class="el-pager el-pagination">
<li class="page-sizes">
<el-select v-show="showPageSize" @change="changePageSize" v-model="size">
<el-option v-for="item in pageSizes" :key="item" :label="t(pageSizeText,{size:item})" :value="item"></el-option>
</el-select>
</li>
<li>
{{t(summaries, {
start: countRange.start,
end: countRange.end,
total: total})}}
</li>
<li>
<button type="button" :disabled="currentPage === 1" class="btn-prev" @click.stop="preClick">
<i class="el-icon el-icon-arrow-left"></i>
</button>
</li>
<li class="page-info">
<span class="curr-page">
{{currentPage}}
</span>/ {{totalPages}}
</li>
<li>
<button type="button" :disabled="currentPage === totalPages" class="btn-next" @click.stop="nextClick">
<i class="el-icon el-icon-arrow-right"></i>
</button>
</li>
</ul>
</template>
<script>
import { throttle } from "@fouro/all-in-one/src/utils/kit";
import Locale from 'element-ui/src/mixins/locale';
export default {
name: 'pagination',
props: {
sizeConfig: {
type: Boolean,
default: true
name: 'pagination',
mixins: [Locale],
props: {
summaries: {
type: String,
default: 'elx.pagination.summaries'
},
pageSizeText: {
type: String,
default: 'elx.pagination.pageSizes'
},
pageSize: {
type: Number,
default: 10
},
total: {
type: Number,
default: 0
},
pageCount: {
type: Number,
default: 1
},
currentPage: {
type: Number,
default: 1
},
pageSizes: {
type: Array,
default: () => [10, 20, 50]
},
preText: {
type: String,
default: null
},
nextText: {
type: String,
default: null
},
disabled: {
type: Boolean,
default: false
},
showPageSize: {
type: Boolean,
default: true
}
},
orderText: {
type: String,
default: '第'
computed: {
totalPages() {
let size = this.pageSize || 10
let pageCount = Math.ceil(this.total / size)
return pageCount > 0 ? pageCount : 1
},
countRange() {
if (!this.total) return {
start: 0,
end: 0
}
let size = this.pageSize || 10
let start = size * (this.currentPage - 1) + 1
let last = size * this.currentPage
let end = last > this.total ? this.total : last
return {
start,
end
}
}
},
totalText: {
type: String,
default: '共'
data() {
return {
page: 0,
size: 10
}
},
pageText: {
type: String,
default: '页'
watch: {
pageSize: function(newVal, oldVal) {
if (newVal) {
this.size = newVal;
}
}
},
pageSize: {
type: Number,
default: 10
methods: {
changePageSize() {
this.$emit('size-change', this.size)
},
changePageNumber: throttle(function(page) {
this.$emit('page-change', page)
}, 500, { trailing: false }),
nextClick: throttle(function() {
this.changePageNumber(this.currentPage + 1)
}, 500, { trailing: false }),
preClick: throttle(function() {
this.changePageNumber(this.currentPage - 1)
}, 500, { trailing: false })
},
total: {
type: Number,
default: 0
mounted() {
this.$nextTick(() => {
this.page = this.currentPage > 1 ? this.currentPage : 1
this.size = this.pageSize > 0 ? this.pageSize : 10
})
},
pageCount: {
type: Number,
default: 1
},
currentPage: {
type: Number,
default: 1
},
pageSizes: {
type: Array,
default: () => [10, 20, 30, 40, 50, 100]
},
preText: {
type: String,
default: null
},
nextText: {
type: String,
default: null
},
disabled: {
type: Boolean,
default: false
}
},
computed: {
totalPages() {
let size = this.pageSize || 10
let pageCount = Math.ceil(this.total/size)
return pageCount > 0 ? pageCount : 1
},
countRange() {
if(!this.total) return {
start: 0,
end: 0
}
let start = this.size * this.currentPage + 1
let last = this.size * (this.currentPage + 1)
let end = last > this.total ? this.total : last
return {
start,
end
}
},
},
data() {
return {
page: 0,
size: 10
}
},
methods: {
changePageSize() {
this.$emit('size-change', this.size)
},
changePageNumber: throttle(function(page) {
this.$emit('page-change', page)
}, 500, {trailing: false}),
nextClick: throttle(function(){
this.changePageNumber(++this.page)
}, 500, {trailing: false}),
preClick: throttle(function() {
this.changePageNumber(--this.page)
}, 500, {trailing: false})
},
mounted() {
this.page = this.currentPage >= 0 ? this.currentPage : 0
this.size = this.pageSize > 0 ? this.pageSize : 10
}
}
</script>
<style>
.el-pagination.el-pager .el-select .el-input {
.el-pagination.el-pager .el-select .el-input {
width: 80px;
}
.el-pagination.el-pager .el-select .el-input .el-input__inner {
}
.el-pagination.el-pager .el-select .el-input .el-input__inner {
padding: 0 15px 0 0;
height: 28px;
line-height: 28px;
}
.el-pagination .el-select .el-input__suffix{
}
.el-pagination .el-select .el-input__suffix {
height: 28px;
line-height: 28px;
}
.el-pager .page-info {
}
.el-pagination .el-select .el-input .el-select__caret {
line-height: 28px;
}
.el-pager .page-info {
font-size: 14px;
font-weight: 400;
cursor: default;
}
.el-pager .page-info .curr-page {
}
.el-pager .page-info .curr-page {
display: inline;
font-weight: 600;
font-size: 14px;
}
.el-pagination.el-pager button,
.el-pagination.el-pager span:not([class*=suffix]) {
}
.el-pager .page-info:hover {
color: #5F6368;
}
.el-pager .page-sizes~li:hover {
color: #5F6368;
}
.el-pagination.el-pager button,
.el-pagination.el-pager span:not([class*=suffix]) {
padding: 0;
min-width: 15px;
}
.el-pagination.el-pager li {
}
.el-pagination.el-pager li {
min-width: 15px;
font-size: 14px;
font-weight: 500;
}
}
</style>