zhytechUI Mobile

简介

一个基于Vue3 + wot-design-uni + TypeScript + unocss封装的前端UI组件库

组件列表

1、dynamicRenderer

动态表单渲染组件： 支持基础组件（文本、输入框、单选框、复选框、数字框、日期、时间）、高级组件（文件上传、图片上传）、应用组件（质控评分、公司人员选择组件、公司岗位选择组件）、布局组件（分组、标签页）。

使用说明

1、安装

npm i zhytech-ui-mobile -S

更新本版

npm i zhytech-ui-mobile@latest -S

2、引入使用

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

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

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

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

2、主题色设置

目前支持传入主题色,默认主题色#4d80f0 设置方法如下： 2.1、在全局引入时设置主题色

// 在main.ts中引入
const theme = { colorTheme: "#ff0000" };
createApp(app)use(zhytechUiMobile, { theme });

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

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

3、使用组件

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

4、使用组件提供的类型

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

依赖安装说明

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

npm install vue@^3.3.11 @vueuse/core@^10.11.1 dayjs@^1.11.18

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

• 文件预览功能：npm install @js-preview/docx@^1.6.4 @js-preview/excel@^1.7.14 pptx-preview@^1.0.1 pdfjs-dist@^2.16.105 xgplayer@^3.0.23
• 验证码功能：npm install vue3-puzzle-vcode@^1.1.7

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

npm install --legacy-peer-deps

注意：

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

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

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

版本更新清单：

V 1.1.11

1.调整动态接口设置画面，新增baseUrlFromProps参数，用于从props中获取baseUrl

V 1.1.10

1.修复人员组件多显示下拉框问题

V 1.1.9

1.调整组装动态请求数据，返回值里日期时间格式化处理
2.调整日期、时间组件添加边框
3.人员组件支持动态获取选项
4.人员组件为下拉框时 支持远端搜索，支持配置搜索接口
5.新增部门组件
6.修复人员、岗位组件回显问题

V 1.1.8

1.zhy-dynamic-renderer组件的input组件新增支持设置动态请求数据

V 1.1.7

1.调整zhyFormRenderer组件的单选、多选组件支持分数显示，在getData方法中返回分数
2.调整zhyFormRenderer组件的getData新增valueContent属性，和PC端组件保持一致

V 1.1.6

1.zhyFilePreview组件新增extensionName属性，用于指定文件类型

V 1.1.5

1.修复zhyFilePreview组件，两个视频文件切换时，视频没有切换
2.修复zhyFormRenderer组件，答题卡永远显示错误的问题
3.优化组件库打包配置，减少组件库体积

V 1.1.4

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

V 1.1.3

1.pdf文件添加加载状态，分页切换事件返回增加总页数

V 1.1.2

1.非视频文件预览组件更换
2.pdf分页呈现
3.解决pdf显示乱码问题，需要将zhytech-ui\dist\pdfjs-list文件夹复制到项目的static文件夹下

V 1.1.1

1.文件预览组件(zhyFilePreview)全屏功能优化

V 1.1.0

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

V 1.0.18

1.新增文件预览组件(zhyFilePreview),暴漏option类型filePreviewOption

V 1.0.17

1.新增拼图验证码组件(zhyPuzzleVcode),暴漏option类型vcodeConfigOption

V 1.0.16

1.优化多选框组件、单选框禁用时的样式

V 1.0.14

1.修复多选框组件、日期组件、时间组件的项目说明/答案解析提示图标显示异常
2.修复答题卡组件的样式问题、修复多选题判断是否选择的逻辑错误
3.调整优化答题卡判断是否答对逻辑

V 1.0.13

1.新增日期、日期时间、时间、时间范围组件

V 1.0.0

1.动态表单渲染组件：配合zhytech-ui组件库（配套的PC端组件库）的zhy-form-designer组件使用
支持基础组件（文本、输入框、单选框、复选框）、高级组件（文件上传、图片上传）、应用组件（质控评分、公司人员选择组件、公司岗位选择组件）、布局组件（分组）。

后续计划：

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