好用的内置组件

11/7/2022

# 一、背景与问题

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

# 二、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();
    }
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# 三、枚举组件

枚举组件支持:

  • 下拉框 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';
...
1
2
3
4
5
6
7

# 四、字典组件

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

# 五、文件组件

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

# 联系我们

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

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

告白气球 (钢琴版)
JESSE T