zhytechUI

简介

一个基于Vue3 + ElementPlus + TypeScript封装的前端UI组件库 此组件依赖一些组件库，使用时需要自行安装 npm install @vueuse/core element-plus vue-router axios

组件列表

1、dynamicForm

动态表单组件：通过拖拽设计表单或试卷，以减少开发时间，此组件提供一个表单设计器和表单渲染器。 支持基础组件（文本、输入框、单选框、复选框、数字框、日期、时间）、高级组件（文件上传、图片上传）、应用组件（质控评分、公司人员选择组件、公司岗位选择组件）、布局组件（分组、标签页）。 。

2、dynamicFilter

动态条件组件，支持传入多组项目、支持不同项目自定义不同的条件，支持子条件，支持无限嵌套

3、icon

图标组件

4、filePreview

文件预览组件，支持png、jpg、jpeg、mp3、mp4、docx、xlsx、xls、pptx、pdf文件的在线预览

使用说明

1、安装

npm i zhytech-ui -S

更新本版

npm i zhytech-ui@latest -S

2、引入使用

1)、按需引入：在要使用的页面添加下面代码即可

import { ZhyFormDesigner, ZhyFormRenderer } from "zhytech-ui"
import "zhytech-ui/dist/style.css";

2)、全局引入：在main.ts中引入，在项目内任何页面都不需要单独引入

import zhytechUI from "zhytech-ui";
import "zhytech-ui/dist/style.css";
createApp(app).use(zhytechUI)

2、主题(V 1.1.0)

目前仅支持light和dark两种主题，默认light 设置方法如下： 2.1、在全局引入时设置主题

// 在main.ts中引入
createApp(app).use(zhytechUI, { theme: "dark" })

2.2、动态设置组件库主题，使用提供的setTheme方法设置

// 在需要的地方设置
import { setTheme } from "zhytech-ui";
setTheme("dark");

3、使用组件

   <zhy-form-designer :formData="formData"></zhy-form-designer>

4、使用组件提供的类型

   import type { batchAddComponentParam, dynamicFormData, uploadOption } from "zhytech-ui";

依赖安装说明

重要：在使用此组件库前，请确保安装以下必需依赖：

npm install vue@^3.4.37 [email protected] @vueuse/core@^10.4.1 axios@^1.4.0 dayjs@^1.11.13

可选依赖（根据使用的组件功能选择安装）：

• 文件预览功能：npm install @js-preview/docx@^1.6.4 @js-preview/excel@^1.7.14 pptx-preview@^1.0.1 vue-pdf-embed@^2.1.3 xgplayer@^3.0.23
• 富文本编辑器：npm install @wangeditor/[email protected] @wangeditor/[email protected]
• 拖拽排序功能：npm install sortablejs@^1.15.0
• 拼图验证码功能：npm install vue3-puzzle-vcode@^1.1.7

如果安装时出现peerDependencies冲突警告，请检查依赖版本或使用：

npm install --legacy-peer-deps

注意：

1)、此组件库提供的所有组件在使用时均需要添加zhy前缀，如：zhy-form-designer

2)、在使用zhy-file-preview组件预览pdf组件时，如果出现乱码问题，需要将zhytech-ui\dist\pdfjs-list文件夹复制到项目的public文件夹下

版本更新清单：

V 1.2.20

1.删除动态接口请求超时时间配置，用不超时
2.调整动态接口设置画面，新增baseUrlFromProps参数，用于从props中获取baseUrl

V 1.2.19

1.调整动态接口请求超时时间，60秒

V 1.2.18

1.人员组件支持动态获取选项
2.人员组件为下拉框时 支持远端搜索，支持配置搜索接口
3.接口配置画面样式调整，添加loading参数
4.优化人员、部门、岗位组件回显问题

V 1.2.17

1.修复将绑定字典改为自定义时fixedItemID赋值错误
2.调整组装动态请求数据，返回值里日期时间格式化处理

V 1.2.16

1.绑定字典选择时添加fixedItemID赋值
2.修复组装动态请求数据时动态参数获取错误

V 1.2.15

1.新增jsonViewer组件，用于查看json格式数据
2.zhy-dynamic-form组件的input组件新增支持设置动态请求数据

V 1.2.14

1.调整zhy-dynamic-form组件的单选、多选组件的选项支持设置分数，getData方法返回数据时，包含选项的分数

V 1.2.13

