vue3-ipsa-components

# Vue3 Ant Design Component Library 一个基于Vue3和Ant Design Vue的组件库，包含自定义组件，可以打包发布到npm。 ## 功能特性 - 🚀 基于Vue3 Composition API - 🎨 集成Ant Design Vue组件库 - 🧩 包含自定义组件（MyButton、MyCard、IpsaLogo、IpsaDivider、IpsaBadge、IpsaIcon） - 📦 支持npm打包发布 - 🔧 完整的开发环境配置 - 📝 ESLint + Prettier代码规范 ## 安装 ```bash npm install vue3-antd-component ``` ## 使用方法 ### 全局引入 ```javascript import { createApp } from 'vue' import Vue3AntdComponent from 'vue3-antd-component' import 'ant-design-vue/dist/reset.css' const app = createApp(App) app.use(Vue3AntdComponent) app.mount('#app') ``` ### 按需引入 ```javascript import { Button, Input, Form, MyButton, MyCard, IpsaLogo, IpsaDivider, IpsaBadge, IpsaIcon } from 'vue3-antd-component' ``` ## 自定义组件 ### IpsaLogo Logo组件一个灵活的Logo组件，支持六种不同的图片类型和自定义尺寸。 ```vue <template>  <IpsaLogo type="default" :hasBackground="true" :size="100" /> <IpsaLogo type="text" :hasBackground="true" :size="120" /> <IpsaLogo type="all" :hasBackground="true" :size="150" />  <IpsaLogo type="default" :hasBackground="false" :size="100" /> <IpsaLogo type="text" :hasBackground="false" :size="120" /> <IpsaLogo type="all" :hasBackground="false" :size="150" /> </template> ``` #### Props | 参数 | 说明 | 类型 | 可选值 | 默认值 | |------|------|------|--------|--------| | type | Logo类型 | string | default / text / all | default | | hasBackground | 是否有背景色 | boolean | — | true | | size | Logo尺寸（像素） | number/string | — | 100 | #### 图片类型说明 - **default**: 默认Logo样式 - **text**: 包含文字的Logo样式 - **all**: 完整的Logo样式 - **hasBackground**: - `true`: 使用有红色背景(#D71921)的图片 (bj-xxx.svg) - `false`: 使用透明背景的图片 (no-bj-xxx.svg) ### MyButton 按钮组件一个功能丰富的自定义按钮组件，支持多种类型、尺寸和状态。 ```vue <template>  <my-button type="primary" @click="handleClick">主要按钮</my-button> <my-button type="success">成功按钮</my-button> <my-button type="warning">警告按钮</my-button> <my-button type="danger">危险按钮</my-button> <my-button type="default">默认按钮</my-button>  <my-button size="small">小按钮</my-button> <my-button size="medium">中按钮</my-button> <my-button size="large">大按钮</my-button>  <my-button round>圆角按钮</my-button> <my-button disabled>禁用按钮</my-button> </template> <script> export default { methods: { handleClick() { console.log('按钮被点击了！') } } } </script> ``` #### Props | 参数 | 说明 | 类型 | 可选值 | 默认值 | |------|------|------|--------|--------| | type | 按钮类型 | string | primary / success / warning / danger / default | primary | | size | 按钮尺寸 | string | small / medium / large | medium | | text | 按钮文本 | string | — | 按钮 | | disabled | 是否禁用 | boolean | — | false | | round | 是否圆角 | boolean | — | false | #### Events | 事件名 | 说明 | 回调参数 | |--------|------|----------| | click | 点击事件 | event | ### IpsaDivider 分割线组件一个灵活的分割线组件，支持自定义颜色、宽度和边距。 ```vue <template>  <p>这是一段文字</p> <IpsaDivider /> <p>这是另一段文字</p>  <IpsaDivider color="#1890ff" width="50%" />  <IpsaDivider color="red" :width="200" margin-top="20px" :margin-bottom="20" /> </template> ``` #### Props | 参数 | 说明 | 类型 | 默认值 | |------|------|------|--------| | color | 分割线颜色 | string | #e8e8e8 | | width | 分割线宽度 | string \| number | 100% | | margin-top | 上边距 | string \| number | 16px | | margin-bottom | 下边距 | string \| number | 16px | ### IpsaBadge 徽标组件一个功能丰富的徽标组件，支持数字、文字、状态等多种类型。 ```vue <template>  <IpsaBadge :count="5"> <div class="badge-content">消息</div> </IpsaBadge>  <IpsaBadge text="NEW"> <div class="badge-content">新功能</div> </IpsaBadge>  <IpsaBadge status="success"> <div class="badge-content">成功</div> </IpsaBadge>  <IpsaBadge :count="5" :animated="true"> <div class="badge-content">动画</div> </IpsaBadge> </template> ``` #### Props | 参数 | 说明 | 类型 | 默认值 | |------|------|------|--------| | count | 数字徽标 | number | - | | text | 文字徽标 | string | - | | status | 状态徽标 | string | - | | animated | 是否启用动画 | boolean | false | | color | 自定义颜色 | string | - | | offset | 位置偏移 | array | - | #### Status 可选值 - `success` - 成功状态 - `processing` - 处理中状态 - `default` - 默认状态 - `error` - 错误状态 - `warning` - 警告状态 ### IpsaIcon 图标组件基于 iconfont 的图标组件，支持所有 IPSA 规范图标库中的图标。 ```vue <template>  <IpsaIcon name="searchsousuo" />  <IpsaIcon name="searchsousuo" :size="24" color="#1890ff" />  <IpsaIcon name="searchsousuo" :clickable="true" @click="handleClick" />  <IpsaIcon name="refreshshuaxin" :rotate="45" /> </template> ``` #### Props | 参数 | 说明 | 类型 | 默认值 | |------|------|------|--------| | name | 图标名称（必填） | string | - | | size | 图标大小 | string \| number | 16 | | color | 图标颜色 | string | 'currentColor' | | clickable | 是否可点击 | boolean | false | | rotate | 旋转角度 | string \| number | 0 | | disabled | 是否禁用 | boolean | false | | customStyle | 自定义样式 | object | {} | #### Events | 事件名 | 说明 | 回调参数 | |--------|------|----------| | click | 点击图标时触发 | event | | mouseenter | 鼠标进入时触发 | event | | mouseleave | 鼠标离开时触发 | event | ### MyCard 卡片组件一个灵活的卡片组件，支持自定义标题、内容和操作区域。 ```vue <template>  <my-card title="卡片标题"> <p>这是卡片的内容区域</p> <template #footer> <a-button size="small">操作1</a-button> <a-button size="small" type="primary">操作2</a-button> </template> </my-card>  <my-card title="悬停阴影" shadow="hover"> <p>悬停时显示阴影</p> </my-card> <my-card title="无边框" :bordered="false" shadow="never"> <p>没有边框和阴影</p> </my-card> </template> ``` #### Props | 参数 | 说明 | 类型 | 可选值 | 默认值 | |------|------|------|--------|--------| | title | 卡片标题 | string | — | — | | shadow | 阴影效果 | string | always / hover / never | always | | bordered | 是否有边框 | boolean | — | true | | padding | 内边距 | string | — | 16px | #### Slots | 插槽名 | 说明 | |--------|------| | default | 卡片内容 | | header | 自定义头部 | | footer | 自定义底部 | ## 开发 ```bash # 安装依赖 npm install # 启动开发服务器 npm run dev # 构建库 npm run build:lib # 代码检查 npm run lint # 代码格式化 npm run format ``` ## 发布到npm 1. 更新package.json中的版本号 2. 构建库：`npm run build:lib` 3. 登录npm：`npm login` 4. 发布：`npm publish` ## 项目结构 ``` ├── src/ │ ├── components/ │ │ ├── MyButton.vue # 自定义按钮组件 │ │ ├── MyCard.vue # 自定义卡片组件 │ │ ├── IpsaLogo.vue # Logo组件 │ │ ├── IpsaDivider.vue # 分割线组件 │ │ ├── IpsaBadge.vue # 徽标组件 │ │ └── IpsaIcon.vue # 图标组件 │ ├── main.js # 开发环境入口 │ ├── index.js # 库打包入口 │ └── App.vue # 主应用组件 ├── assets/ │ └── font/ # 图标字体文件 ├── docs/ # 组件文档 ├── vite.config.js # 开发环境配置 ├── vite.lib.config.js # 库打包配置 ├── package.json # 项目配置 └── README.md # 项目文档 ``` ## 许可证 MIT