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. 不渲染首选过滤器的方式，但是会在代码中写大量过滤代码，如：,代码不美观
2. 渲染后隐藏，页面所有元素加载后根据需要判断是否显示元素，效率比方式 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
    */