g-ui-web

快速上手

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 移除全部临时缓存