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";

注意：

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

2)、此组件css样式依赖scss开发，使用者项目还需要添加scss依赖。

版本更新清单：

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时，字典候选项列表中显示字典来源

后续计划：

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