xy-tool-ui
Version:
XiaoYi tool compenent library
145 lines (126 loc) • 5.84 kB
Markdown
# xy-tool-ui
一个基于Vue CLI 3.0，Babel7，VUE2.6封装的VUE-UI组件库模版，支持统一加载和按需加载，可以按需分别加载对应组件的js和css。
[](https://www.npmjs.com/package/bes-ui)
[](https://npm-stat.com/charts.html?package=bes-ui)
[](https://img.shields.io/travis/BothEyes1993/bes-ui.svg)
[](https://github.com/BothEyes1993/bes-ui/blob/master/LICENSE)
[](http://img.badgesize.io/https://unpkg.com/bes-ui/package/index.umd.min.js?compression=gzip&label=gzip%20size:%20JS)
[](http://img.badgesize.io/https://unpkg.com/bes-ui/package/index.css?compression=gzip&label=gzip%20size:%20CSS)
## Installing
```shell
npm install xy-tool-ui --save
```
在 [unpkg](https://unpkg.com/xy-tool-ui/) 上获取
```HTML
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/xy-tool-ui/package/index.css">
<!-- 引入脚本 -->
<script src="https://unpkg.com/xy-tool-ui/package/index.umd.min.js"></script>
```
## Example
```JavaScript
// 统一加载
import XiaoYiToolUI from 'xy-tool-ui'
Vue.use(XiaoYiToolUI)
// 只加载component1
import { component1 } from 'xy-tool-ui'
Vue.use(component1)
// 加载component1和component2
import { component1 , component2} from 'xy-tool-ui'
Vue.use(component1)
Vue.use(component2)
```
## 使用示例
```html
1.查看报告
<y-iframe-report
ref="report"
:autographSrc="report.autographSrc"
:option="report.option"
:reject="reject"
:report-type="report.option.reportType"
:reportHideList="report.reportHideList"
:reviewedSignedSrc="report.reviewedSignedSrc"
:rid="report.rid"
:showShadow="showShadow"
:template-data="templateData"
:uid="report.uid"
:urlTransformation="report.urlTransformation"
height="550px"
width="850px"
@backHtml="backHtml"
@error="error"
>
</y-iframe-report>
-参数：uid 测评报告id [String, Array]
-参数：printKeyword false/true 默认：true 是否开启快捷键监听打印
-参数：option Object
{
action: 'dev', // 环境 dev/prod 默认：dev
hostSuffix: '/prod-api', // 自定义请求后缀 默认：/prod-api
path: '/generate/report/u/', // 自定义请求地址
auth: 'Authorization', // api请求中的令牌key // 默认：Authorization
localAuthKey: 'Authorization', // 当前缓存令牌key // 默认：Authorization
tokenPath: '/api/token', // 后端量表库token请求地址
reportType: 'doc', // 报告类型 (html、doc) 默认:html
}
-参数：reportHideList Array 默认：[]
· 封面:gauge_cover
· 标题:headerTitle
· 标题图片:headerTitleImg
· 基本信息:user
· 量表简介:gauge_introduce
· 筛查维度:gauge_dimension
· 量表得分:gauge_score
· 测评结果:gauge_conclusion
· 图:mainChart
· 表:gauge_surface
· 测评分析:gauge_analysis
· 指导意见:gauge_opinion
· 预警等级:gauge_warning
· 尾部:gauge_footer
· 原始答卷:gauge_answer
· 测评分析---症状表现:symptomsItemClassName
· 测评分析---建议:suggestClassName
-参数：showShadow 显示报告边框 Boolean 默认：false
-参数：autographSrc 测评员签字地址 String 默认：''
-参数：reviewedSignedSrc 审核员签字地址 String 默认：''
-参数：reportShow 显示报告 Boolean 默认：true 可不传，获取源码使用
-参数：urlTransformation 源码 [String, Array] 可不传，获取源码使用
-参数：rid 模板id [String] doc 模式必填；团测使用
-参数：templateData 模板数据 [Json] doc 模式必填；团测使用
-参数：reject 异常回调事件 [function] 可处理接口报错、token登录超时操作
·事件监听
@backHtml="backHtml"
this.$refs['report'].urlTransformationFun()
·事件调用打印
this.$refs['report'].print()
·快捷键监听打印 ~~目前已去除监听~~
Ctrl+P
·回调例子
reject (res) {
if (typeof res == 'object') {
if (res.code === 401) {
this.$confirm('登录状态已过期，您可以继续留在该页面，或者重新登录', '系统提示', {
confirmButtonText: '重新登录',
cancelButtonText: '取消',
type: 'warning'
}
).then(() => {
store.dispatch('LogOut').then(() => {
location.href = '/index'
})
}).catch(() => {
})
} else {
this.$message.error(res.msg)
}
}
}
2.设计量表
<y-design-answer-form />
3.量表配置
<y-design-form-rules />
```
> 按需加载功能只针对有Babel配置的项目，单纯用script和link的方式引入js和样式是全量引入
## License
Copyright (c) 2022-present, XiaoYI