zms-admin-paging 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 zms-code
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,100 @@
+# zms-admin-paging
+
+基于 [Element Plus](https://element-plus.org/) 封装的管理后台分页组件。
+
+## 特性
+
+- 将「页码变化」与「每页条数变化」统一为单个 `change` 事件
+- 内置中文「上一页 / 下一页」文案与背景色
+- 支持全局注册与按需引入
+- 完整 TypeScript 类型声明
+
+## 安装
+
+```bash
+npm install zms-admin-paging
+# 或
+pnpm add zms-admin-paging
+# 或
+yarn add zms-admin-paging
+```
+
+> 依赖要求：项目中需已安装 `vue@^3.3.0` 与 `element-plus@^2.4.0`，
+> 并已引入 Element Plus 的样式。
+
+## 使用
+
+### 全局注册
+
+```ts
+// main.ts
+import { createApp } from "vue";
+import App from "./App.vue";
+import ZmsAdminPaging from "zms-admin-paging";
+
+const app = createApp(App);
+app.use(AdminPaging);
+app.mount("#app");
+```
+
+```vue
+<!-- 直接在模板中使用 -->
+<template>
+  <zms-admin-paging
+    :total="100"
+    :page-size="15"
+    :current-page="1"
+    @change="onPageChange"
+  />
+</template>
+
+<script setup lang="ts">
+const onPageChange = (paging: { page: number; size: number }) => {
+  console.log("当前页码：", paging.page, "每页条数：", paging.size);
+};
+</script>
+```
+
+### 按需引入
+
+```vue
+<template>
+  <ZmsAdminPaging
+    :total="100"
+    :page-size="15"
+    :current-page="1"
+    @change="onPageChange"
+  />
+</template>
+
+<script setup lang="ts">
+import { ZmsAdminPaging } from "zms-admin-paging";
+
+const onPageChange = (paging: { page: number; size: number }) => {
+  console.log(paging);
+};
+</script>
+```
+
+## Props
+
+| 参数           | 说明                 | 类型                                  | 默认值                              |
+| -------------- | -------------------- | ------------------------------------- | ----------------------------------- |
+| total          | 数据总条数           | number                                | —（必填）                           |
+| pageSize       | 每页条数             | number                                | —（必填）                           |
+| currentPage    | 当前页码             | number                                | —（必填）                           |
+| size           | 组件尺寸             | `"small" \| "default" \| "large"`     | `"default"`                         |
+| layout         | 分页布局             | string                                | `"prev, pager, next,sizes,total"`   |
+| pagerCount     | 页码按钮数量         | number                                | `7`                                 |
+| pageSizes      | 可选每页条数列表     | number[]                              | `[15,25,35,45,55,80,100,150,200]`   |
+| disabled       | 是否禁用             | boolean                               | `false`                             |
+
+## Events
+
+| 事件名 | 说明                   | 回调参数                          |
+| ------ | ---------------------- | --------------------------------- |
+| change | 页码或每页条数变化触发 | `(paging: { page, size }) => void`|
+
+## License
+
+MIT

package/dist/components/AdminPaging/Index.d.ts

@@ -0,0 +1,116 @@
+import { PropType } from 'vue';
+
+/**
+ * 管理后台分页组件
+ *
+ * 基于 Element Plus 的 ElPagination 二次封装：
+ * - 统一「页码变化」与「每页条数变化」为一个 change 事件
+ * - 内置中文「上一页 / 下一页」文案与背景色
+ * - 简化父组件的使用方式，无需分别监听两个 update 事件
+ */
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    /** 数据总条数 */
+    total: {
+        type: NumberConstructor;
+        required: true;
+    };
+    /** 组件尺寸：small / default / large */
+    size: {
+        type: PropType<"small" | "default" | "large">;
+        default: string;
+    };
+    /** 分页布局，由 Element Plus 子组件名以逗号拼接而成 */
+    layout: {
+        type: StringConstructor;
+        default: string;
+    };
+    /** 每页条数 */
+    pageSize: {
+        type: NumberConstructor;
+        required: true;
+    };
+    /** 当前页码 */
+    currentPage: {
+        type: NumberConstructor;
+        required: true;
+    };
+    /** 是否禁用分页交互 */
+    disabled: {
+        type: BooleanConstructor;
+        required: false;
+    };
+    /** 页码按钮的数量（含省略号时显示的按钮数） */
+    pagerCount: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /** 可选择的每页条数列表 */
+    pageSizes: {
+        type: PropType<number[]>;
+        default(): number[];
+    };
+}>, () => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    /**
+     * 页码或每页条数变化时触发
+     * @param paging 变化后的页码与每页条数
+     */
+    change: (paging: {
+        page: number;
+        size: number;
+    }) => true;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    /** 数据总条数 */
+    total: {
+        type: NumberConstructor;
+        required: true;
+    };
+    /** 组件尺寸：small / default / large */
+    size: {
+        type: PropType<"small" | "default" | "large">;
+        default: string;
+    };
+    /** 分页布局，由 Element Plus 子组件名以逗号拼接而成 */
+    layout: {
+        type: StringConstructor;
+        default: string;
+    };
+    /** 每页条数 */
+    pageSize: {
+        type: NumberConstructor;
+        required: true;
+    };
+    /** 当前页码 */
+    currentPage: {
+        type: NumberConstructor;
+        required: true;
+    };
+    /** 是否禁用分页交互 */
+    disabled: {
+        type: BooleanConstructor;
+        required: false;
+    };
+    /** 页码按钮的数量（含省略号时显示的按钮数） */
+    pagerCount: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /** 可选择的每页条数列表 */
+    pageSizes: {
+        type: PropType<number[]>;
+        default(): number[];
+    };
+}>> & Readonly<{
+    onChange?: ((paging: {
+        page: number;
+        size: number;
+    }) => any) | undefined;
+}>, {
+    size: "small" | "default" | "large";
+    layout: string;
+    disabled: boolean;
+    pagerCount: number;
+    pageSizes: number[];
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/components/ZmsAdminPaging/Index.d.ts

@@ -0,0 +1,116 @@
+import { PropType } from 'vue';
+
+/**
+ * 管理后台分页组件
+ *
+ * 基于 Element Plus 的 ElPagination 二次封装：
+ * - 统一「页码变化」与「每页条数变化」为一个 change 事件
+ * - 内置中文「上一页 / 下一页」文案与背景色
+ * - 简化父组件的使用方式，无需分别监听两个 update 事件
+ */
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    /** 数据总条数 */
+    total: {
+        type: NumberConstructor;
+        required: true;
+    };
+    /** 组件尺寸：small / default / large */
+    size: {
+        type: PropType<"small" | "default" | "large">;
+        default: string;
+    };
+    /** 分页布局，由 Element Plus 子组件名以逗号拼接而成 */
+    layout: {
+        type: StringConstructor;
+        default: string;
+    };
+    /** 每页条数 */
+    pageSize: {
+        type: NumberConstructor;
+        required: true;
+    };
+    /** 当前页码 */
+    currentPage: {
+        type: NumberConstructor;
+        required: true;
+    };
+    /** 是否禁用分页交互 */
+    disabled: {
+        type: BooleanConstructor;
+        required: false;
+    };
+    /** 页码按钮的数量（含省略号时显示的按钮数） */
+    pagerCount: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /** 可选择的每页条数列表 */
+    pageSizes: {
+        type: PropType<number[]>;
+        default(): number[];
+    };
+}>, () => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    /**
+     * 页码或每页条数变化时触发
+     * @param paging 变化后的页码与每页条数
+     */
+    change: (paging: {
+        page: number;
+        size: number;
+    }) => true;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    /** 数据总条数 */
+    total: {
+        type: NumberConstructor;
+        required: true;
+    };
+    /** 组件尺寸：small / default / large */
+    size: {
+        type: PropType<"small" | "default" | "large">;
+        default: string;
+    };
+    /** 分页布局，由 Element Plus 子组件名以逗号拼接而成 */
+    layout: {
+        type: StringConstructor;
+        default: string;
+    };
+    /** 每页条数 */
+    pageSize: {
+        type: NumberConstructor;
+        required: true;
+    };
+    /** 当前页码 */
+    currentPage: {
+        type: NumberConstructor;
+        required: true;
+    };
+    /** 是否禁用分页交互 */
+    disabled: {
+        type: BooleanConstructor;
+        required: false;
+    };
+    /** 页码按钮的数量（含省略号时显示的按钮数） */
+    pagerCount: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /** 可选择的每页条数列表 */
+    pageSizes: {
+        type: PropType<number[]>;
+        default(): number[];
+    };
+}>> & Readonly<{
+    onChange?: ((paging: {
+        page: number;
+        size: number;
+    }) => any) | undefined;
+}>, {
+    size: "small" | "default" | "large";
+    layout: string;
+    disabled: boolean;
+    pagerCount: number;
+    pageSizes: number[];
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/index.d.ts

@@ -0,0 +1,105 @@
+/**
+ * 分页组件 ZmsAdminPaging
+ *
+ * 通过 withInstall 附加 install 方法后，既可按需引入、局部注册，
+ * 也可作为 Vue 插件通过 app.use() 全局注册。
+ *
+ * - 按需引入 / 局部注册：
+ *   ```ts
+ *   import { ZmsAdminPaging } from "@zms-code/zms-admin-paging";
+ *   // components: { ZmsAdminPaging }
+ *   ```
+ *
+ * - 全局注册：
+ *   ```ts
+ *   import ZmsAdminPaging from "@zms-code/zms-admin-paging";
+ *   app.use(ZmsAdminPaging);
+ *   ```
+ */
+declare const ZmsAdminPaging: import('./utils/with-install').SFCWithInstall<import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    total: {
+        type: NumberConstructor;
+        required: true;
+    };
+    size: {
+        type: import('vue').PropType<"small" | "default" | "large">;
+        default: string;
+    };
+    layout: {
+        type: StringConstructor;
+        default: string;
+    };
+    pageSize: {
+        type: NumberConstructor;
+        required: true;
+    };
+    currentPage: {
+        type: NumberConstructor;
+        required: true;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        required: false;
+    };
+    pagerCount: {
+        type: NumberConstructor;
+        default: number;
+    };
+    pageSizes: {
+        type: import('vue').PropType<number[]>;
+        default(): number[];
+    };
+}>, () => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    change: (paging: {
+        page: number;
+        size: number;
+    }) => true;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    total: {
+        type: NumberConstructor;
+        required: true;
+    };
+    size: {
+        type: import('vue').PropType<"small" | "default" | "large">;
+        default: string;
+    };
+    layout: {
+        type: StringConstructor;
+        default: string;
+    };
+    pageSize: {
+        type: NumberConstructor;
+        required: true;
+    };
+    currentPage: {
+        type: NumberConstructor;
+        required: true;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        required: false;
+    };
+    pagerCount: {
+        type: NumberConstructor;
+        default: number;
+    };
+    pageSizes: {
+        type: import('vue').PropType<number[]>;
+        default(): number[];
+    };
+}>> & Readonly<{
+    onChange?: ((paging: {
+        page: number;
+        size: number;
+    }) => any) | undefined;
+}>, {
+    size: "small" | "default" | "large";
+    layout: string;
+    disabled: boolean;
+    pagerCount: number;
+    pageSizes: number[];
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>>;
+export { ZmsAdminPaging };
+export default ZmsAdminPaging;

package/dist/utils/with-install.d.ts

@@ -0,0 +1,12 @@
+import { Component, Plugin } from 'vue';
+
+/** 附带 install 方法的组件类型（既是组件，又是 Vue 插件） */
+export type SFCWithInstall<T> = T & Plugin;
+/**
+ * 为组件附加 install 方法，使其既可作为普通组件按需引入、局部注册，
+ * 也可作为 Vue 插件通过 app.use() 全局注册。
+ *
+ * @param component 需要增强的 Vue 组件
+ * @returns 带 install 方法的组件
+ */
+export declare function withInstall<T extends Component>(component: T): SFCWithInstall<T>;

package/dist/zms-admin-paging.js

@@ -0,0 +1,89 @@
+import { defineComponent as n, h as i } from "vue";
+import { ElPagination as u } from "element-plus";
+const g = n({
+  name: "zms-admin-paging",
+  props: {
+    /** 数据总条数 */
+    total: {
+      type: Number,
+      required: !0
+    },
+    /** 组件尺寸：small / default / large */
+    size: {
+      type: String,
+      default: "default"
+    },
+    /** 分页布局，由 Element Plus 子组件名以逗号拼接而成 */
+    layout: {
+      type: String,
+      default: "prev, pager, next,sizes,total"
+    },
+    /** 每页条数 */
+    pageSize: {
+      type: Number,
+      required: !0
+    },
+    /** 当前页码 */
+    currentPage: {
+      type: Number,
+      required: !0
+    },
+    /** 是否禁用分页交互 */
+    disabled: {
+      type: Boolean,
+      required: !1
+    },
+    /** 页码按钮的数量（含省略号时显示的按钮数） */
+    pagerCount: {
+      type: Number,
+      default: 7
+    },
+    /** 可选择的每页条数列表 */
+    pageSizes: {
+      type: Array,
+      default() {
+        return [15, 25, 35, 45, 55, 80, 100, 150, 200];
+      }
+    }
+  },
+  emits: {
+    /**
+     * 页码或每页条数变化时触发
+     * @param paging 变化后的页码与每页条数
+     */
+    change: (e) => !0
+  },
+  setup(e, { attrs: a, emit: t }) {
+    return () => i(u, {
+      class: "zms-admin-paging",
+      total: e.total,
+      currentPage: e.currentPage,
+      layout: e.layout,
+      pageSize: e.pageSize,
+      pageSizes: e.pageSizes,
+      pagerCount: e.pagerCount,
+      disabled: e.disabled,
+      nextText: "下一页",
+      prevText: "上一页",
+      background: !0,
+      size: e.size,
+      // 透透父组件传入的额外属性（如 style 等）
+      ...a,
+      "onUpdate:currentPage": (r) => t("change", { page: r, size: e.pageSize }),
+      "onUpdate:pageSize": (r) => {
+        t("change", { page: e.currentPage, size: r });
+      }
+    });
+  }
+});
+function l(e) {
+  return e.install = (a) => {
+    const t = e.name;
+    a.component(t, e);
+  }, e;
+}
+const m = l(g);
+export {
+  m as ZmsAdminPaging,
+  m as default
+};

package/dist/zms-admin-paging.umd.cjs

@@ -0,0 +1 @@
+(function(t,n){typeof exports=="object"&&typeof module<"u"?n(exports,require("vue"),require("element-plus")):typeof define=="function"&&define.amd?define(["exports","vue","element-plus"],n):(t=typeof globalThis<"u"?globalThis:t||self,n(t.ZmsAdminPaging={},t.Vue,t.ElementPlus))})(this,function(t,n,g){"use strict";const d=n.defineComponent({name:"zms-admin-paging",props:{total:{type:Number,required:!0},size:{type:String,default:"default"},layout:{type:String,default:"prev, pager, next,sizes,total"},pageSize:{type:Number,required:!0},currentPage:{type:Number,required:!0},disabled:{type:Boolean,required:!1},pagerCount:{type:Number,default:7},pageSizes:{type:Array,default(){return[15,25,35,45,55,80,100,150,200]}}},emits:{change:e=>!0},setup(e,{attrs:i,emit:a}){return()=>n.h(g.ElPagination,{class:"zms-admin-paging",total:e.total,currentPage:e.currentPage,layout:e.layout,pageSize:e.pageSize,pageSizes:e.pageSizes,pagerCount:e.pagerCount,disabled:e.disabled,nextText:"下一页",prevText:"上一页",background:!0,size:e.size,...i,"onUpdate:currentPage":u=>a("change",{page:u,size:e.pageSize}),"onUpdate:pageSize":u=>{a("change",{page:e.currentPage,size:u})}})}});function l(e){return e.install=i=>{const a=e.name;i.component(a,e)},e}const r=l(d);t.ZmsAdminPaging=r,t.default=r,Object.defineProperties(t,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "zms-admin-paging",
+  "version": "1.0.0",
+  "description": "基于 Element Plus 封装的管理后台分页组件",
+  "type": "module",
+  "keywords": [
+    "vue",
+    "vue3",
+    "element-plus",
+    "pagination",
+    "分页",
+    "zms"
+  ],
+  "author": "zms-code",
+  "license": "MIT",
+  "files": [
+    "dist"
+  ],
+  "main": "./dist/zms-admin-paging.umd.cjs",
+  "module": "./dist/zms-admin-paging.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/zms-admin-paging.js",
+      "require": "./dist/zms-admin-paging.umd.cjs"
+    }
+  },
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "scripts": {
+    "build": "vite build",
+    "typecheck": "vue-tsc --noEmit"
+  },
+  "peerDependencies": {
+    "element-plus": "^2.4.0",
+    "vue": "^3.3.0"
+  },
+  "devDependencies": {
+    "@types/node": "^26.1.1",
+    "@vitejs/plugin-vue": "^5.0.5",
+    "element-plus": "^2.7.0",
+    "typescript": "^5.4.0",
+    "vite": "^5.2.0",
+    "vite-plugin-dts": "^3.9.1",
+    "vue": "^3.4.0",
+    "vue-tsc": "^2.0.0"
+  }
+}