vel-ui v1.5.9

基于element-ui 的二次封装，使开发更加的便捷和简单

更多详情看element-ui官方文档

安装和使用

安装

npm i vel-ui --save
(安装包内包含Element-ui无需重复安装)

使用

import ElementUI from 'element-ui'
import VelUI from 'vel-ui'
import 'element-ui/lib/theme-chalk/index.css'
import 'vel-ui/app.css'
Vue.use(ElementUI)
Vue.use(VelUI)

组件

图标组件

<VelIcon />

按钮组件

<VelBtn />

event
@btnClick 按钮点击事件

文字连接组件

<VelLink />

单选组件

<VelRadio />

event
@radioChange(val)

slot
#defalut 参数 slot-scope="{text}"

radioList
普通类型参数
label 值 string
text 名字 string
disabled 是否禁用 boolean 
border 是否带边框 boolean 
按钮类型
label 值 string
text 名字 string
disabled 是否禁用 boolean 
btn 是否为按钮类型 boolean

表格组件

<VelTable />

event
@selectChange(select)
@headerClick(property) 点击表头方法
@actionFn(type,row) 操作方法
@actionDelFn(type) 删除操作方法

slot
#search 搜索插槽
#footer 页脚插槽
#expand 参数 slot-scoped="{row}"

columns
hander 多表头 {label,columns:[{hander:{label,columns:[{prop,label}]}} , {prop,label}]} label表头名columns 表头中的列配置
支持递归多级表头
prop 列配置字段 string
label 列配置名称 string
width 列配置宽度 string / number
hidden 列配置是否隐藏 boolean
isCompile 列配置编译方法 function(val)
align 列配置对其方式 string left / center / right 
slot 列配置插槽 boolean 参数 slot-scoped="{row}"
sortable 列表排序 boolean 
fixed 列配置固定方式 string left / right 
isTips:{effect:""} 是否提示 effect 提示颜色
action:{edit: true,del:true,more:true} eidt 隐藏编辑 /boolean del 隐藏删除 /boolean more 隐藏更多 /boolean 默认都显示
列配置中只有hander为多表头，列配置没有prop为操作

提示信息组件

<VelTips />

slot
#content 内容插槽

气泡框组件

<VelPopover />

event
@hide 取消/隐藏 事件
@show 确认/显示 事件

slot
#reference 触发 Popover 显示的 HTML 元素
#default 当isPopover时 气泡框中的内容

标签组件

<VelTag />

event
@close(tag) 标签关闭事件

slot
#default

分割线组件

<VelLine />

slot
#default

弹框组件

<VelModal />

event
@actionFn(type) 底部按钮操作方法
@close() 关闭的回调
@closed() 关闭动画结束时的回调
@open() 打开的回调
@opened() 打开动画结束时的回调

slot
#title 标题插槽
#footer 操作插槽
#default 当isDrawer时默认内容插槽

时间线组件

<VelTimeLine />

timeLineList
time 时间 string 
text 文字描述 string 
type 节点类型 string primary / success / warning / danger / info
icon 节点图标 string 
color 节点颜色 string
size 节点尺寸 normal / large
slot 节点插槽 string   slot-scope="{row}"           

折叠面板组件

<VelCollapse />

event
@change(val)

slot
#title 面板标题插槽
#default 面板内容插槽和name关联 slot="name"

collList 
title 面板标题 string
name 唯一标志符 string
disabled 是否禁用 boolean

卡片组件

<VelCard />

event
@actionFn(type) 操作方法 isAction时有效

slot
#default 内容插槽
#header 头部插槽 isHeader时有效

actionList 
icon 图标类明 string
key 唯一标志符 string
type 图标类型  string   

步骤条组件

<VelSteps />

stepList
title 标题 string
des 描述性文字 string	
icon 图标 string	
status 设置当前步骤的状态，不设置则根据 steps 确定状态 string wait / process / finish / error / success

下拉菜单组件

<VelDropDown />

