Vue中使用依赖注入完成分页组件的封装

Vue中使用依赖注入完成分页组件的封装

依赖注入简单说明：[Vue中的依赖注入_lucky-2000的博客-CSDN博客]()

1.在项目中准备好父组件数据列表以及子组件（分页组件）页面和布局。

<template>

  // 父组件页面内容 数据列表

 <!-- 插入分页组件 -->
  <PageProvide/>

</template>

<script setup lang="ts">

// 导入要使用的依赖注入方法
import { provide } from 'vue';
// 导入分页组件
import PageProvide from "@/components/PageProvide.vue";


// 定义一个值，用于接收请求的数据返回的数据
let PageData = data.value

// 把数据传给分页组件 (必须使用键值对的方式存储 ‘key’,要传的数据)
provide('PageData',data.value)


</script>

2.要封装的分页组件

<template>
  <div class="card">
    <div class="card-body flex justify-content-evenly align-items-center align-center text-muted">
      
      <!--  下拉改变分页数据量   -->
      <!-- 使用双向绑定来控制页面显示多少条数据  -->
      <select class="form-select form-select-sm !w-100px" v-model="PageData.pageSize">
        <option :value="item" :key="item" v-for="item in Constant">{{ item }} 条/页</option>
      </select>
      
      
      <!--   跳转到指定页面   -->
      <div class="flex justify-center items-center mx-3">
        <span>跳至</span>
        <!--  键盘事件 输入回车触发方法  v-model：监听用户输入的值  -->
        <input @keyup.enter="toPage" v-model="pageValue" type="number" class="form-control form-control-sm mx-1 !w-42px"/>
        <span>页</span>
      </div>
      
      
      <!--   底部统计    -->
      <div>共 {{ PageData.totalPages }} 页，{{ PageData.totalRows }}条记录</div>

      <!--   分页按钮    -->
      <div class="btn-toolbar mb-3 mx-auto my-auto" role="toolbar" aria-label="Toolbar with button groups">
        <div class="btn-group me-2" role="group" aria-label="First group">
          <!--   上一页箭头事件 ：disable 当前页面为1禁用箭头    -->
          <button type="button" class="btn btn-actions btn-outline-secondary" :disabled="PageData.pageNo-1 == 0" @click="GoBack"> &larrb;</button>
          <!--  遍历数据 生成按钮数量   动态绑定样式-->
          <button type="button" class="btn btn-actions btn-outline-secondary" :class=" PageData.pageNo == item? 'bgc' :'' " @click="ChangePage(item)" v-for="item in ChangePageArr"> {{ item }}</button>
          <!-- 下一页箭头事件  -->
          <button type="button" class="btn btn-actions btn-outline-secondary" :disabled="PageData.pageNo == PageData.totalPages" @click="addPage">&rarrb;</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
// 引入需要使用到的方法 监听、响应式数据、注入
import {watch, ref, inject} from "vue";
// 引入分页数据封装的方法 （10条/页）
import Constant from "lodash-es/constant";

// 定义一个常量接收父组件传过来的数据 
const PageData = inject<PageData>(PaginationKey);

// 用户输入的值 用于做页面跳转
let pageValue = ref();
// 用于渲染分页按钮的数组
let ChangePageArr = ref(ChangePageNum());

// 监听属性：监视按钮数量的变化（eg：把页面数据改成了50/页 分页按钮就会相应减少
//        切换数据分页（监视切换到哪一页了，以便及时响应）

watch(
    () => {
      // 结构传过来的数据
      return { ...PageData.value };
    },
    // 传参
    (newVal, oldVal) => {
      // 如果旧的值或者新值的当前页面数 不等于旧的所在页面数
      if (oldVal && newVal.pageNo != oldVal.pageNo) {
        // 就将新的所在页面设置为 数据中的所在页面值
        PageData!.setPageNo(newVal.pageNo);
      }
      if (oldVal && newVal.pageSize != oldVal.pageSize) {
        PageData!.setPageSize(newVal.pageSize);
      }
      ChangePageArr.value = ChangePageNum();
      PageData!.setPagination(PageData.SETTING);
    },
    // 深度监听 立即监听 必须开启
    { deep: true, immediate: true }
);


// 跳转到指定页面
let toPage = () => {
  // 用户输入负数的判断
  if (pageValue.value < 1 ) {
    alert('当前不存在的页码值，请您仔细核对后重新输入！')
  }
  // 用户输入值大于总页数的判断
  if(pageValue.value > paginationSettingRef.value.totalPages ) {
    alert('当前不存在的页码值，请您仔细核对后重新输入！')
  }
  // 调用方法刷新页面
  PageData!.setPageNo(pageValue.value);
  pageValue.value = "";
};

// 左箭头 返回上一页
let GoBack = () => {
  PageData.value.pageNo = PageData.value.pageNo - 1;
  PageData!.setPagination(PaginationSetType.SETTING);
};

// 点击数字 跳转到相应页面
let ChangePage = (item: any) => {
  PageData.value.pageNo = item;
  if (item == '...') {
    // 当前情况item的值是 ... 且不存在pageNo  无法用item运算
    console.log(item.pageNo);
    return PageData.value.pageNo = 1
  }
  PageData!.setPagination(PaginationSetType.SETTING);
};

// 右箭头 前进一页
let addPage = () => {
  PageData.value.pageNo = PageData.value.pageNo + 1;
  PageData!.setPagination(PaginationSetType.SETTING);
};

// 页面控制中的省略号
function ChangePageNum() {
  // 如果总数小于等于10  直接返回所有
  if (PageData.value.totalPages <= 10) {
    return PageData.value.totalPages;
  }

  // 如果当前所在页小于等于5 返回       1 2 3 4 5  ... 页面总数
  if (PageData.value.pageNo <= 5) {
    return [1, 2, 3, 4, 5, "...", PageData.value.totalPages];

    // else if 当前所在页大于5且小于总页数      1 ... 6 7 ...
  } else if (PageData.value.pageNo > 5 && PageData.value.pageNo < PageData.value.totalPages - 2)
  {
    return [
      1,
      "...",
      PageData.value.pageNo,
      PageData.value.pageNo + 1 ,
      '...',
      PageData.value.totalPages,
    ];
  }
  // 如果当前所在页码等于 总页数-2    1 ... 当前页 总页数-2 总页数 -1 
  if (PageData.value.pageNo == PageData.value.totalPages - 2) {
    return [
      1,
      "...",
      PageData.value.pageNo,
      PageData.value.totalPages - 1,
      PageData.value.totalPages
    ];
  }
  if (PageData.value.pageNo == PageData.value.totalPages - 1) {
    return [
      1,
      "...",
      PageData.value.pageNo - 1,
      PageData.value.pageNo,
      PageData.value.totalPages
    ];
  }
  // 当前所在页等于总页数的情况    1 ... 13 14 15
  if (PageData.value.pageNo == PageData.value.totalPages ) {
    return [
      1,
      "...",
      PageData.value.pageNo - 2,
      PageData.value.pageNo - 1,
      PageData.value.totalPages,
    ];
  }
}

</script>


<style>
.bgc {
  background-color: skyblue;
}
</style>