1.修复zhy-dynamic-renderer组件tabs组件无法添加子组件问题
2.调整zhy-dynamic-renderer组件新增tabs后默认显示第一个页签
2.移除隐藏标题时，清空标题内容的逻辑

V 1.2.12

1.zhy-file-preview组件添加 dynamicGetFile参数，用于动态获取文件内容

V 1.2.11

1.修复文件预览PDF文件时，低版本浏览器显示异常

V 1.2.10

1.修复zhy-dynamic-renderer组件中答题卡判断是否答对逻辑错误
2.修复zhy-dynamic-filter组件级联选择器样式异常
3.修复zhy-file-preview组件多个视频播放时，视频切换失败
4.优化zhy-dynamic-form组件demo页面，问卷和试卷拆分为两个页面
5.优化打包配置，减少项目打包体积

V 1.2.9

1.编译后移除pdfjs-list文件夹，减少项目体积

V 1.2.8

1.调整解决pdf中文乱码的静态文件位置

V 1.2.7

1.pdf文件切换时先清除上一个文件，分页切换事件返回增加总页数

V 1.2.5

1.pdf文件预览支持传入初始化页码

V 1.2.4

1.解决pdf显示乱码问题，需要将zhytech-ui\dist\pdfjs-list文件夹复制到项目的public文件夹下

V 1.2.2

1.pdf文件预览更换组件，分页显示
2.ppt文件预览优化

V 1.2.1

1.新增验证码组件（verificationCode），支持点击文字验证码（clickTextVCode）、滑动验证码(zhyPuzzleVcode)
2.原拼图验证码组件(zhyPuzzleVcode)已废弃，不建议使用

V 1.2.0

1.文件预览组件中视频更换为西瓜视频播放组件，解决视频全屏 无法显示弹窗的问题

V 1.1.39

1.优化文件预览组件，修复左侧列表名称过长时，超出外层宽度

V 1.1.38

1.优化文件预览，视频播放器参数，支持设置开始播放时间、支持禁用快进快退、支持设置宽高、支持设置自动播放、支持设置循环播放、支持设置静音、支持设置全屏、支持设置音量、支持设置播放速度、支持画中画、支持直播

V 1.1.37

1.富文本组件（richTextEditor）新增隐藏顶部工具栏、显示浮动工具栏、自动获取焦点属性，暴漏option类型richTextConfigOption
2.新增拼图验证码组件(zhyPuzzleVcode),暴漏option类型vcodeConfigOption

V 1.1.36

1.调整优化答题卡判断是否答对逻辑

V 1.1.35

1.修复横板下的zhy-dynamic-designer、zhy-dynamic-renderer显示样式
2.修复tabs组件高度显示异常

V 1.1.34

1.zhy-dynamic-renderer新增是否显示答题卡开关属性

V 1.1.32

1.修复zhy-dynamic-renderer组件渲染试卷时realTimeDisplayAnswerMode、everyItemDisplayAnalysisSwitch两个参数没有双向同步

V 1.1.31

1.调整zhy-dynamic-designer新增realTimeDisplayAnswerMode（考核模式是否实时显示答案）、everyItemDisplayAnalysisSwitch（考核模式是否每道题都显示显示答案的开关）、showCorrectOrNot（考核模式 答题卡是否显示正确答案）参数

V 1.1.30

1.调整zhy-dynamic-renderer试卷模式支持答题卡
2.调整zhy-dynamic-renderer试卷模式支持分页，题目大于10题时，自动分页
3.调整zhy-dynamic-renderer答案解析/项目说明显隐逻辑

V 1.1.27

1.调整zhy-dynamic-designer修复tabs组件调整标签顺序，子组件不同步
2.调整zhy-dynamic-designer字典选择组件显示字典ID，搜索可模糊查询字典ID
3.调整zhy-dynamic-designer支持横向布局
4.调整zhy-dynamic-designer横向布局时支持任意组件设置换行
5.调整zhy-dynamic-designer的group组件横向布局时支持任意组件设置换行

V 1.1.26

1.调整zhy-dynamic-designer支持复选框项目解析异常
2.调整zhy-dynamic-filter不等于条件时可以多选的问题

V 1.1.25

1.调整zhy-dynamic-renderer支持单项目显示项目解析开关

V 1.1.24

1.调整zhy-dynamic-filter组件中下拉框项目支持显示后缀

V 1.1.22

1.修复zhy-dynamic-designer组件在查看模式下，人员、岗位组件显示不正确
2.优化代码

V 1.1.21