event
@command(val) 点击菜单项触发的事件回调	dropdown-item 的指令
@leftFn() 左边按钮点击事件

slot
#default 

dropdownList
disabled 是否禁用 boolean
divided 显示分割线	boolean
command 指令 string/number/object
slot 插槽 string slot-scope="{row}"
icon 图标类名 string 非插槽时有效
text 显示文字 string 非插槽时有效

页头组件

<VelPageHeader />

面包屑组件

<VelBreadcrumb />

breadcrumbList
path 跳转路径 string/object
text 文字描述 string
replace 在使用 to 进行路由跳转时，启用 replace 将不会向 history 添加新记录 boolean

标签页组件

<VelTabs />

event
@tabClick(val) tab 被选中时触发	 被选中的标签 tab 实例

slot
#label 选项卡标题插槽	
#slot  tabs每一项插槽和name关联 slot="name"

tabList
label 选项卡标题 string
name 与选项卡绑定值 value 对应的标识符，表示选项卡别名 string
disabled 是否禁用 boolean
lazy 标签是否延迟渲染 boolean
closable 标签是否可关闭 boolean
***
isBadge时有效
value 标志的值 string, number
max 最大值，超过最大值会显示 '{max}+'，要求 value 是 Number 类型 number
isDot 小圆点 boolean
type 类型 string	primary / success / warning / danger / info
icon 选项卡标题图标 string
isBadge 是否开启标志模式 boolean

警告组件

<VelAlert />

event
@close(e) 关闭alert时触发的事件

描述列表组件

<VelDes />

slot
#extra 头部操作插槽
#label 自定义标签文本
#slot 自定义标签文本值与slot相关 slot="slot" slot-scope="{cnt}"

desList
label	标签文本	string
labelClassName	自定义标签类名	string	
contentClassName	自定义内容类名	string
labelStyle	自定义标签样式	object
contentStyle	自定义内容样式	object
***
未使用label slot插槽时有效
icon  标签文本图标 string
cnt 标签文本值 string

骨架屏组件

<VelSkeleton />

slot
#template 需要渲染的loading状态插槽
#default 真实元素模板插槽

骨架item组件

<VelSkeletonItem />

头像组件

<VelAvatar />

event
@error(e) 图片类头像加载失败的回调， 返回 false 会关闭组件默认的 fallback 行为

slot
#default 自定义头像展示内容

标记组件

<VelBadge />

slot
#default 

分页组件

<VelPagination />

event
@paginationFn(type,val) 条数改变和页面改变方法

树形组件

<VelTree />

event
@nodeClick(data) 节点被点击时的回调 共三个参数，依次为：传递给 data 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身。
@dragStart(node,e) 节点开始拖拽时触发的事件 共两个参数，依次为：被拖拽节点对应的 Node、event
@dragEnter(node,allnode,e) 拖拽进入其他节点时触发的事件 共三个参数，依次为：被拖拽节点对应的 Node、所进入节点对应的 Node、event
@dragLeave(node,allnode,e) 拖拽离开某个节点时触发的事件  共三个参数，依次为：被拖拽节点对应的 Node、所离开节点对应的 Node、event
@dragOver(node,allnode,e) 在拖拽节点时触发的事件（类似浏览器的 mouseover 事件） 共三个参数，依次为：被拖拽节点对应的 Node、当前进入节点对应的 Node、event
@dragEnd(node,allnode,f,e) 拖拽结束时（可能未成功）触发的事件  共四个参数，依次为：被拖拽节点对应的 Node、结束拖拽时最后进入的节点（可能为空）、被拖拽节点的放置位置（before、after、inner）、event
@drop(a,b,c,d) 拖拽成功完成时触发的事件  共四个参数，依次为：被拖拽节点对应的 Node、结束拖拽时最后进入的节点、被拖拽节点的放置位置（before、after、inner）、event
@checkChange(a,b,c) 当前选中节点变化时触发的事件 共两个参数，依次为：当前节点的数据，当前节点的 Node 对象
@check(a,b) 当复选框被点击的时候触发 共两个参数，依次为：传递给 data 属性的数组中该节点所对应的对象、树目前的选中状态对象，包含 checkedNodes、checkedKeys、halfCheckedNodes、halfCheckedKeys 四个属性

