翻页组件 -- 子组件
<template>
<div class="pager-wrapper" ref="pager">
<div class="pager-box">
<a class="pager-prev" :class="{'pager-disabled':prevdisable}" href="javascript:void(0)" @click="jumpprev()">上一页</a>
<template v-for="(i,index) in pagesize">
<span v-if="i==pageno" class="pager-curr" :key="index">
<em class="pager-em"></em>
<em>{{i}}</em>
</span>
<a v-else-if="pageno<5&&(i)<6" href="javascript:void(0)" @click="jump(i)" :key="index">
{{i}}
</a>
<a v-else-if="pagesize<7||i==1||i==pagesize||(pageno-2<=i&&i<=pageno+2)" href="javascript:void(0)" @click="jump(i)" :key="index">
{{i}}
</a>
<template v-else>
<span v-if="pageno<5&&i==6" class="pager-spr" :key="index">…</span>
<span v-if="pageno==4&&i==7" class="pager-spr" :key="index">…</span>
<span v-if="pageno>4&&i==pageno-3" class="pager-spr" :key="index">…</span>
<span v-if="pageno>4&&i==pageno+3" class="pager-spr" :key="index">…</span>
</template>
</template>
<a class="pager-next" :class="{'pager-disabled':nextdisable}" href="javascript:void(0)" @click="jumpnext()">下一页</a>
</div>
<div class="pager-input">
<div>跳转到：</div>
<input type="text" v-model="jumppage">
<a class="pager-btn-go" href="javascript:void(0)" @click="go()">go</a>
</div>
</div>
</template>
<script>
export default {
model: { // 通过v-model传过来的参数
prop: 'pageno',
event: 'jumppage'
},
props: {
pagesize: {
type: number,
default: 1
},
pageno: { // 通过v-model传过来的参数
type: number,
default: 1
}
},
data () {
return {
jumppage: '' // 避免操作props参数
}
},
computed: {
prevdisable: function () { // “上一页”按钮是否可点
if (this.pageno > 1) {
return false
} else {
return true
}
},
nextdisable: function () { // “下一页”按钮是否可点
if (this.pageno < this.pagesize && this.pagesize > 1) {
return false
} else {
return true
}
}
},
methods: {
jumpprev: function () { // 点击上一页
if (this.pageno === 1) {
return false
} else {
this.$emit('jumppage', this.pageno - 1)
}
},
jumpnext: function () { // 点击下一页
if (this.pageno === this.pagesize) {
return false
} else {
this.$emit('jumppage', this.pageno + 1) // 修改当前页码
}
},
jump: function (id) { // 直接跳转
if (id > this.pagesize) {
id = this.pagesize
}
this.jumppage = ''
this.$emit('jumppage', id) // 修改当前页码
},
go: function () {
if (this.jumppage === '') { // 判空处理
return false
} else if (/^\d*$/.test(parseint(this.jumppage))) { // 填写数字才能跳转
this.jump(parseint(this.jumppage))
this.jumppage = ''
} else {
this.jumppage = ''
return false
}
}
}
}
</script>
<style scoped lang="stylus" type="text/stylus">
@import "~styles/varibles.styl"
.pager-wrapper
float right
display flex
flex-direction row
height 38px
.pager-box
margin-top -15px
a,span
display inline-block
width 38px
height 38px
margin 0 2px
border 1px solid #e5e5e5
color #bdbdbd
text-align center
font 14px/38px ""
em
color $bgcolor
.pager-prev,.pager-next
width 78px
.pager-input
display flex
flex-direction row
height 38px
margin-left 20px
font 14px/40px ""
color #bdbdbd
input,.pager-btn-go
display inline-block
width 40px
height 40px
border 1px solid #e5e5e5
box-sizing content-box
outline none
text-align center
</style>
父组件
<pager :pagesize="pagesize" v-model="pageno" @jumppage="jump"></pager>
//组件引入
import pager from '../../component/pager/pager.vue'
//组件调用声明
components:{ pager}
//参数
data () {
return {
pagesize: 30, //总页数 -- 后台传值
pageno: 2 //当前页
}
}
//接收跳转事件
methods:{
jump (id) {
console.log(id)
}
}
如对本文有疑问， 点击进行留言回复！！
egg项目npm/cnpm出错Connect timeout
我要评论
网友评论