好用的内置组件

一、背景与问题

在开发的过程中我们经常会复用一些组件，这些组件没有业务属性，但是很常用。

二、Loading组件

内置SmartLoading组件，代码位于src/framework/smart-loading

• 此Loading基于 pinia状态管理，全局唯一
• 使用时候直接import 引入
• 开启： SmartLoadin.show()
• 关闭： SmartLoadin.hide()

举例：

  import { SmartLoading } from '/@/components/framework/smart-loading';

  async function getUserTableColumns(tableId, columns) {
    // 开始loading
    SmartLoading.show();
    let userTableColumnArray = [];
    try {
      let res = await tableColumnApi.getColumns(tableId);
    } catch (e) {
      smartSentry.captureError(e);
    } finally {
      // 隐藏loading
      SmartLoading.hide();
    }
  }

三、枚举组件

枚举组件支持:

• 下拉框 smart-enum-select
• 单选框 smart-enum-radio
• 复选框 smart-enum-checkbox

具体代码，请见src/components/framework;

使用举例：

<template 中>
<SmartEnumSelect enum-name="GOODS_STATUS_ENUM" v-model:value="queryForm.goodsStatus" width="160px" />
....
<script 中>
import { GOODS_STATUS_ENUM } from '/@/constants/business/erp/goods-const';
import SmartEnumSelect from '/@/components/framework/smart-enum-select/index.vue';
...

四、字典组件

dict-select 字典下拉框。 代码在 src/components/support/dict-select;

五、文件组件

• 文件预览 file-priview
• 文件预览弹窗 file-priview-modal
• 文件上传 file-upload

---

联系我们

1024创新实验室-主任：卓大 (opens new window)，混迹于各个技术圈，研究过计算机，熟悉点 java，略懂点前端。
1024创新实验室（河南·洛阳） (opens new window) 致力于成为中原领先、国内一流的技术团队，以技术创新为驱动，合作各类项目（软件外包、技术顾问、培训等等）。

加 主任 “卓大” 微信 拉你入群，一起学习	关注 “小镇程序员” 分享代码与生活、技术与赚钱	请 “1024创新实验室” 喝咖啡 支持我们的开源与分享