类库实例

类库实例

• 数据表格 src/config/ag.js
• 网络请求 src/config/axios.jsaxios 网络请求库，集成请求遮罩 layer，请求自动携带 cookie 和 token

  //请求方法
  proxy.$axios.get(url[, config]);
  proxy.$axios.delete(url[, config]);
  proxy.$axios.head(url[, config]);
  proxy.$axios.post(url[, data[, config]]);
  proxy.$axios.put(url[, data[, config]]);
  proxy.$axios.patch(url[, data[, config]]);
  
• 事件总线 src/config/bus.js基于 mitt 的全局事件总线，支持跨页面事件订阅与触发

  //事件订阅
  proxy.$bus.on('event', () => {});
  //事件触发
  proxy.$bus.emit('event', parm);
  
• 自定义指令 src/config/directive.js
  

  名称	指令	描述
  分页自适应	v-pagination	适用于 el-pagination 在页面尺寸改变情况下节点的显示隐藏
  表单多列自适应	v-form-column	适用于 el-form 表单 el-form-item 行内显示数量

• 图标实例 src/config/icon.js基于 element-plus 的全局 vue 图标组件 参考链接open in new window

  <!-- 加号图标 -->
  <el-icon>
      <Plus/>
  </el-icon>
  <!-- 减号图标 -->
  <el-icon>
      <Minus/>
  </el-icon>
  
• 图标实例 src/config/icons.js基于 iconPark 的全局 vue 图标组件 参考链接open in new window

  <!-- 配置图标 -->
  <icon-park type="config" />
  <!-- 书签图标 -->
  <icon-park type="bookmark" />
  
• 应用实例 src/config/ins.js适用于全局场景下的应用实例化获取

  import ins from '@/config/ins';
  let proxy = ins.app.config.globalProperties;
  
• 遮罩层 src/config/layer.js基于 el-loading 的指令调用

  //显示遮罩
  proxy.$layer.show();
  //隐藏遮罩
  proxy.$layer.hide();
  
• 时间实例 src/config/moment.js基于 moment 的全局时间实例

  //获取日期
  proxy.$moment().format('dddd');
  proxy.$moment().format('MMMM Do YYYY, h:mm:ss a');
  proxy.$moment().format('dddd');
  proxy.$moment().format('MMM Do YY');
  proxy.$moment().format('YYYY [escaped] YYYY');
  proxy.$moment().format();
  
• 版本依赖 src/config/packages.js获取 package 依赖内容

  proxy.$packages;
  
• 报表助手 src/config/report.js基于 report 的实例化与封装 参考链接open in new window

  //报表助手
  proxy.$report.helper.fun();
  //打印报表
  proxy.$report.scene.print(parm);
  //预览报表
  proxy.$report.scene.view(parm);
  //设计报表
  proxy.$report.scene.design(parm);
  //输出报表
  proxy.$report.scene.document(parm);
  
• 页面路由 src/config/router.js基于 vue-router 的页面路由，支持动态加载与懒加载
• 状态管理 src/config/store.js基于 pinia 的状态存储，通过 pinia-plugin-persistedstate 实现数据持久化

  //获取实例
  let store = proxy.$pinia.state.value.store;
  //深色模式
  store.theme.dark = true;
  
• 样式引用 src/config/style.js
• 接口配置 src/config/url.js

  //获取
  let api = proxy.$api;
  
• 接口配置 src/config/vnode.js基于 vnode 的动态 dialog、drawer 渲染，支持 slot 和组件传递

  let vnode = proxy.$vnode;
  //渲染对话框
  vnode.dialog().render();
  //渲染抽屉
  vnode.drawer().render();
  //节点卸载
  vnode.unrender();
  //节点关闭
  vnode.close();
  
• 页面水印 src/config/watermark.js基于 watermark 封装的全局页面水印

  //渲染水印
  proxy.$watermark.render(parm);
  //删除水印
  proxy.$watermark.destroy();
  
• 自动加载 src/plugins/load.js组件自动加载，实现无需 import 引入直接使用
• pwa 实例 src/plugins/pwa.js基于 vite-plugin-pwa 实现的 pwa 实现
• 组件名称 src/plugins/script.js扩展 vue 组合模式下简略组件命名

  <script setup name="Console">
      //...
  </script>