RuoYi Vue3 组件库

基于 Vue3 + Element Plus 的企业级组件库，参照若依（RuoYi）Vue3 版本的组件设计。

特性

• 🎨 若依风格设计 - 保持与若依管理系统一致的UI风格
• 📦 Vue3 + TypeScript - 完全使用 Vue3 Composition API 和 TypeScript 开发
• ⚡ Element Plus 集成 - 基于 Element Plus 组件库进行二次封装
• 🛠 丰富的组件 - 提供企业级开发常用的各种组件
• 📱 响应式设计 - 支持移动端适配

安装

npm install yt-vue3-components
# 或
yarn add yt-vue3-components
# 或
pnpm add yt-vue3-components

依赖

本组件库依赖于以下库，请确保项目中已安装：

npm install vue@^3.3.0 element-plus@^2.4.0 @element-plus/icons-vue@^2.1.0

快速开始

完整引入

import { createApp } from 'vue'
import App from './App.vue'
import RuoYiComponents from 'yt-vue3-components'
import 'yt-vue3-components/dist/style.css'

const app = createApp(App)
app.use(RuoYiComponents)
app.mount('#app')

按需引入

<template>
  <dict-tag :options="dictOptions" :value="status" />
</template>

<script setup lang="ts">
import { DictTag } from 'yt-vue3-components'
import 'yt-vue3-components/dist/style.css'

const status = '0'
const dictOptions = [
  { label: '正常', value: '0', elTagType: 'success' },
  { label: '停用', value: '1', elTagType: 'danger' }
]
</script>

组件列表

基础组件

| 组件名 | 说明 | 对应若依组件 | |--------|------|-------------| | DictTag | 字典标签 | ✓ | | Pagination | 分页组件 | ✓ | | RightToolbar | 右侧工具栏 | ✓ | | SvgIcon | SVG图标 | ✓ |

表单组件

| 组件名 | 说明 | 对应若依组件 | |--------|------|-------------| | Editor | 富文本编辑器 | ✓ | | FileUpload | 文件上传 | ✓ | | ImageUpload | 图片上传 | ✓ | | ImagePreview | 图片预览 | ✓ | | TreeSelect | 树形选择器 | ✓ | | Crontab | Cron表达式生成器 | ✓ |

布局组件

| 组件名 | 说明 | 对应若依组件 | |--------|------|-------------| | TopNav | 顶部导航 | ✓ | | TagsView | 标签视图 | ✓ | | Breadcrumb | 面包屑 | ✓ | | Hamburger | 侧边栏折叠按钮 | ✓ | | Screenfull | 全屏按钮 | ✓ | | Search | 菜单搜索 | ✓ |

其他组件

| 组件名 | 说明 | 对应若依组件 | |--------|------|-------------| | RuoyiGit | 跳转Gitee | ✓ | | RuoyiDoc | 跳转文档 | ✓ |

指令

v-permission 权限指令

<template>
  <!-- 功能权限 -->
  <el-button v-permission="['system:user:add']">新增用户</el-button>

  <!-- 角色权限 -->
  <el-button v-permission:role="['admin']">管理员功能</el-button>
</template>

工具函数

import { useDict, download, parseTime, resetForm, addDateRange, selectDictLabel, handleTree } from 'yt-vue3-components'

// 获取字典数据
const { sys_normal_disable } = useDict('sys_normal_disable')

// 下载文件
download('/common/download', { fileName: 'test.xlsx' }, 'test.xlsx')

// 日期格式化
const formattedTime = parseTime(new Date(), '{y}-{m}-{d}')

// 重置表单
resetForm(formRef)

// 添加日期范围
const queryParams = addDateRange({ pageNum: 1, pageSize: 10 }, ['2024-01-01', '2024-01-31'])

// 回显数据字典
const label = selectDictLabel(dictOptions, '0')

// 构造树形结构
const treeData = handleTree(data, 'id', 'parentId', 'children', 0)

开发

# 克隆项目
git clone https://github.com/yangzongzhuan/RuoYi-Vue3.git

# 安装依赖
npm install

# 启动开发服务器
npm run dev

# 构建组件库
npm run build

浏览器支持

现代浏览器和 Internet Explorer 10+

| IE / Edge | Firefox | Chrome | Safari | | --------- | --------- | --------- | --------- | | IE10, IE11, Edge| last 2 versions| last 2 versions| last 2 versions |

贡献

欢迎提交 Issue 和 Pull Request。

许可

MIT License

Copyright (c) 2019-present RuoYi