Th技术开发白皮书

ith-ui组件库介绍

2021/11/4 vue

# 来由

ith-vue前端框架基于element-admin为基础框架，在此基础上，对于我们产品的样式风格、操作习惯，我们对于常用组件进行了封装，已达到快速开发、统一交互的目的

关于ith-ui的取名来由，首字母ith来自于itonghui缩写。

# 依赖

ith-ui是基于Vue.js

部分组件使用了element-ui，是对element-ui的二次封装。

另外还依赖print-js（数据打印），wangeditor（超好用的富文本编辑器）

# 安装

# npm配置方法

如果需要安装外部依赖，可在cmd中切换成国内镜像地址

npm config set registry https://registry.npm.taobao.org                     // 淘宝
npm config set registry https://npm.aliyun.com                              // 阿里
npm config set registry http://mirrors.cloud.tencent.com/npm/               // 腾讯
npm config set registry https://mirrors.huaweicloud.com/repository/npm/     // 华为

或使用npm镜像

npm config set registry https://registry.npmjs.org/
npm config set registry https://registry.npmmirror.com

# 安装

// 安装
npm install ith-ui-view

// 更新
npm update ith-ui-view

# 引入

在main.js中添加以下代码

import 'ith-ui-view/dist/ith-ui-view.css'
import IthUI from 'ith-ui-view'
//设置baseUrl，可选项
IthUI.config.setBaseUrl(process.env.VUE_APP_API_BASE_HOME)
Vue.use(IthUI)

# 属性

名称 说明 默认值
token 组件中调用接口需要的请求头Token --
webParam 统一默认上传配置{ FILE_TYPE-文档上传类型, FILE_MAX_SIZE-文档上传大小, FILE_IMAGE_TYPE-图片上传类型, FILE_IMAGE_MAX_SIZE-图片上传大小, FILE_VIDEO_TYPE-多媒体上传类型(暂未使用), FILE_VIDEO_MAX_SIZE-多媒体上传大小} --
onlinePreview 用于在线预览文件的url --
uploadPreview 设置是否可以上传文件和图片时预览 true
header 上传文件和图片时请求头 {}
cloudType 用于th-img组件图片云服务器类型设置 th
downloadType ThDownload组件下载类型, a-标签下载 http-接口下载 http
moduleUpParams 模块化上传参数 []

# 方法

名称 说明 默认值
setToken 设置请求头Token -----
setHeader 设置请求头其他参数 --
setParam 设置上传配置{ FILE_TYPE-文档上传类型, FILE_MAX_SIZE-文档上传大小, FILE_IMAGE_TYPE-图片上传类型, FILE_IMAGE_MAX_SIZE-图片上传大小, FILE_VIDEO_TYPE-多媒体上传类型(暂未使用), FILE_VIDEO_MAX_SIZE-多媒体上传大小(暂未使用)} --
setOnlinePreview 设置在线预览文件的url --
setUploadPreview 设置是否可以上传文件和图片时预览 --
setCloudType 设置th-img组件图片云服务器类型 --
setDownloadType 设置ThDownload组件下载类型, a-标签下载 http-接口下载 --
setModuleUpParams 设置ThUploadFile 模块化上传附件 参数信息 --

更新日志