ivy-ui-plus

ivy-ui-plus

基于 ant-design-vue 封装的 Vue3 业务组件库。

• 📦 按需引入：import IvyModal from 'ivy-ui-plus/ivyModal'，组件自身的样式会自动随 JS 加载，无需额外引入 css；也可从根包具名导入，依赖打包器摇树。
• 🧩 完整引入：app.use(ivyUiPlus) 一次性注册全部组件。
• 🪶 零打包负担：vue / ant-design-vue 均作为 peer 依赖，不打包进产物，由使用方项目提供。
• 📝 全部组件均带完整 TypeScript 类型（Props / v-model / 插槽）。

组件列表

安装

pnpm add ivy-ui-plus
# 或 npm install ivy-ui-plus

请确保项目已安装并同样引入 ant-design-vue（本库组件全部基于它构建）：

pnpm add ant-design-vue

快速开始

ant-design-vue 样式（使用方自行引入）

与日常使用 ant-design-vue 的写法完全一致，二选一：

方式一：完整引入 ant-design-vue

// main.ts
import { createApp } from "vue";
import Antd from "ant-design-vue";
import "ant-design-vue/dist/reset.css";

app.use(Antd);

方式二：按需引入 ant-design-vue

import { Modal, Button } from "ant-design-vue";
// 配合 unplugin-vue-components 按需引入样式

完整引入 ivy-ui-plus

// main.ts
import { createApp } from "vue";
import Antd from "ant-design-vue";
import "ant-design-vue/dist/reset.css";
import ivyUiPlus from "ivy-ui-plus";
import App from "./App.vue";

const app = createApp(App);
app.use(Antd);
app.use(ivyUiPlus); // 注册全部组件
app.mount("#app");

按需引入

方式一：子路径导入（推荐）

<script setup lang="ts">
import { ref } from "vue";
import IvyModal from "ivy-ui-plus/ivyModal";

const visible = ref(false);
</script>

<template>
  <IvyModal v-model:visible="visible" title="示例" @ok="visible = false">
    <p>弹窗内容</p>
  </IvyModal>
</template>

方式二：根包具名导入

<script setup lang="ts">
import { IvyModal } from "ivy-ui-plus";
</script>

根包具名导入依赖打包器的 tree-shaking，只会打包实际用到的组件；产物全量代码已按组件拆分。

IvyModal 组件 API

事件：@ok（确定按钮点击）、@cancel（取消按钮点击）。

自定义 buttons 配置（追加在取消/确定按钮之后）：

const buttons = [
  {
    name: "重置",
    type: "primary", // 透传 antd Button 的 type
    icon: HomeOutlined, // 可选，传入图标组件
    hide: false, // 布尔或函数，控制显隐
    disabled: false, // 布尔或函数，控制禁用
    callback: () => console.log("点击了重置"), // 点击回调
  },
];

开发调试

pnpm install
pnpm dev      # 启动测试页（src/App.vue 演示 IvyModal）
pnpm build    # vue-tsc 类型检查 + 构建产物到 dist/
pnpm preview  # 预览 build 产物

构建产物结构（dist/）：

dist/
├── index.es.js                     # 完整引入入口（install + 具名导出）
├── index.d.ts
├── ivyModal.es.js                  # 各组件按需引入入口
├── ivyModal.css                    # 组件样式（构建时注入进对应 JS，无需手动引）
└── components/*/index.d.ts         # 各组件类型声明

致谢

Licensed under the MIT License。