1.调整zhy-dynamic-filter组件的items参数支持unit（单位）属性
2.导出新增zhy-dynamic-filter组件参数类型

V 1.1.20

1.修复zhy-dynamic-designer中tabs默认值为0
2.修复zhy-dynamic-designer中多个图片上传或文件上传时，上传时显示异常

V 1.1.19

1.修复zhy-dynamic-designer清空时，不可复制的组件没有回到左侧组件列表内
2.修复zhy-dynamic-designer选择已有组件时被误认为组件异动
3.修复zhy-dynamic-designer设置动态条件时，人员、岗位组件无法选择条件值
4.修复zhy-dynamic-designer设置左缩进无效的的问题
5.优化zhy-dynamic-designer组件，去除tabs组件现实标题相关属性
6.优化zhy-dynamic-renderer组件返回值，按照模板顺序返回
7.优化zhy-dynamic-renderer组件返回值逻辑，精简代码
8.优化zhy-dynamic-designer试卷模式下样式

V 1.1.18

1.修复zhy-dynamic-designer在试卷模式下标题显示异常
2.修复zhy-dynamic-renderer在试卷模式下标题显示异常

V 1.1.17

1.修复zhy-dynamic-renderer勾选不同单选/多选组的相同选项时，返回值异常

V 1.1.16

1.优化zhy-dynamic-designer左侧组件列表样式异常

V 1.1.15

1.优化组件库打包体积
2.优化zhy-dynamic-designer样式
3.修复body无font-size导致的自适应样式异常

V 1.1.14

1.修复zhy-dynamic-filter样式异常

V 1.1.13

1.修复引用此组件库造成的css样式污染问题

V 1.1.10

1.修复zhy-rich-text-editor富文本组件样式异常
2.修复组件zhy-form-designer的时间组件限制时间异常

V 1.1.9

1.新增zhy-rich-text-editor富文本组件

V 1.1.7

1.修复组件zhy-form-designer的参数formData.allowCreateDictionary默认值不生效

V 1.1.6

1.修复zhy-form-renderer组件动态显示组件显示灰色问题
2.修复全局引用时引用zhy-file-preview组件报错问题
3.组件zhy-form-designer的allowCreateDictionary参数移到formData参数下

V 1.1.5

1.zhy-form-designer组件的子组件添加fixedItemID属性，用于固定子组件ID

V 1.1.4

1.修复zhy-form-designer组件高级属性设置时不能设置嵌套条件
2.处理低版本浏览器使用文件预览组件预览PDF文件时报错

V 1.1.3

1.修复zhy-dynamic-filter组件多条件关系线样式异常
2.修复zhy-dynamic-filter组件非嵌套模式时不显示删除按钮
3.调整zhy-dynamic-filter组件allowMultiLevel默认值由true改为默认false
4.调整zhy-dynamic-filter组件只有一个条件时删除前面空白

V 1.1.2

1.修复文件预览组件导致引用时打包报错问题

V 1.1.1

1.zhy-dynamic-filter增加是否允许多层嵌套（allowMultiLevel）属性
2.修复文件预览组件图片预览样式异常

V 1.1.0

1.将所有css、scss样式代码替换为unocss原子css
2.zhy-form-designer组件的分组子组件支持横向布局
3.新增设置主题功能
4.新增filePreview文件预览组件
5.首页改为组件演示画面

V 1.0.37

1.zhy-form-designer组件新增数字框组件，支持允许输入文本、支持上下限限制配置
2.优化zhy-icon组件内部逻辑
3.优化组件库样式

V 1.0.36

1.zhy-form-designer组件新增日期组件
2.zhy-form-designer组件新增时间组件
3.修复zhy-form-designer组件中tabs标签页组件样式异常
4.修复zhy-form-designer组件隐藏属性面板后无法再次打开问题
5.修复zhy-form-designer组件隐藏标题时保存提示标题命名不规范
6.组件zhy-form-render返回值新增sourceType属性

V 1.0.35

1.zhy-form-designer组件新增tabs标签页子组件
2.zhy-form-designer组件新增change事件，用于监听组件异动
3.zhy-form-renderer组件新增allowCreateDictionary属性，设置是否允许新增字典项目，默认true
4.zhy-form-renderer组件新增hiddenTitle属性，设置是否显示表单标题，默认true
5.zhy-form-renderer组件参数sourceTypeMap的size大于1时，字典候选项列表中显示字典来源

后续计划：

此组件库目前还处于雏形，后续会继续添加组件