分页器子组件封装
<template>
<div class="pagination">
<!-- 上 -->
//当前页第一页不能点击 :disabled="pageNo == 1"
//绑定一个点击事件 子传父$emit 事件为getPageNo
<button :disabled="pageNo == 1" @click="$emit('getPageNo', pageNo - 1)">
上一页
</button>
<button
v-if="startNumAndEndNum.start > 1"
// 绑定一个点击事件 子传父$emit 事件为getPageNo
@click="$emit('getPageNo', 1)"
:class="{ active: pageNo == 1 }"
>
1
</button>
<button v-if="startNumAndEndNum.start > 2">···</button>
<!-- 中间部分 -->
<button
v-for="(page, index) in startNumAndEndNum.end"
:key="index"
v-if="page >= startNumAndEndNum.start"
//绑定一个点击事件 子传父$emit 事件为getPageNo
@click="$emit('getPageNo', page)"
:class="{ active: pageNo == page }"
>
{{ page }}
</button>
<!-- 下 -->
<button v-if="startNumAndEndNum.end < totalPage - 1">···</button>
<button
v-if="startNumAndEndNum.end < totalPage"
//绑定一个点击事件 子传父$emit 事件为getPageNo
@click="$emit('getPageNo', totalPage)"
:class="{ active: pageNo == totalPage }"
>
{{ totalPage }}
</button>
<button
//当前页最后一页不能点击 :disabled="pageNo == totalPage"
:disabled="pageNo == totalPage"
//绑定一个点击事件 子传父$emit 事件为getPageNo
@click="$emit('getPageNo', pageNo + 1)"
>
下一页
</button>
<button style="margin-left: 30px">共 {{ total }} 条</button>
</div>
</template>
<script>
export default {
name: "Pagination",
//接受父组件传来的参数
props: ["pageNo", "pageSize", "total", "continues"],
computed: {
//总共多少页
totalPage() {
//向上取证
return Math.ceil(this.total / this.pageSize);
},
//计算出连续的页码的起始数字与结束数字[连续页码的数字:至少是5]
startNumAndEndNum() {
const { continues, pageNo, totalPage } = this;
//先定义两个变量存储起始数字与结束数字
let start = 0,
end = 0;
//连续页码数字5【就是至少五页】,如果出现不正常的现象【就是不够五页】
//不正常现象【总页数没有连续页码多】
if (continues > totalPage) {
start = 1;
end = totalPage;
} else {
//正常现象【连续页码5,但是你的总页数一定是大于5的】
//起始数字
start = pageNo - parseInt(continues / 2);
//结束数字
end = pageNo + parseInt(continues / 2);
//把出现不正常的现象【start数字出现0|负数】纠正
if (start < 1) {
start = 1;
end = continues;
}
//把出现不正常的现象[end数字大于总页码]纠正
if (end > totalPage) {
end = totalPage;
start = totalPage - continues + 1;
}
}
return { start, end };
},
},
};
</script>
父组件
<template>
<!-- pageNo 当前第一页 pageSize每页展示三条数据
total一共有99页 continues连续页码数是5个-->
<!-- pageNo 当前第一页 pageSize每页展示三条数据 total一共有99页 continues连续页码数是5个-->
<Pagination
//变成活数据
:pageNo="searchParams.pageNo"
:pageSize="searchParams.pageSize"
:total="total"
:continues="5"
//子传父通信 自定义事件
@getPageNo="getPageNo"
/>
</template>
<script>
import { mapGetters, mapState } from "vuex";
export default {
data() {
return {
searchParams: {
//产品相应的id
category1Id: "",
category2Id: "",
category3Id: "",
//产品的名字
categoryName: "",
//搜索的关键字
keyword: "",
//排序:初始状态应该是综合且降序
order: "1:desc",
//第几页
pageNo: 1,
//每一页展示条数
pageSize: 5,
//平台属性的操作
props: [],
//品牌
trademark: "",
},
};
},
computed: {
...mapGetters(["goodsList"]),
...mapState({
total: (state) => state.search.searchList.total,
}),
},
methods: {
//把发请求的这个action封装到一个函数里面
//将来需要再次发请求,你只需要在调用这个函数即可
getDate() {
this.$store.dispatch("getSearchList", this.searchParams);
},
getPageNo(pageNo) {
//整理带给服务器参数
this.searchParams.pageNo = pageNo;
//再次发请求
this.getData();
},
},
methods: {
//获取当前第几页
getPageNo(pageNo) {
//整理带给服务器参数 页码就是子组件传过来的页码
this.searchParams.pageNo = pageNo;
//再次发请求
this.getData();
},
}
}
</script>
仓库
import { reqGetSearchInfo } from "@/api";
//search模块的仓库
const state = {
//仓库初始状态
searchList: {},
};
const mutations = {
GETSEARCHLIST(state, searchList) {
state.searchList = searchList;
},
};
const actions = {
//获取search模块数据
//params形参:是当用户派发action的时候,第二个参数传递过来的,至少是一个空对象
async getSearchList({ commit }, tmd = {}) {
//当前这个reqGetSearchInfo这个函数在调用获取服务器数据的时候,至少传递一个参数(空对象)
let result = await reqGetSearchInfo(tmd);
if (result.code == 200) {
commit("GETSEARCHLIST", result.data);
}
},
};
const getters = {
//当前state是search中的state 不是大仓库中的state(不包含home中的state)
goodsList(state) {
//state.searchList.goodsList如果服务器数据回来了,没问题是一个数组
//假如网络不给力|没有网 state.searchList.goodsList应该返回的是undefined
//计算新的属性的属性值至少给人家来一个数组 没有数据遍历 至少给个空数组遍历
return state.searchList.goodsList || [];
},
trademarkList(state) {
return state.searchList.trademarkList || [];
},
attrsList(state) {
return state.searchList.attrsList || [];
},
};
export default {
state,
mutations,
actions,
getters,
};
export const reqGetSearchInfo = (params) =>
requests({ url: "/list", method: "post", data: params });