vue3.0手动封装分页组件的方法

本文实例为大家分享了vue3.0手动封装分页组件的具体代码,供大家参考,具体内容如下

1.父组件引入

src/views/goods/components/goods-comment.vue

<!-- page表示初始化分页时,默认显示第几页 -->
    <XtxPagination @change-page='changePage' :pagesize='reqParams.pageSize' :total='total' :page='1' />
    //调接口
 import {findCommentListByGoods } from '@/api/product.js'
 export default{
  setup(){
  // 筛选条件准备
    const reqParams = reactive({
      // 当前页码
      page: 1,
      // 每页的条数
      pageSize: 10,
      // 是否有图片
      hasPicture: null,
      // 筛选条件
      tag: null,
      // 排序的字段
      sortField: null
    })
    // 侦听参数的变化
    watch(reqParams, () => {
   findCommentListByGoods(goods.value.id, reqParams).then(ret => {
        total.value = ret.result.counts
        list.value = ret.result.items
      })
    }, {
      immediate: true
    })
    // 控制页码的变化
    const changePage = (page) => {
      // 修改分页参数,重新调用接口即可
      reqParams.page = page
    }

  }
 }

2.子组件

src/components/library/xtx-pagination.vue

<template>
  <div class="xtx-pagination">
    <a @click='changePage(false)' href="javascript:;" :class="{disabled: currentPage===1}">上一页</a>
    <span v-if='currentPage > 3'>...</span>
    <a @click='changePage(item)' href="javascript:;" :class='{active: currentPage===item}' v-for='item in list' :key='item'>{{item}}</a>
    <span v-if='currentPage < pages - 2'>...</span>
    <a @click='changePage(true)' href="javascript:;" :class='{disabled: currentPage===pages}'>下一页</a>
  </div>
</template>
<script>
import { computed, ref } from 'vue'

export default {
  name: 'XtxPagination',
  props: {
    total: {
      type: Number,
      default: 80
    },
    pagesize: {
      type: Number,
      default: 10
    }
    // 默认初始页码
    // page: {
    //   type: Number,
    //   default: 1
    // }
  },
  setup (props, { emit, attrs }) {
    // attrs表示父组件传递的属性,但是props没有接收的属性,这种属性不是响应式的
    // 动态计算中期的页码信息
    // 每页的条数
    // const pagesize = 8
    // 总页数
    let pages = Math.ceil(props.total / props.pagesize)
    // 当前页码
    // console.log(attrs.page)
    const currentPage = ref(attrs.page || 1)
    // 动态计算页码列表
    const list = computed(() => {
      // 当父组件传递total的值发生变化时,计算属性会重新计算
      pages = Math.ceil(props.total / props.pagesize)
      const result = []
      // 总页码小于等于5;大于5
      if (pages <= 5) {
        // 总页码小于等于5的情况
        for (let i = 1; i <= pages; i++) {
          result.push(i)
        }
      } else {
        // 总页码大于5
        if (currentPage.value <= 2) {
          // 左侧临界值
          for (let i = 1; i <= 5; i++) {
            result.push(i)
          }
        } else if (currentPage.value >= pages - 1) {
          // 右侧临界值
          for (let i = pages - 4; i <= pages; i++) {
            result.push(i)
          }
        } else {
          // 中间的状态
          for (let i = currentPage.value - 2; i <= currentPage.value + 2; i++) {
            result.push(i)
          }
        }
      }
      return result
    })
    // 控制上一页和下一页变化
    const changePage = (type) => {
      if (type === false) {
        // 上一页
        // 页面是第一页时,禁止点击操作
        if (currentPage.value === 1) return
        if (currentPage.value > 1) {
          currentPage.value -= 1
        }
      } else if (type === true) {
        // 下一页
        // 页面是最后页时,禁止点击操作
        if (currentPage.value === pages) return
        if (currentPage.value < pages) {
          currentPage.value += 1
        }
      } else {
        // 点击页码
        currentPage.value = type
      }
      emit('change-page', currentPage.value)
    }
    return { list, currentPage, pages, changePage }
  }
}
</script>
<style scoped lang="less">
.xtx-pagination {
  display: flex;
  justify-content: center;
  padding: 30px;
  > a {
    display: inline-block;
    padding: 5px 10px;
    border: 1px solid #e4e4e4;
    border-radius: 4px;
    margin-right: 10px;
    &:hover {
      color: @xtxColor;
    }
    &.active {
      background: @xtxColor;
      color: #fff;
      border-color: @xtxColor;
    }
    &.disabled {
      cursor: not-allowed;
      opacity: 0.4;
      &:hover {
        color: #333;
      }
    }
  }
  > span {
    margin-right: 10px;
  }
}
</style>

