vue分页组件封装
座右铭:越努力越幸运,越运动越健康。
热爱前端技术,热爱运动的(爱笑,傻傻的)这样一个人
用父传子进行封装(发射)
//封装
<template>
<nav aria-label="Page navigation" style="text-align: center;">
<ul class="pagination">
<!-- 上一页 -->
<li @click="prePage()" :class="pageNo<=1?'disabled':''">
<a aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<!-- 遍历总页数 -->
<li
:class="pageNo == index ?'active':''"
v-for="index in pages"
:key="index"
@click="curPage(index)"
>
<a>{{index}}</a>
</li>
<!-- 下一页 -->
<li @click="nextPage()" :class="pageNo>=pageTotal?'disabled':''">
<a aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
</template>
<script>
export default {
data() {
return {
curNo: 1
};
},
props: ["pageTotal", "pageNo"], //父-子 pageTotal总页数 pageNo当前页
created() {
this.curNo = this.pageNo; //为了避免一些错误,不让子来操作当前页
},
computed: { //对页码的要求
pages() {
let s = this.pageNo;
let n = this.pageTotal;
if (n < 10) return n; //总页数小于10,不添加...
if (s <= 5) {
return [1, 2, 3, 4, 5, 6, 7, "...", n];
} else if (s >= n - 5) {
//页码大于总页数-5
return [1, "...", n - 6, n - 5, n - 4, n - 3, n - 2, n - 1, n];
} else {
return [1, "...", s - 2, s - 1, s, s + 1, s + 2, "...", n];
}
}
},
methods: {
//当前页
curPage(i) {
if (i == "...") return;
this.$emit('e-child',i);
// if (i == "...") return;
// this.$emit("update:pageNo", i);
},
//上一页
prePage() {
if (this.pageNo > 1) {
this.$emit('e-child',--this.curNo );
// this.$emit("update:pageNo", --this.curNo);
}
},
//下一页
nextPage() {
if (this.pageNo < this.pageTotal) {
this.$emit('e-child',++this.curNo );
// this.$emit("update:pageNo", ++this.curNo);
}
}
}
};
//调用api
//例如:<Pagination :pageTotal = "page.pageTotal" :pageNo="page.pageNo" @e-child="getLists" />
/*需要传递的参数
*1.pageTotal 总页数
*2.pageNo 当前页
*3.接收发射过来的参数:getLists ,getLists为发送请求分页的方法
*/
</script>
使用sync修饰符(直接操作符,不用发射)
<template>
<nav aria-label="Page navigation" style="text-align: center;">
<ul class="pagination">
<!-- 上一页 -->
<li @click="prePage()" :class="pageNo<=1?'disabled':''">
<a aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<!-- 遍历总页数 -->
<li
:class="pageNo == index ?'active':''"
v-for="index in pages"
:key="index"
@click="curPage(index)"
>
<a>{{index}}</a>
</li>
<!-- 下一页 -->
<li @click="nextPage()" :class="pageNo>=pageTotal?'disabled':''">
<a aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
</template>
<script>
export default {
data() {
return {
curNo: 1
};
},
props: ["pageTotal", "pageNo"], //父-子 pageTotal总页数 pageNo当前页
created() {
this.curNo = this.pageNo; //为了避免一些错误,不让子来操作当前页
},
computed: { //对页码的要求
pages() {
let s = this.pageNo;
let n = this.pageTotal;
if (n < 10) return n; //总页数小于10,不添加...
if (s <= 5) {
return [1, 2, 3, 4, 5, 6, 7, "...", n];
} else if (s >= n - 5) {
//页码大于总页数-5
return [1, "...", n - 6, n - 5, n - 4, n - 3, n - 2, n - 1, n];
} else {
return [1, "...", s - 2, s - 1, s, s + 1, s + 2, "...", n];
}
}
},
methods: {
//当前页
curPage(i) {
// if (i == "...") return;
// this.$emit('e-child',i);
if (i == "...") return;
this.$emit("update:pageNo", i);
},
//上一页
prePage() {
if (this.pageNo > 1) {
// this.$emit('e-child',--this.curNo );
this.$emit("update:pageNo", --this.curNo);
}
},
//下一页
nextPage() {
if (this.pageNo < this.pageTotal) {
// this.$emit('e-child',++this.curNo );
this.$emit("update:pageNo", ++this.curNo);
}
}
}
};
//注意!!!!!!!父组件中监听
//使用sync修饰符封装还需要监听当前页的变化,需要新的当前页才发生变化
watch:{ //监听pageNo
'page.pageNo'(newValue,oldValue){
//getLists为发送请求分页的方法
this.getLists(newValue);
}
},
</script>
//调用api
//例如:<Pagination :pageTotal = "page.pageTotal" :pageNo.sync="page.pageNo" />
/*需要传递的参数
*1.pageTotal 总页数
*2.pageNo 当前页 使用sync修饰符
*/