1.2.0 • Published 9 months ago
hntdi-cloud-ui v1.2.0
cloud-ui
Project setup
npm installCompiles and hot-reloads for development
npm run serveCompiles and minifies for production
npm run buildLints and fixes files
npm run lint安装
切换本地仓库地址
npm config set registry http://134.160.180.90:30891/repository/npm-hosted/登录
npm login --registry=http://134.160.180.90:30891/repository/npm-hosted/账号：admin
密码：nexus@2022
安装依赖
npm install npm-demo-ld全局引入mian.js
import CloudUI from 'cloud-ui/lib/index
import 'cloud-ui/lib/index/style.css
Vue.use(CloudUI)按需引入
配置babel.config.js
module.exports = {
presets: [
'@vue/app',
['@babel/preset-env', { 'modules': false }]
],
plugins: [
['import', {
libraryName: 'cloud-ui',
libraryDirectory: 'lib',
style: (name) => {
return `${name}/style.css`
}
}, 'cloud-ui']
]
}页面中引入并注册
import { ImageUpload, FileUpload } from 'cloud-ui'
components: { ImageUpload, FileUpload }CommonUtils
CommonUtils为公共方法合集，需要在使用页面中引入并使用
import { CommonUtils } from 'cloud-ui'
CommonUtils.getToken()使用request方法时需要在main.js中进行初始化
export function init() {
// 初始化,定义request的baseURL
window.BASE_API = process.env.VUE_APP_BASE_API
window.SSO_URL = process.env.VUE_APP_SSO_URL
}
Vue.use(init)方法
| 方法名 | 说明 | 参数 | 具体使用 |
|---|---|---|---|
| request | 公共request请求，使用时需要在main.js中进行初始化 | 对象类型，{baseURL,url,responseType,method,params,data等}，baseURL，url，method为必填 | CommonUtils.request({ responseType: 'blob', baseURL: baseURL, url: '/item/exportAllItemList', method: 'get', params: query}) |
| dictCache | 根据字典代码获取字典数据 | （url，option）url为拼接字典代码后的请求路径，option对象类型，需包含cache,repeat,refresh三个参数 | CommonUtils.dictCache(/supervise/item/queryDictDataListByTypeCode?typeCode=${type}, { cache: true, // 是否开启缓存 repeat: true, // 是否开启防止同时发起多个相同请求 refresh: refresh // 是否刷新}) |
| getToken | 获取HNTDI-AccessToken | CommonUtils.getToken() | |
| removeRefreshToken | 移除刷新token | ||
| removeToken | 移除HNTDI-AccessToken | ||
| removeTokenType | 移除tokenType | ||
| setRefreshToken | 修改刷新token | ||
| setToken | 修改HNTDI-AccessToken | ||
| setTokenType | 修改tokenType |
直接引入
import { request } from 'cloud-ui/lib/common-utils'image-upload图片上传
<image-upload :image-limit="{size:1}" :image-type="['image/png']"/>属性
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| image-type | 可以上传的图片类型 | array | 'image/png', 'image/jpg', 'image/jpeg','image/gif' |
| image-limit | 图片文件限制条件，包含图片大小size(M)、图片尺寸width(px)，height(px) | object | {size:100} |
| image-url | 已上传的图片地址 | string | |
| accept-type | 接受上传的图片类型，(.png, .jpg, .jpeg） | string | .png, .jpg, .jpeg, .gif |
事件
| 事件名称 | 说明 | 回调参数 |
|---|---|---|
| imgUpload | 图片上传成功 | file图片文件 |
| deletePic | 移除当前图片 |
file-upload文件上传
<file-upload :file-type="['xlsx', 'xls', 'doc', 'docx', 'wps', 'ppt', 'pptx', 'pdf', 'zip', 'rar', 'txt']"
accept-type=".xlsx, .xls, .doc, .docx, .wps, .ppt, .pptx, .pdf, .zip, .rar, .txt"
:file-limit="{size:5,count:5}"/>属性
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| file-type | 可以上传的文件类型 | array | 必填 |
| file-limit | 文件限制条件，包含单个文件大小size(M)、文件个数count | object | { size: 100, count: 9999} |
| attachment-list | 已上传的文件列表 | array | |
| accept-type | 接受上传的文件类型 | string | 必填 |
事件
| 事件名称 | 说明 | 回调参数 |
|---|---|---|
| fileUpload | 上传文件列表发生变化，包括添加文件和移除文件 | 文件列表 |
1.2.0
9 months ago