1、HTML && CSS
@/components/Paginationn.vue
上一页
-
{{ i }}
···
limit" class="li-page" @click="goNextPage">
下一页.page-wrap {
display: flex;
align-items: center;
justify-content: flex-end;
text-align: right;
user-select: none;
.li-page {
cursor: pointer;
width: 65px;
height: 32px;
line-height: 32px;
border: 1px solid rgba(204, 204, 204, 1);
border-radius: 2px;
text-align: center;
margin-left: 12px;
}
.li-page:hover {
color: #fff;
background: rgba(67, 137, 255, 1);
}
ul {
li {
position: relative;
float: left;
width: 40px;
height: 32px;
line-height: 32px;
font-size: 14px;
border: 1px solid rgba(204, 204, 204, 1);
border-radius: 2px;
text-align: center;
margin-left: 12px;
cursor: pointer;
div {
position: absolute;
width: 100%;
height: 100%;
z-index: 2;
}
a:hover {
color: #fff;
}
}
li:hover,
li.active {
color: #fff;
background: rgba(67, 137, 255, 1);
a {
color: #fff;
}
}
}
}2、Store
@/store/pagination.js
export const state = () => ({
offset: 0,
})export const mutations = {
// 上一页
PRE_PAGE(state, offset) {
state.offset -= offset
},
// 下一页
NEXT_PAGE(state, offset) {
state.offset += offset
},
GO_PAGE(state, offset) {
state.offset = offset
},
}
3、使用
【Nuxt.js-手写一个分页组件】import Pagination from '@/components/Pagination'export default {
components: {
Pagination,
},
methods:{
async getByPage(page) {
// 获取第 page 页数据
}
}
}4、效果
文章图片
推荐阅读
- Vite入门从手写一个乞丐版的Vite开始（上）
- el-date-picker日期和时间范围无法选择时间的问题
- VUE 自定义指令实现点击后禁用elementUI按钮
- Vue3自制UI框架的技术总结
- 常见的 Monorepo 框架大比较
- Vue动态绑定背景图片及三元运算操作
- 我想写一个 Vue3 组件库，我该怎么开始（）
- 7个 Vue3 中的组件通信方式
- Vue3中实现路由跳转的过渡动画(一)