VUE 自定义插件Page
记录自己遇到的问题,以备查询。Page.vue<template><div><div class="head"><span>{{totals}}条</span>/<span>{{pageCount}}页</span></div>&...
·
记录自己遇到的问题,以备查询。
Page.vue
<template>
<div class="container">
<div class="head">
<span>{{totals}}条</span>/<span>{{pageCount}}页</span>
</div>
<ul class="noselect">
<li @click="first">首页</li>
<li @click="pre">上一页</li>
<template v-for="page in pagers">
<li @click="changeCurPage(page)" :class="{'dp':page == activePage}">{{page}}</li>
</template>
<li @click="next">下一页</li>
<li @click="last">尾页</li>
<li class="ms">到</li>
<li class="in"><input v-model="toPage" @keyup.enter="go" @input="handleInput"/></li>
<li @click="go">GO</li>
<div style="clear: both;"></div>
</ul>
<div style="clear: both;"></div>
</div>
</template>
<script>
export default {
name: 'Page',
data(){
return{
toPage:null,
pagerCount:0,//显示页码数
pageCount:0,//总页数
activePage:1,//当前页码
}
},
props:{
totals:{
type:Number|String,
default: 0,
},
currentPage:{
type:Number|String,
default: 1,
},
pageSize:{
type:Number|String,
default: 10,
},
pager:{
type:Number|String,
validator(value) {
return (value | 0) === value && value > 4 && value < 22 && (value % 2) === 1
},
default: 7,
},
},
watch:{
activePage:{
handler(val) {
this.$emit('current-change',val)
}
},
currentPage: {
type:Number,
//immediate: true,
handler(val) {
this.activePage = val
}
},
pageSize: {
type:Number,
//immediate: true,
handler(val) {
this.$emit('page-size-change',val)
}
},
pager: {
type:Number,
immediate: true,
handler(val) {
this.pagerCount = val % 2 == 0 ? val + 1 : val
}
},
},
computed:{
pagers(){
let _pagers = []
//总页数
this.pageCount = Math.ceil(this.totals / this.pageSize)
let offset = (this.pagerCount - 1) / 2
let startPage = this.activePage - offset;
startPage = startPage < 1 ? 1:startPage
let endPage;
if(this.pageCount <= this.pagerCount){
endPage = this.pageCount
startPage = 1
}else{
endPage = this.activePage + offset
endPage = endPage > this.pageCount ? this.pageCount:endPage
}
if(startPage == 1 && endPage == this.pageCount){
for (let i = startPage; i <= this.pageCount; i++) {
_pagers.push(i)
}
}else if(startPage == 1 && endPage < this.pageCount){
for (let i = startPage; i <= this.pagerCount; i++) {
_pagers.push(i)
}
}else if(startPage > 1 && endPage == this.pageCount){
for (let i = this.pageCount - this.pagerCount + 1; i <= this.pageCount; i++) {
_pagers.push(i)
}
}else{
for (let i = startPage; i <= endPage; i++) {
_pagers.push(i)
}
}
return _pagers
}
},
methods:{
handleInput(e){
this.toPage = e.target.value.replace(/[^\d]/g,'');
},
changeCurPage(activePage){
this.activePage = activePage
},
//下一页
next(){
if(this.activePage == this.pageCount){
return
}
this.activePage = this.activePage + 1
},
//上一页
pre(){
if(this.activePage == 1){
return
}
this.activePage = this.activePage - 1
},
first(){
this.activePage = 1
},
last(){
this.activePage = this.pageCount
},
//页码跳转
go(){
if(!this.toPage){return}
this.toPage = parseInt(this.toPage)
if(this.toPage < 1){
this.activePage = 1
}else if(this.toPage > this.pageCount){
this.activePage = this.pageCount
}else{
this.activePage = this.toPage
}
this.toPage = this.activePage
},
}
}
</script>
<style scoped>
.container{padding-top: 20px;padding-right: 19px;padding-bottom: 20px;}
li{cursor: pointer;list-style: none;float: left;color: #808080;border: 1px solid #cccccc;padding: 2px 10px;margin: 0 3px;font-size: 14px;}
li:hover{background: #34a6e3;color: #FFF;border: 1px solid #34a6e3;}
li.ms:hover{color: #808080;border: none;background: #FFF;}
li.dp{background: #34a6e3;color: #FFF;border: 1px solid #34a6e3;}
li.ms{border: none;padding: 2px 5px;}
li.in{border: none;padding: 0;}
li.in input{width: 40px;padding: 5px 10px;border: 1px solid #cccccc;}
li.in input:hover{border-color: #409eff;}
li.in input:focus {outline: 0;border-color: #409eff;}
.head{float: left;padding: 2px 0px;margin: 0 5px;}
.head span {padding: 2px 3px;}
.noselect {
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Chrome/Safari/Opera */
-khtml-user-select: none; /* Konqueror */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently*/
}
</style>
更多推荐
已为社区贡献2条内容
所有评论(0)