翻页组件 -- 子组件
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
}
}
}
}
@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
父组件
//组件引入
import pager from '../../component/pager/pager.vue'
//组件调用声明
components:{ pager}
//参数
data () {
return {
pageSize: 30, //总页数 -- 后台传值
pageNo: 2 //当前页
}
}
//接收跳转事件
methods:{
jump (id) {
console.log(id)
}
}