slot
#default 默认插槽 slot-scope="{item}"

props
label	指定节点标签为节点对象的某个属性值	string, function(data, node)
children	指定子树为节点对象的某个属性值	string
disabled	指定节点选择框是否禁用为节点对象的某个属性值	boolean, function(data, node)
isLeaf	指定节点是否为叶子节点，仅在指定了 lazy 属性的情况下生效	boolean, function(data, node)

进度条组件

<VelProgress />

穿梭框组件

<VelTransfer />

event
@change(val,direction,keyarr) 右侧列表元素变化时触发  当前值、数据移动的方向（'left' / 'right'）、发生移动的数据 key 数组

slot
#default 默认内容插槽  slot-scope="{ option }"
#lfooter 左边底部插槽
#rfooter 右边底部插槽

时间日期组件组件

<VelDateTime />

event
@focus()
@change(val)
@blur()

滑块组件

<VelSlider />

event
@change(val)
@input(val)

开关组件

<VelSwitch />

event
@change(val)

级联选择器组件

<VelCascader />

event
@change(val) 当选中节点变化时触发
@expandChange(val) 当展开节点发生变化时触发
***
非折叠面板有效
@focus()
@blur()
@removeTag(tag) 在多选模式下，移除Tag时触发

slot
#default 默认内容插槽 slot-scope="{item}"

折叠面板只有效的参数
initValue
props
cascaderList

计数器组件

<VelInputNum />

event
@focus()
@change(val)
@blur()

多选组件

<VelCheckbox />

event
@change(val)

slot
#default slot-scope="{item}"

checkboxList
普通类型
size Checkbox 的尺寸，仅在 border 为真时有效 string	medium / small / mini
border 是否显示边框 boolean
label 选中状态的值 string
disabled 是否禁用 boolean
checked 当前是否勾选 boolean
按钮类型可选
label
disabled
checked
btn 是否为按钮类型 boolean

输入框组件

<VelInput />

event
focus()
change(val)
blur()
input(val)
clear() 在点击由 clearable 属性生成的清空按钮时触发
select(item) 选中 input 中的文字
querySearch(queryString, cb)

slot
#beforeIcon  前置图标插槽 使用时需加上 el-icon__input 类名
#afterIcon 后置图标插槽 使用时需加上 el-icon__input 类名
#beforeText 前置文字插槽 
#afterText 后前置文字插槽 
#default 自定义模板插槽 slot-scope="{item}" / isShowAutocomplete时有效

下拉框组件

<VelSelect />

event
@focus()
@clear()
@change(val)
@blur()
@remove-tag(e)

slot
#beforeIcon 前置图标插槽

selectList
label 文字描述
value 绑定值
disabled 禁用
size 大小
{label:'string',value:'string',disabled:'boolean'}
****
options时 
label 文字描述
value 绑定值
disabled 禁用
{label:'string',options:[
    {label:'string',value:'string'}
]}

现有组件

    VelIcon,
    VelBtn,
    VelLink,
    VelRadio,
    VelTable,
    VelCard,
    VelCollapse,
    VelLine,
    VelPopover,
    VelTag,
    VelTips,
    VelTimeLine,
    VelSetps,
    VelDropdown,
    VelPageHeader,
    VelBreadcrumb,
    VelTabs,
    VelAlert,
    VelDes,
    VelSkeleton,
    VelSkeletonItem,
    VelAvatar,
    VelBadge,
    VelPagination,
    VelTree,
    VelProgress,
    VelTransfer,
    VelDateTime,
    VelSlider,
    VelSwitch,
    VelCascader,
    VelSelect,
    VelInputNum,
    VelInput,
    VelCheckbox,
    VelModal,