zc-ui
zc 通用 Vue 组件库
install
npm install zc-ui
use
import zcui from 'zc-ui'
vue.use(zcui)
components
ZcAuthWrapper
/*
@ name ZcAuthWrapper
@ desc 元素级鉴权渲染组件
@ props
url string 权限地址
method string | undefined 请求方法[默认get]
headers object 请求header头[默认空]
data object | undefined post请求时的body
params object | undefined get请求时的params
hideMode invisible | noRender 隐藏模式[默认为invisible]
interval number | undefined 轮询间隔（ms）[默认3000ms]
retryNum number | undefined 请求连续失败后重试次数[默认无穷大]
onerror function | undefined 请求错误回调
@res code number 401：登陆失效 404: 找不到接口 10000：连续错误达到最大值
updated function | undefined 渲染更新回调函数
completed function | undefined 渲染完成回调函数
*/warn:
页面元素显示控制可以分为不渲染和渲染后隐藏
- 不渲染首选过滤器的方式，但是会在代码中写大量过滤代码，如：,代码不美观
- 渲染后隐藏，页面所有元素加载后根据需要判断是否显示元素，效率比方式 1 低很多，但是在非大量元素操作下可以接受，如果需要控制的元素数量巨大，请单独进行控制
ZcCrosIframe
/*
@ name ZcCrosIframe
@ desc 跨域消息通讯组件
@ props
onMessage function | undefined onMessage callback
actions vuex action name if the action in a module please user namescape, like this 'namescape/actionname'
crosLogin string | undefined
crosLang string | undefined
cachePrefix string | undefined localstorage cache prefix
*/
// 普通用法
<ZcCrosIframe cachePrefix="" actionName="" onMessage=""></ZcCrosIframe>注意： 由于跨域消息组件可用于各个域之间的消息通讯，所有提供了路由级注册方式
...
const zcOptions = {
router,
ZcCrosIframe: {
route: {
name: 'crosIframe',
path: '/crosIframe',
meta: { auth: false }
},
cachePrefix: 'test'
}
}
Vue.use(zcUI, zcOptions)
...ZcSelect
/*
@name ZcSelect
@desc select 选择器
@slot
zc-select-prefix node | vNode prefix 插槽
zc-select-suffix node | vNode suffix 插槽
@props
conf object option 键值的key
name： label 选项显示值的key（优先级比label高）
label: text 选项显示值的key
value: id 选项选择值的key
type string['click'] 触发方式['click' | 'hover']
value string | number 默认选择的值
action 'click'|'hover' 触发显示选项的动作，默认为click
options array options 列表
className string 组件className
heighLight0 boolean[false] 第一项是否高亮
placeholder string placeholder
changeLabel boolean[true] 是否改变当前显示的 label， 不改变时取placeholder的值
customOption function(item, key) option render函数
suffixAfterVal bool[false] 箭头是否紧跟文字
focusAfterSelect bool[true] 选择后保留 focus 类
@event
select item
*/ZcMessage
/*
@ name ZcMessage
@ desc 消息提示【扩展自 element-ui Message 组件】
修改了 element-ui Message 的样式为通用样式
使用方法同 element-ui Message
this.$zcMessage.error()
this.$zcMessage.success()
this.$zcMessage.warning()
*/ZcNotify
/*
@ name ZcNotify
@ desc 消息通知【扩展自 element-ui Notify 组件】
修改了 element-ui Notify 的样式为通用样式
this.$zcNotify({ type, title, message, onClose })
@ params
{
type, error|success|warning
title, string
message, string | VNode
onClose function
}
*/ZcNotifyCation
/*
@name ZcNotifyCation
@desc websocket 消息组件
@props
type string['token'] {'token': 通用token过期; 'scene': 场景监控}
ajax function[null] 请求接口的ajax方法（函数）固定为场景监控中的$http
token object
userId string
tokenId string
currentCompanyId string
sceneId string[''] 场景监控场景id
@event
busEvent agruments
[0] string eventName
... ...params
@actions[请确保store中有以下action供调用，如不调用则不管]
clearToken 清除token
scene/setPlan 设置预案信息
scene/setActiveMenus 设置场景菜单
scene/setCenterDevice 设置居中设备
scene/setCurrentDevice 设置当前设备
*/ZcPagination
/*
@name ZcPagination
@desc page 分页
@slot
@props
pageSize Number 每页条数
total Number 总条数
page Number 当前页
pagerCount Number 设置最大页码按钮数
background Boolean[false] 选中是否有背景色
small Boolean[false] 是否是小型分页
OnePageShow Boolean[false] 只有一页是是否显示分页 （true【显示】）
layout String 组件布局
sizes（设置每页显示的页码数量）,
prev (上一页), pager (页面列表),
next （下一页）, jumper （跳页元素）
total （总条目数）,
border Boolean[false] 是否显示边框线 （true【显示】）
@event
pageChange page[Number] page（当前页）
*/ZcButton
/*
@name ZcButton
@desc button 和超链接 a
@slot
@props
disabled Boolean【false】 是否禁用按钮 （true【禁用】）
type String【default】 颜色样式
default（默认样式）,
primary (主要按钮【确定】),
danger (非规则颜色【删除】),
warning （辅助色【导出】）
info （信息 【信息】）
success （成功）
link 超链接
url String type为link是跳转的url
target String【_blank】 type为link是窗口打开类型
underline Boolean【true】 type为link是是否有下划线 （true【显示】）
@event
click 点击事件
*/ZcBreadcrumb
/*
@name ZcBreadcrumb
@desc 面包屑
@slot
@props
arrList Array 面包屑名称数组
{
name:【String】 文字 （必须项）
url:【String】 跳转地址 (无http://的url)
}
@event
无
*/ZcCarousel
/*
@name ZcCarousel
@desc ZcCarousel 轮播组件
@slot
description-text node | vNode 文字描述 插槽
@props
data Array[{imgUrl : ''}] 轮播数据
activeIndex Number[0] 默认当前播放的index [0 - n]
transitionInterval Number[500] 默认过渡动画时长
autoPlay boolean[true] 是否自动轮播 默认自动轮播
autoPlay Number[2000] 自动轮播 过渡动画时长
loop boolean[true] 是否循环 默认循环
@event
clickItem index 当前点击的index
indexChange index 变化后的index
*/