知识点:attrs表示父组件传递的属性,但是props没有接收的属性,这种属性不是响应式的(vue3新增)

3.实现效果

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • 基于vue实现swipe分页组件实例

    项目背景 图片轮播是前端项目必有项,当前有很多效果很酷炫的轮播插件,例如 Swiper . 但是当我们项目中的图片轮播只需要一个很简单的轮播样式,比如这样的 我们引用这样一个 110k 的大插件,就大材小用了.再安利一下,swiper2.x和swiper3.x对移动和PC端支持情况如下图 当当当当~~~ 我们今天的主角登场了, thebird/Swipe,这个插件完成了图片轮播需要的基本功能,只有 14.2k ,真真的 轻量级 啊.还有,还有 翻译一下,就是俺们全支持,不管你是PC端(IE7+)

  • 基于Vue如何封装分页组件

    使用Vue做双向绑定的时候,可能经常会用到分页功能 接下来我们来封装一个分页组件 先定义样式文件 pagination.css ul, li { margin: 0px; padding: 0px; } .page-bar { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-se

  • Vue.js实现一个自定义分页组件vue-paginaiton

    vue实现一个分页组件vue-paginaiton vue使用了一段时间的感触就是,我再也不想直接操作DOM了.数据绑定式的编程体验真是好.实现的一个分页组件. 这里的css就不放出来了,可以看直接去github上下载:vue-pagination 先上一张实例图吧 模版 <div class="page-bar"> <ul> <li v-if="showFirstText"><a v-on:click="cur-

  • 基于vue2的table分页组件实现方法

    本文实例为大家分享了vue2 table分页组件的具体代码,供大家参考,具体内容如下 pagination.js: (function(){ var template = '<div class="page-bar" > \ <div class="info">{{info}}</div>\ <div class="showpages">每页<select class="showpa

  • vue实现分页组件

    本文实例为大家分享了vue实现分页组件的具体代码,供大家参考,具体内容如下 <template> <div class="pageBox"> <ul> <li v-if="this.condition.pageNo > 1 && this.pages.length > 4" class="sides"><a @click="prePage()"&

  • Vue全局分页组件的实现代码

    需求 一个监控控制台界面,有成千上万条表格数据,需要做一个全局分页组件,支持调整每页显示数目.总页数.当前页数.前进后退.自由跳转页数. 字段 参数名 数据类型 说明 total Number 总条数 pageNo Number 总页数 limit Number 每页展示条数 原型 预期长酱紫(不要嫌丑!毕竟是后台控制台!) 代码 html <template> <div class="paging-content clearfix"> <div clas

  • vue分页组件table-pagebar使用实例解析

    之前一直接触都是原始的前端模型,jquery+bootstrap,冗杂的dom操作,繁琐的更新绑定.接触vue后,对前端MVVM框架有了全新的认识.本文是基于webpack+vue构建,由于之前的工作主要是基于java的服务端开发工作,对前端框架和组件的理解,不够深入,借此来记录在前端框架使用和构建中的点点滴滴. 此分页组件参照于bootstrap-datatable底部分页开发完成,相关参数增加自定义功能. 最终使用展现效果图如下,数据来源于cnodejs[https://cnodejs.or

  • 使用vue.js制作分页组件

    学习了vue.js一段时间,拿它来做2个小组件,练习一下. 我这边是用webpack进行打包,也算熟悉一下它的运用. 源码放在文末的 github 地址上. 首先是index.html <!DOCTYPE html> <html> <head> <title>Page</title> <style type="text/css"> * { margin: 0; padding: 0; font-family: 'O

  • vue 基于element-ui 分页组件封装的实例代码

    具体代码如下所示: <template> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize" layout="total, sizes, prev, pager, next, j

  • 基于Vue.js的表格分页组件

    一.Vue.js简介 1.Vue的主要特点: (1) 简洁 (2) 轻量 (3)快速 (4) 数据驱动 (5) 模块友好 (6) 组件化 (1) 简洁 下面看一段Angular的实现双向绑定的代码 // html <body ng-app="myApp"> <div ng-controller="myCtrl"> <p>{{ note }}</p> <input type="text" ng-

随机推荐