cloud-ui

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Lints 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 | 上传文件列表发生变化，包括添加文件和移除文件 | 文件列表 |