快速上手

g-ui-web 基于vue3 + vite5 + typeScript5 + Element-plus + Echarts5 封装的标准UI组件。

安装

yarn add g-ui-web -S
或者
npm install g-ui-web -S

全局使用

前提条件：使用项目必须全局注册 Element-plus 组件库

// main.ts
import { createApp } from "vue"
import App from "./App.vue"
import ElementPlus from "element-plus"
import "element-plus/dist/index.css"
// element-plus图标
import * as ElementPlusIconsVue from "@element-plus/icons-vue"
import GuiWeb from "g-ui-web"
import "g-ui-web/lib/style.css"
const app = createApp(App)
// 注册所有图标
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}
// 注册ElementPlus
app.use(ElementPlus)
// 注册GuiWeb
app.use(GuiWeb)
app.mount("#app")

按需引入

// 在main.ts中按下引入
import 'g-ui-web/lib/style.css'
// 单个.vue文件引入
<script setup lang="ts">
  import {GButton} from "g-ui-web"
</script>

组件清单

图表类

| 组件名 | 说明 | | -------------- | -------- | | GChart | 基础图表 | | GBar | 柱状图 | | GLine | 折线图 | | GFoldingPillar | 折柱图 | | GPie | 饼图 | | GRadar | 雷达图 | | GFunnel | 漏斗图 | | GMap | 地图 |

baiduMap类

| 组件名 | 说明 | | -------- | ------ | | GHeatMap | 热力图 |

非标类

| 组件名 | 说明 | | ---------------- | -------------------- | | GText | 文字（指标） | | GRingText | 文字（环图/进度条） | | GBox | 内容块 | | GRanking | 排行榜 | | GReserve | 预实对比（+达成率） | | GMilepost | 项目/分期计划/里程碑 | | GNodeachievement | 节点达成 | | GGridTable | 常用报表 |

标准UI类（Element-plus）

| 组件名 | 说明 | | ----------- | ---------- | | GRow | 布局 | | GButton | 按钮 | | GInput | 输入框 | | GRadio | 单选框 | | GCheckbox | 多选框 | | GDatePicker | 日期选择器 | | GForm | 表单 | | GSwitch | 开关 | | GUpload | 上传 | | GCard | 卡片 | | GCarousel | 跑马灯 | | GSelect | 选择器 | | GCascader | 级联选择器 | | GPagination | 分页 | | GProgress | 进度条 | | GTable | 表格 | | GTag | 标签 | | GTree | 树形控件 | | GTreeSelect | 树形选择 | | GTabs | 标签页 | | GDialog | 对话框 | | GTooltip | 文字提示 | | GWatermark | 水印 |

函数清单

| 函数名 | 说明 | 参数 | | -------- | ------------------------------------ | --------------------------------------------------------------------------------------- | | setTheme | 设置主题 | theme主题名称，isDark是否暗黑主题 | | Local | window.localStorage 浏览器永久缓存 | set 设置永久缓存，get 获取永久缓存，remove 移除永久缓存，clear 移除全部永久缓存 | | Session | window.sessionStorage 浏览器临时缓存 | set 设置临时缓存，get 获取临时缓存，remove 移除临时缓存，clear 移除全部临时缓存 |