g-ui-plus 基于vue3 + vite5 + typeScript5 + Element-plus + Echarts5 封装的标准UI组件。
yarn add g-ui-plus -S
或者
npm install g-ui-plus -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 GuiPlus from "g-ui-plus"
import "g-ui-plus/lib/style.css"
const app = createApp(App)
// 注册所有图标
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
app.component(key, component)
}
// 注册ElementPlus
app.use(ElementPlus)
// 注册GuiPlus
app.use(GuiPlus)
app.mount("#app")
// 在main.ts中按下引入
import 'g-ui-plus/lib/style.css'
// 单个.vue文件引入
<script setup lang="ts">
import {GButton} from "g-ui-plus"
</script>
组件名 |
说明 |
GChart |
基础图表 |
GBar |
柱状图 |
GLine |
折线图 |
GFoldingPillar |
折柱图 |
GPie |
饼图 |
GRadar |
雷达图 |
GFunnel |
漏斗图 |
GMap |
地图 |
组件名 |
说明 |
GText |
文字(指标) |
GRingText |
文字(环图/进度条) |
GBox |
内容块 |
GRanking |
排行榜 |
GReserve |
预实对比(+达成率) |
GMilepost |
项目/分期计划/里程碑 |
GNodeachievement |
节点达成 |
GGridTable |
常用报表 |
组件名 |
说明 |
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 移除全部临时缓存 |