zhytech-ui-mobile/README.md

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

# zhytechUI Mobile

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

[在线演示](http://60.205.113.132:7006/)
> ### 组件列表
#### 1、dynamicRenderer
动态表单渲染组件：
支持**基础组件**（文本、输入框、单选框、复选框、数字框、日期、时间）、**高级组件**（文件上传、图片上传）、**应用组件**（质控评分、公司人员选择组件、公司岗位选择组件）、**布局组件**（分组、标签页）。

> ### 使用说明
#### 1、安装
```ts
npm i zhytech-ui-mobile -S
```
更新本版
```ts
npm i zhytech-ui-mobile@latest -S
```
#### 2、引入使用
1)、按需引入：在要使用的页面添加下面代码即可
```ts
import { ZhyFormRenderer } from "zhytech-ui-mobile"
import "zhytech-ui-mobile/dist/style.css";
```
2)、全局引入：在main.ts中引入，在项目内任何页面都不需要单独引入
```ts
import zhytechUIMobile from "zhytech-ui-mobile";
import "zhytech-ui-mobile/dist/style.css";
createApp(app).use(zhytechUIMobile)
```
#### 2、主题色设置
目前支持传入主题色,默认主题色`#4d80f0` 设置方法如下：
2.1、在全局引入时设置主题色
```ts
// 在main.ts中引入
const theme = { colorTheme: "#ff0000" };
createApp(app)use(zhytechUiMobile, { theme });
```
2.2、动态设置组件库主题色，使用提供的setTheme方法设置
```ts
// 在需要的地方设置
import { setTheme } from "zhytech-ui-mobile";
setTheme("dark");
```
#### 3、使用组件
```html
   <zhy-form-renderer :formData="formData"></zhy-form-renderer>
```
#### 4、使用组件提供的类型
```ts
   import type { batchAddComponentParam, dynamicFormData, uploadOption } from "zhytech-ui-mobile";
```
> #### 注意：

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

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

> #### 版本更新清单：

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

> #### 后续计划：

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