afn-basic-components

一个基于 Vue 2 和 Element UI 的基础组件库，包含常用的公共组件和样式。

📦 安装

npm install afn-basic-components

🚀 使用

完整引入

在 main.js 中引入：

import Vue from "vue";
import AfnBasicComponents from "afn-basic-components";
import "afn-basic-components/styles/index.scss";

Vue.use(AfnBasicComponents);

按需引入

import { GlobalDrawer, MessagePopUp, ProTable } from "afn-basic-components";
import "afn-basic-components/styles/index.scss";

export default {
  components: {
    GlobalDrawer,
    MessagePopUp,
    ProTable,
  },
};

📚 组件列表

GlobalDrawer - 全局抽屉

一个功能强大的抽屉组件，支持标题、内容、宽度、方向等配置。

Props:

• visible (Boolean) - 是否显示抽屉，默认 false
• title (String) - 抽屉标题
• width (String) - 抽屉宽度，默认 '50%'
• direction (String) - 抽屉方向，可选 'rtl' | 'ltr' | 'ttb' | 'btt'，默认 'rtl'
• beforeClose (Function) - 关闭前的回调函数

Events:

• close - 抽屉关闭时触发
• open - 抽屉打开时触发

示例:

<global-drawer
  :visible.sync="drawerVisible"
  title="标题"
  width="60%"
  @close="handleClose"
>
  <div>抽屉内容</div>
</global-drawer>

MessagePopUp - 消息弹窗

一个美观的消息提示组件，支持多种类型和配置。

Props:

• visible (Boolean) - 是否显示弹窗，默认 false
• type (String) - 消息类型，可选 'success' | 'warning' | 'info' | 'error'，默认 'info'
• title (String) - 弹窗标题
• message (String) - 弹窗消息内容
• duration (Number) - 显示时长（毫秒），0 表示不自动关闭，默认 3000
• showClose (Boolean) - 是否显示关闭按钮，默认 true

Events:

• close - 弹窗关闭时触发

示例:

<message-pop-up
  :visible.sync="messageVisible"
  type="success"
  title="成功"
  message="操作成功！"
  @close="handleClose"
/>

ProTable - 专业表格

一个功能强大的表格组件，支持搜索、分页、排序等功能。

Props:

• tableData (Array) - 表格数据
• columns (Array) - 表格列配置
• loading (Boolean) - 是否加载中，默认 false
• pagination (Object) - 分页配置
• showSearch (Boolean) - 是否显示搜索区域，默认 true
• showPagination (Boolean) - 是否显示分页，默认 true

Events:

• search - 搜索时触发
• reset - 重置时触发
• page-change - 页码变化时触发
• size-change - 每页条数变化时触发

示例:

<pro-table
  :table-data="tableData"
  :columns="columns"
  :pagination="pagination"
  :loading="loading"
  @search="handleSearch"
  @reset="handleReset"
  @page-change="handlePageChange"
  @size-change="handleSizeChange"
/>

🎨 样式

组件库包含完整的样式文件，支持：

• variables.scss - 样式变量定义
• btn.scss - 按钮样式
• mixin.scss - SCSS 混合宏
• transition.scss - 过渡动画
• element-ui.scss - Element UI 样式覆盖
• sidebar.scss - 侧边栏样式
• ruoyi.scss - 通用样式

🔧 开发

# 安装依赖
npm install

# 本地开发
npm run serve

# 构建
npm run build

📝 依赖

• Vue ^2.6.0
• Element UI ^2.15.0

📄 License

MIT

🤝 贡献

欢迎提交 Issue 和 Pull Request！

💬 联系方式

如有问题，请提交 Issue。