Nuxt.js-手写一个分页组件

时间：2023-03-31 15:54:15 vue.js

.page-wrap{display:flex;对齐项目：居中；证明内容：flex-end；文本对齐：右；用户选择：无；.li-page{游标：指针；宽度：65px；高度：32px；行河右：32px；border:1pxsolidrgba(204,204,204,1);边界半径：2px；文本对齐：居中；左边距：12px；}.li-page:hover{颜色：#fff;背景：rgba（67、137、255、1）；}ul{li{位置：相对；向左飘浮;宽度：40px；高度：32px；行高：32px；字体大小：14px；border:1pxsolidrgba(204,204,204,1);边界半径：2px；文本对齐：居中；左边距：12px；游标：指针；div{位置：绝对；宽度：100%；高度：100%；z-指数：2；}a:hover{颜色：#fff;}}li:hover,li.active{color:#fff;背景：rgba（67、137、255、1）；一个{颜色：#fff;}}}}1.HTML&&CSS@/components/Paginationn.vue<模板>上一页

{{i}}···

limit"class="li-page"@click="goNextPage">下一页

.page-wrap{display:flex;对齐项目：居中；证明内容：flex-end；文本对齐：右；用户选择：无；.li-page{游标：指针；宽度：65px；高度：32px；行河右：32px；border:1pxsolidrgba(204,204,204,1);边界半径：2px；文本对齐：居中；左边距：12px；}.li-page:hover{颜色：#fff;背景：rgba（67、137、255、1）；}ul{li{位置：相对；向左飘浮;宽度：40px；高度：32px；行高：32px；字体大小：14px；border:1pxsolidrgba(204,204,204,1);边界半径：2px；文本对齐：居中；左边距：12px；游标：指针；div{位置：绝对；宽度：100%；高度：100%；z-指数：2；}a:hover{颜色：#fff;}}li:hover,li.active{color:#fff;背景：rgba（67、137、255、1）；一个{颜色：#fff;}}}}2、Store@/store/pagination.jsexportconststate=()=>({offset:0,})exportconstmutations={//上一页PRE_PAGE(state,offset){state.offset-=offset},//下一页NEXT_PAGE(state,offset){state.offset+=offset},GO_PAGE(state,offset){state.offset=offset},}3、使用importPaginationfrom'@/components/Pagination'exportdefault{components:{Pagination,},methods:{asyncgetByPage(page){//获取第页数据}}}4、效果

上一篇：el-table自定义字段内容加el-tooltip

下一篇：vue-devtools安装报错解决

Nuxt.js-手写一个分页组件相关文章