基于Vue如何封装分页组件
发布时间：2020-12-17 03:08:07 所属栏目：百科 来源：网络整理
导读：使用Vue做双向绑定的时候，可能经常会用到分页功能 接下来我们来封装一个分页组件 先定义样式文件 pagination.css a { margin-left: 0px;}.page-bar a { border: 1px solid #ddd; text-decoration: none; position: relative; float: left; padding: 6px 12p
|
使用Vue做双向绑定的时候，可能经常会用到分页功能 接下来我们来封装一个分页组件 先定义样式文件 pagination.css a {
margin-left: 0px;
}
.page-bar a {
border: 1px solid #ddd;
text-decoration: none;
position: relative;
float: left;
padding: 6px 12px;
margin-left: -1px;
line-height: 1.42857143;
color: #337ab7;
cursor: pointer;
}
.page-bar a:hover {
background-color: #eee;
}
.page-bar .active a {
color: #fff;
cursor: default;
background-color: #337ab7;
border-color: #337ab7;
}
.page-bar i {
font-style: normal;
color: #d44950;
margin: 0px 4px;
font-size: 12px;
}
js文件 pagination.js= 11) {
if (this.cur > 5 && this.cur < this.all - 4) {
left = this.cur - 5
right = this.cur + 4
} else {
if (this.cur <= 5) {
left = 1
right = 10
} else {
right = this.all
left = this.all - 9
}
}
}
while (left <= right) {
ar.push(left)
left++
}
if (ar[0] > 1) {
ar[0] = 1;
ar[1] = -1;
}
if (ar[ar.length - 1] < this.all) {
ar[ar.length - 1] = this.all;
ar[ar.length - 2] = 0;
}
return ar
}
},methods: {
// 页码点击事件
btnClick: function (data) {
if (data < 1) return;
if (data != this.cur) {
this.cur = data
this.$dispatch('btn-click',data)
}
},// 下一页
nextPage: function (data) {
if (this.cur >= this.all) return;
this.btnClick(this.cur + 1);
},// 上一页
prvePage: function (data) {
if (this.cur <= 1) return;
this.btnClick(this.cur - 1);
},// 设置按钮禁用样式
setButtonClass: function (isNextButton) {
if (isNextButton) {
return this.cur >= this.all ? "page-button-disabled" : ""
}
else {
return this.cur <= 1 ? "page-button-disabled" : ""
}
}
}
})
vue.Pagination = pagination
})(Vue)
pagination分页组件就封装好了，需要使用的时候，引入以上两个文件即可 接下来我们测试下效果 {{msg}} 相关内容
|