【Ease UI】2026-04-03组件更新:新增组件xly-file-preview文件预览组件
🚀 即插即用的 Vue 3 业务组件库，让中后台开发回归简单
Ease UI 是一套为「快速复制」而生的 Vue 3 业务组件库。每个组件都是独立的 .vue 单文件，不依赖任何外部样式或工具函数，直接复制到你的项目即可使用。它仅依赖 Element Plus，却解决了中后台开发中表格选择混乱、搜索表单代码臃肿、日期范围绑定繁琐等真实痛点，让组件复用像复制代码一样简单。
✨ 新增
- xly-file-preview（文件预览组件）
src/components/xly-file-preview/index.vue- 基于
@vue-office系列组件（docx/excel/pdf），高还原度渲染 Office 文档 - 支持四种数据格式输入：逗号拼接字符串、URL字符串数组、对象数组（默认字段 name/url/size）、自定义字段名映射（
field-namesprop） - 内置六种文件格式预览：PDF（@vue-office/pdf Canvas）、Word（@vue-office/docx）、Excel（@vue-office/excel）、PPT（pptx-preview 幻灯片预览）、图片（img原生）、视频（video原生）
- 文件渲染失败时优雅降级，显示错误信息和下载按钮
- 弹窗支持多文件切换（上一个/下一个）、下载、新标签打开、ESC关闭
size字段单位为 KB，组件自动格式化为可读单位（B / KB / MB / GB）- 文件列表自动识别文件类型显示对应彩色图标
- 基于
💡 项目初衷
在中后台系统开发中，我们频繁遇到这些问题：
| 痛点 | 现状 |
|---|---|
| 🔧组件库太重 | 引入一套组件库，需要学习整套 API、主题配置、构建配置，成本太高 |
| 📋复制粘贴难 | 想从项目 A 复用一个组件到项目 B，发现依赖了各种公共样式、工具函数，拆不出来 |
| 🧩Element Plus 不够用 | 基础组件有了，但业务组件（如带展开/收起的搜索表单、智能表格）还得自己写 |
| 🔄重复造轮子 | 每个项目都要重新实现表格选择、日期范围绑定、表单布局… |
于是，Ease UI 诞生了。
打造一套极致轻量、即拷即用的业务组件，让开发者可以像复制一段代码一样简单地复用组件。
✨ 核心优势
🎯 单文件组件，即拷即用
每个组件都是完全独立的.vue单文件，包含：
- ✅ 完整的
<template>模板 - ✅ 独立的
<script setup>逻辑 - ✅ 自包含的
<style scoped>样式
无需任何配置，直接复制.vue文件到你的项目即可使用！
# 只需要这一个文件src/components/xly-button/index.vue# 不需要：❌ 额外的 CSS 文件 ❌ 公共样式依赖 ❌ 复杂的构建配置 ❌ 主题变量文件🔌 仅依赖 Element Plus
本组件库仅依赖 Element Plus（及其图标库），不引入其他 UI 组件库：
{"dependencies":{"element-plus":"^2.13.6","@element-plus/icons-vue":"^2.3.2"}}依赖说明：
- 🎨Element Plus- 仅使用其图标组件（
@element-plus/icons-vue） - 🚫无其他 UI 库- 不依赖 Ant Design Vue、Naive UI、Vuetify 等
- 🚫无样式库- 不依赖 Tailwind CSS、UnoCSS 等原子类框架
- 📝纯 Vue 3 + SCSS- 所有组件样式独立编写
这意味着：
- 如果你的项目已经使用 Element Plus，可以无缝集成
- 如果你的项目没有 Element Plus，只需安装它即可
- 不会有多个 UI 库的样式冲突问题
如果你觉得这个项目还不错或对你有帮助，欢迎到 Gitee 或 GitHub 上点个 Star，这是对作者最好的支持～开源不易，且用且珍惜。
也欢迎关注公众号【Ease UI开源】，不错过最新的更新动态。
🔗 Gitee：https://gitee.com/yun_hua_admin/ease-ui
🔗 GitHub：https://github.com/Momingyun/ease-ui
🔗 预览地址：http://1.14.65.79