npm.io
1.5.9 • Published 3 years ago

vel-ui

Licence
ISC
Version
1.5.9
Deps
1
Size
1.3 MB
Vulns
0
Weekly
0
SummaryDependencyVersions

基于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 />
参数 说明 类型 可选值 默认值
iconName 图标类名 string --- ---
iconText 模板内部文字 string --- ---
type 图标类型 string primary / info / success / wraning / danger ---
按钮组件
<VelBtn />

event
@btnClick 按钮点击事件
参数 说明 类型 可选值 默认值
size 尺寸 string medium / small / mini ---
type 按钮类型 primary / success / warning / danger / info / text --- primary
icon 图标类名 string --- ---
isPlain 是否朴素按钮 boolean --- false
isRound 是否圆角按钮 boolean --- false
isCircle 是否圆形按钮 boolean --- false
loading 是否加载中状态 boolean --- false
isDisable 是否朴素按钮 boolean --- false
isAutofocus 是否默认聚焦 boolean --- false
nativeType 原生 type 属性 string button / submit / reset button
btnText 模板内部文字 string --- button
文字连接组件
<VelLink />
参数 说明 类型 可选值 默认值
type 类型 string primary / success / warning / danger / info primary
isUnderline 是否下划线 boolean --- true
isDisable 是否禁用状态 boolean --- false
href 原生 href 属性 string --- ---
icon 图标类名 string --- ---
target 模板内部文字 string _blak / _parent / _top / _self _blak
linkText 模板内部文字 string --- link
单选组件
<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
参数 说明 类型 可选值 默认值
size Radio 的尺寸，仅在 border 为真时有效 string medium / small / mini ---
isDisable 是否禁用状态 boolean --- false
textColor 按钮形式的 Radio 激活时的文本颜色 string --- #ffffff
fill 按钮形式的 Radio 激活时的填充色和边框色 string --- #409EFF
radioList 配置列表 string[] --- ---
initValue 默认值 [string,number,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为操作
参数 说明 类型 可选值 默认值
tableData 显示的数据 Array --- ---
indexMethod 表格索引方法 Function --- ---
rowkey 行数据的 Key，用来优化 Table 的渲染；在使用 reserve-selection 功能与显示树形数据时，该属性是必填的。类型为 String 时，支持多层访问：user.info.id，但不支持 user.info[0].id，此种情况请使用 Function。 [string,function] --- id
load 加载子节点数据的函数，lazy 为 true 时生效，函数第二个参数包含了节点的层级信息 function --- ---
treeProps 渲染嵌套数据的配置选项 object --- {children: 'children', hasChildren: 'hasChildren'}
height Table 的高度，默认为自动高度。如果 height 为 number 类型，单位 px；如果 height 为 string 类型，则这个高度会设置为 Table 的 style.height 的值，Table 的高度会受控于外部样式 [string,number] --- ---
maxHeight Table 的最大高度。合法的值为数字或者单位为 px 的高度。 [string,number] --- 400
columns Table配置列表 string[] --- --
specialWidth 展开和序号列宽度 [string,number] --- 50
isBorder 是否带有纵向边框 boolean --- true
isStripe 是否为斑马纹 table boolean --- true
isSelection 展开和序号列宽度 boolean --- true
isShowSummary 是否在表尾显示合计行 boolean --- false
isHighlightCurrentRow 是否要高亮当前行 boolean --- true
isExpand 是否可展开 boolean --- false
isIndex 是否带索引 boolean --- false
isLazy 是否懒加载子节点数据 boolean --- false
提示信息组件
<VelTips />

slot
#content 内容插槽
参数 说明 类型 可选值 默认值
effect 默认提供的主题 string dark / light light
content 显示的内容，也可以通过 slot#content 传入 DOM string --- ---
placement Tooltip 的出现位置 string top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end top
气泡框组件
<VelPopover />

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

slot
#reference 触发 Popover 显示的 HTML 元素
#default 当isPopover时 气泡框中的内容
参数 说明 类型 可选值 默认值
confirmText 确认按钮文字 / 非isPopover时有效 string --- 确定
cancelText 取消按钮文字 / 非isPopover时有效 string --- 取消
icon Icon类名 / 非isPopover时有效 string --- el-icon-delete
iconColor Icon颜色 / 非isPopover时有效 string --- red
title 标题 string --- 确定删除此条数据吗？
placement 出现位置 / isPopover时有效 string top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end top
width 宽度 / isPopover时有效 [string,number] --- 400
trigger 触发方式 / isPopover时有效 string click/focus/hover/manual click
isHideIcon 是否隐藏 Icon / 非isPopover时有效 boolean --- false
isPopover 是否为弹出框 boolan --- false
标签组件
<VelTag />

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

slot
#default
参数 说明 类型 可选值 默认值
tagText 标签文字 [string, number, function] --- ---
type 标签类型 string success/info/warning/danger ---
color 背景色 string --- ---
size 尺寸 string medium / small / mini ---
isClosable 是否可关闭 boolean --- false
isHit 是否带边框 boolean --- false
effect 主题 string dark / light / plain light
分割线组件
<VelLine />

slot
#default
参数 说明 类型 可选值 默认值
direction 设置分割线方向 string horizontal / vertical horizontal
cntPosition 设置分割线文案的位置 string left / right / center center
icon 图标 string --- ---
lineText 分割线文字 string --- ---
弹框组件
<VelModal />

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

slot
#title 标题插槽
#footer 操作插槽
#default 当isDrawer时默认内容插槽
参数 说明 类型 可选值 默认值
mdlVisible 是否显示 Dialog，支持 .sync 修饰符 boolean --- false
width 弹框宽度 [string,number] --- 50% dlg / 30% drawer
modalClass Dialog 的自定义类名 string ---
top Dialog CSS 中的 margin-top 值 / 非isDrawer时有效 string --- 15vh
direction Drawer 打开的方向/ isDrawer时有效 string rtl / ltr / ttb / btt rtl
beforeCloseFn 关闭前的回调 function(done)，done 用于关闭 modal --- ---
isFullscreen 是否为全屏 Dialog / 非isDrawer时有效 boolean --- false
isModal 是否需要遮罩层 boolean --- true
isModalInBoday 遮罩层是否插入至 body 元素上，若为 false，则遮罩层会插入至modal的父元素上 boolean --- true
isAppendBody modal 自身是否插入至 body 元素上。嵌套的 modal 必须指定该属性并赋值为 true boolean --- false
isLockSroll 是否在modal出现时将 body 滚动锁定 / 非isDrawer时有效 boolean --- true
isCloseEscModal 是否可以通过按下 ESC 关闭 modal boolean --- true
isShowClose 是否显示关闭按钮 boolean --- true
isCenter 是否对头部和底部采用居中布局 / 非isDrawer时有效 boolean --- false
isDestroyClose 关闭时销毁 modal 中的元素 boolean --- false
isCloseClickModal 是否可以通过点击 modal背景 关闭 boolean --- true
isWithHeader 控制是否显示 header 栏, 默认为 true, 当此项为 false 时, title attribute 和 title slot 均不生效 / isDrawer时有效 boolean --- true
isDrawer 是否为抽屉 boolean --- false
titleIcon 标题图标类名 / 非isDrawer时有效 string --- el-icon-info
iconType 标题图标类型 / 非isDrawer时有效 string primary/info/warning/danger/success primary
title modal的标题，也可通过具名 slot传入 string --- 弹框
showAction 是否显示操作 string[ ] / 非isDrawer时有效 --- ['cancel','confirm']
actionList 操作列表 string[ ] / 非isDrawer时有效 --- [{key:'cancel',text:'取消'},{key:'confirm',text:'确定'},]
时间线组件
<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}"
参数 说明 类型 可选值 默认值
isReverse 指定节点排序方向，默认为正序 boolean --- false
isHideTime 是否隐藏时间戳 boolean --- center
placement 时间戳位置 string top / bottom bottom
timeLineList 时间线配置列表 string[ ] --- ---
折叠面板组件
<VelCollapse />

event
@change(val)

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

collList 
title 面板标题 string
name 唯一标志符 string
disabled 是否禁用 boolean
参数 说明 类型 可选值 默认值
initValue 当前激活的面板默认值 [string,array] --- ---
collList 折叠面板配置列表 string[ ] --- ---
isAccordion 是否手风琴模式 boolean --- true
卡片组件
<VelCard />

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

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

actionList 
icon 图标类明 string
key 唯一标志符 string
type 图标类型  string
参数 说明 类型 可选值 默认值
bodyStyle 设置 body 的样式 object --- { padding: '20px' }
shadow 设置阴影显示时机 string always / hover / never always
isHeader 是否标题模式 boolean --- false
isAction 是否操作模式 boolean --- false
isInlineBlock 是否行内块模式 boolean --- false
isClearBodyStyle 是否清空bodyStyle默认样式 boolean --- false
headerTitle 头部左边标题 string --- ---
icon 头部右边操作按钮图标 string --- ---
headerText 头部右边操作按钮文字 string --- ---
type 头部右边操作按钮类型 string text/primay/success/danger/info/warning ---
actionList isAction时操作按钮配置列表 string[ ] --- ---
步骤条组件
<VelSteps />

stepList
title 标题 string
des 描述性文字 string	
icon 图标 string	
status 设置当前步骤的状态，不设置则根据 steps 确定状态 string wait / process / finish / error / success
参数 说明 类型 可选值 默认值
initValue 默认值 number --- 0
space 每个 step 的间距，不填写将自适应间距。支持百分比。 [number,string] --- ---
direction 显示方向 string vertical/horizontal vertical
finishStatus 设置结束步骤的状态 string wait / process / finish / error / success finish
procesSstatus 设置当前步骤的状态 string wait / process / finish / error / success process
isCenter 进行居中对齐 boolean --- false
isSimple 是否应用简洁风格 boolean --- false
stepList 步骤条配置列表 string[ ] --- ---
下拉菜单组件
<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 非插槽时有效
参数 说明 类型 可选值 默认值
type 菜单按钮类型，同 Button 组件 / isSplitBtn时有效 string --- ---
trigger 触发下拉的行为 string hover, click hover
size 菜单尺寸 / isSplitBtn时有效 string medium / small / mini ---
placement 菜单弹出位置 string top/top-start/top-end/bottom/bottom-start/bottom-end bottom-end
tabindex Dropdown 组件的 tabindex number --- 0
text 非isSplitBtn时的文字描述 string --- 更多
isHideClick 是否在点击菜单项后隐藏菜单 boolean --- true
isSplitBtn 下拉触发元素呈现为按钮组 boolean --- false
页头组件
<VelPageHeader />
参数 说明 类型 可选值 默认值
type 页头图标类型 string info/warning/success/danger/primary ---
headerIcon 页头图标 string --- el-icon-d-arrow-left
headerText 页头文字 string --- 详情页面
面包屑组件
<VelBreadcrumb />

breadcrumbList
path 跳转路径 string/object
text 文字描述 string
replace 在使用 to 进行路由跳转时，启用 replace 将不会向 history 添加新记录 boolean
参数 说明 类型 可选值 默认值
separator 分隔符 string --- /
separatorIcon 图标分隔符 class string --- ---
breadcrumbList 面包屑配置列表 string[ ] --- ---
标签页组件
<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
参数 说明 类型 可选值 默认值
initValue 默认值 string --- ---
type 格类型 string card/border-card ---
isBadge 全局是否开启标志模式 boolean --- false
tabPosition 项卡所在位置 string top/right/bottom/left top
警告组件
<VelAlert />

event
@close(e) 关闭alert时触发的事件
参数 说明 类型 可选值 默认值
type 主题 string success/warning/info/error info
effect 选择提供的主题 string light/dark light
closeText 关闭按钮自定义文本 string --- ---
isIcon 是否带图标 boolan --- false
isCenter 是否居中 boolan --- false
isClosable 是否可关闭 boolan --- false
des 文字描述 string --- ---
title 标题 string --- 警告组件
描述列表组件
<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
参数 说明 类型 可选值 默认值
column 一行 Descriptions Item 的数量 number --- 3
size 列表的尺寸 string medium / small / mini ---
title 标题文本，显示在左上方 string --- ---
extra 操作区文本，显示在右上方 string --- ---
direction 排列的方向 string vertical / horizontal horizontal
isColon 是否显示冒号 boolan --- true
isBorder 是否带有边框 boolean --- false
labelClassName 自定义标签类名 string --- ---
cntClassName 自定义内容类名 string --- ---
labelStyle 自定义标签样式 object --- ---
contentStyle 自定义内容样式 object --- ---
骨架屏组件
<VelSkeleton />

slot
#template 需要渲染的loading状态插槽
#default 真实元素模板插槽
参数 说明 类型 可选值 默认值
rows 骨架屏段落数量 number 正整数 4
count 渲染多少个 template, 建议使用尽可能小的数字 number integer 1
isLoading 是否显示 skeleton 骨架屏 boolean --- false
throttle 延迟占位 DOM 渲染的时间, 单位是毫秒 number 正整数 0
className 骨架类名 / 样式需要加!important [string,array] --- ---
骨架item组件
<VelSkeletonItem />
参数 说明 类型 可选值 默认值
isP 占位元素为p样式 boolean --- false
isH1 占位元素为h1样式 boolean --- false
isH3 占位元素为h3样式 boolean --- false
isCaption 占位元素为caption样式 boolean --- false
isButton 占位元素为button样式 boolean --- false
isImage 占位元素为image样式 boolean --- false
isCircle 占位元素为circle样式 boolean --- false
isRect 占位元素为rect样式 boolean --- false
className 骨架item类名/样式需要加!important [string,array] --- ---
头像组件
<VelAvatar />

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

slot
#default 自定义头像展示内容
参数 说明 类型 可选值 默认值
size 设置头像的大小 [number,string] number / large / medium / small large
icon 设置头像的图标类型，参考 Icon 组件 string --- ---
shape 设置头像的形状 string circle / square circle
src 图片头像的资源地址 string --- ---
srcSet 以逗号分隔的一个或多个字符串列表表明一系列用户代理使用的可能的图像 string --- ---
alt 描述图像的替换文本 string --- ---
fit 当展示类型为图片的时候，设置图片如何适应容器框 string fill / contain / cover / none / scale-down cover
标记组件
<VelBadge />

slot
#default
参数 说明 类型 可选值 默认值
value 显示值 [number,string] --- 0
max 最大值，超过最大值会显示 '{max}+'，要求 value 是 number 类型 number --- ---
isDot 小圆点 boolean --- false
type 类型 string primary / success / warning / danger / info ---
isInline 是否行内展示 boolean --- false
分页组件
<VelPagination />

event
@paginationFn(type,val) 条数改变和页面改变方法
参数 说明 类型 可选值 默认值
size 每页显示条目个数 number] --- 20
pageSizes 每页显示个数选择器的选项设置 array --- [20,50,100,200]
page 页数 number --- 1
layout 组件布局，子组件名用逗号分隔 string 'total, sizes, prev, pager, next, jumper' 'total, sizes, prev, pager, next, jumper'
pagerCount 页码按钮的数量，当总页数超过该值时会折叠 number 大于等于 5 且小于等于 21 的奇数 7
pageCount 总页数，total 和 page-count 设置任意一个就可以达到显示页码的功能；如果要支持 page-sizes 的更改，则需要使用 total 属性 number --- ---
prevText 替代图标显示的上一页文字 string --- ---
nextText 替代图标显示的下一页文字 string --- ---
isDisable 是否禁用 boolean --- false
isHide 只有一页时是否隐藏 boolean --- false
isBackground 是否带背景颜色 boolean --- true
isSmall 是否使用小型分页样式 boolean --- false
树形组件
<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)
参数 说明 类型 可选值 默认值
expandedKeys 默认展开的节点的 key 的数组 array --- ---
checkedKeys 默认勾选的节点的 key 的数组 array --- ---
renderFn 树节点的内容区的渲染 Function Function(h, { node, data, store } --- ---
filterFn 对树节点进行筛选时执行的方法，返回 true 表示这个节点可以显示，返回 false 则表示这个节点会被隐藏 Function(value, data, node) --- ---
allowDrop 拖拽时判定目标节点能否被放置。type 参数有三种情况：'prev'、'inner' 和 'next'，分别表示放置在目标节点前、插入至目标节点和放置在目标节点后 Function(draggingNode, dropNode, type) --- ---
allowDrag 判断节点能否被拖拽 Function(node) --- ---
indent 相邻级节点间的水平缩进，单位为像素 number --- 16
iconClass 自定义树节点的图标 string --- ---
isShowCheckBox 节点是否可被选择 boolean --- false
isLazy 是否懒加载子节点，需与 load 方法结合使用 boolean --- false
isExpandAll 是否默认展开所有节点 boolean --- false
isHighlightCurrent 是否高亮当前选中节点 boolean --- false
isAccordion 是否每次只打开一个同级树节点展开 boolean --- false
isDraggable 是否开启拖拽节点功能 boolean --- false
isRednerAfterExpand 是否在第一次展开某个树节点后才渲染其子节点 boolean --- true
isExpandClickNode 是否在点击节点的时候展开或者收缩节点， 默认值为 true，如果为 false，则只有点箭头图标的时候才会展开或者收缩节点。 boolean --- true
isCheckClickNode 是否在点击节点的时候选中节点，默认值为 false，即只有在点击复选框时才会选中节点。 boolean --- false
isAutoExpandParent 展开子节点的时候是否自动展开父节点 boolean --- true
isCheckStrictly 在显示复选框的情况下，是否严格的遵循父子不互相关联的做法，默认为 false boolean --- false
props 节点属性 object --- { children: 'children', label: 'label' }
nodeKey 每个树节点用来作为唯一标识的属性，整棵树应该是唯一的 string --- id
treeList 展示数据 string[ ] --- ---
进度条组件
<VelProgress />
参数 说明 类型 可选值 默认值
status 进度条当前状态 string success/exception/warning ---
format 指定进度条文字内容 function(percentage) --- ---
height 进度条的宽度，单位 px number --- 6-
isInset 进度条显示文字内置在进度条内（只在 type=line 时可用） boolean --- false
color 进度条背景色（会覆盖 status 状态颜色） string/function/array --- ''
type 进度条类型 line/circle/dashboard --- line
isText 是否显示进度条文字内容 boolean --- true
bothShape circle/dashboard 类型路径两端的形状 string butt/round/square round
percentage 百分比（必填） number 0-100 0
穿梭框组件
<VelTransfer />

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

slot
#default 默认内容插槽  slot-scope="{ option }"
#lfooter 左边底部插槽
#rfooter 右边底部插槽
参数 说明 类型 可选值 默认值
initValue 默认值 Array --- ---
placeholder 搜索框占位符 string --- 请输入搜索内容
leftChecked 初始状态下左侧列表的已勾选项的 key 数组 array --- [ ]
rightChecked 初始状态下右侧列表的已勾选项的 key 数组 array --- [ ]
titles 自定义列表标题 array --- ['列表 1', '列表 2']
btnTexts 自定义按钮文案 array --- [ ]
format 列表顶部勾选状态文案 object{noChecked, hasChecked} --- { noChecked: '${checked}/${total}', hasChecked: '${checked}/${total}' }
props 数据源的字段别名 object{key, label, disabled} --- ---
targetOrder 右侧列表元素的排序策略：若为 original，则保持与数据源相同的顺序；若为 push，则新加入的元素排在最后；若为 unshift，则新加入的元素排在最前 string original / push / unshift original
renderFn 自定义数据项渲染函数function(h, option) --- ---
filterFn 自定义搜索方法 function --- ---
isFilter 是否可搜索 boolean --- false
transferList 穿梭框配置列表 string[ ] --- ---
时间日期组件组件
<VelDateTime />

event
@focus()
@change(val)
@blur()
参数 说明 类型 可选值 默认值
initValue 默认值 [string,date,array] --- ---
DateTimeOptions 时间日期默认配置 Object --- 动态改变
isCtrl 是否使用箭头进行时间选择/ isTimePicker 时有效 boolean false
placeholder 非范围选择时的占位内容 string --- ---
rangeText 选择范围时的分隔符 string --- -
startText 范围选择时开始日期的占位内容 string --- 开始时间
endText 范围选择时结束日期的占位内容 string --- 结束时间
isClearable 是否可清空 boolean --- true
size 输入框尺寸 string medium / small / mini ---
align 对齐方式 string left / center / right left
valueFormat 可选，仅TimePicker时可用，绑定值的格式。不指定则绑定值为 Date 对象 string --- yyyy-MM-dd
beforeIcon 自定义头部图标的类名 string --- 动态改变
clearIcon 自定义清空图标的类名 string --- el-icon-circle-close
defaultTime 范围选择时选中日期所使用的当日内具体时刻/isDate时有效 string[] 数组，长度为 2，每项值为字符串，形如1200，第一项指定开始日期的时刻，第二项指定结束日期的时刻，不指定会使用时刻 0000 ---
format 显示在输入框中的格式 / 默认和isDate时有效 见element 详情 --- yyyy-MM-dd
defaultValue 可选，选择器打开时默认显示的时间 date 可被new Date()解析 ---
selectableRange 可选时间段，例如'1800 - 2000'或者传入数组['0900 - 1200', '1400 - 1800'] string / array --- ---
isWeek 是否为周组件 / isDate 时有效 boolean --- false
isMonth 是否为月组件 / isDate 时有效 boolean --- false
isYear 是否为年组件 / isDate 时有效 boolean --- false
isDates 是否为多个日期组件 / isDate 时有效 boolean --- false
isDaterange 是否为日期范围组件 / isDate 时有效 boolean --- false
isMonthrange 是否为月份范围组件/ isDate 时有效 boolean --- false
isDate 是否为日期组件 boolean --- false
isTimePicker 否为时间范围组件 boolean --- false
isDateTime 否为日期时间组件/ isDate 时有效 boolean --- false
isDatetimeRange 否为日期时间范围组件/ isDate 时有效 boolean --- false
isReadonly 完全只读 boolean --- false
isDisable 禁用 boolean --- false
isUnlinkPanels 在范围选择器里取消两个日期面板之间的联动 / isDate时有效 boolean --- false
滑块组件
<VelSlider />

event
@change(val)
@input(val)
参数 说明 类型 可选值 默认值
initValue 默认值 number --- ---
formatTip 格式化 tooltip message function(value) --- ---
step 步长 number --- 1
max 最大值 number --- 100
min 最小值 number 0
inputSize 输入框的尺寸 string large / medium / small / mini small
height Slider 高度，竖向模式时必填 string --- --
label 屏幕阅读器标签 Slider --- --
debounce 输入时的去抖延迟，毫秒，仅在show-input等于true时有效 number --- 300
tipClass tooltip 的自定义类名 string --- ---
marks 标记， key 的类型必须为 number 且取值在闭区间 [min, max] 内，每个标记可以单独设置样式 object --- ---
isTip 是否显示 tooltip boolean --- false
isDisable 禁用 boolean --- false
isVertical 是否竖向模式 boolean --- false
isRange 是否为范围选择 boolean --- false
isStops 是否显示间断点 boolean --- false
isInput 是否显示输入框，仅在非范围选择时有效 boolean --- false
isInputCtrl 在显示输入框的情况下，是否显示输入框的控制按钮 boolean --- false
开关组件
<VelSwitch />

event
@change(val)
参数 说明 类型 可选值 默认值
initValue 默认值 [Boolean,String,Number] --- false
activeColor switch 打开时的背景色 string --- #409EFF
inactiveColor switch 关闭时的背景色 string --- #C0CCDA
activeText switch 打开时的文字描述 string --- ---
inactiveText switch 关闭时的文字描述 string --- ---
activeValue switch 打开时的值 [Boolean,String,Number] --- true
inactiveValue switch 关闭时的值 [Boolean,String,Number] --- false
width switch 的宽度（像素） number --- 40
activeIconClass switch 打开时所显示图标的类名，设置此项会忽略 active-text string --- ---
inactiveIconClass switch 关闭时所显示图标的类名，设置此项会忽略 inactive-text string --- ---
name switch 对应的 name 属性 string --- ---
isValidate 改变 switch 状态时是否触发表单的校验 boolean --- true
isDisable 禁用 boolean --- false
级联选择器组件
<VelCascader />

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

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

折叠面板只有效的参数
initValue
props
cascaderList
参数 说明 类型 可选值 默认值
initValue 默认值 --- --- ---
isDisable 禁用 boolean --- false
props 配置选项 详情看element Object --- --
isOnlyLast 输入框中是否显示选中值的完整路径 boolean --- false
isCollapseTags 多选模式下是否折叠Tag boolean --- false
isFilter 是否可搜索选项 boolean --- false
size 尺寸 string medium / small / mini ---
filterFn 自定义搜索逻辑，第一个参数是节点node，第二个参数是搜索关键词keyword，通过返回布尔值表示是否命中 function(node, keyword) --- ---
placeholder 输入框占位文本 string --- 请选择
separator 选项分隔符 string --- /
debounce 搜索关键词输入的去抖延迟，毫秒 number --- 300
popperClass 自定义浮层类名 string --- ---
berforeFilterFn 筛选之前的钩子，参数为输入的值，若返回 false 或者返回 Promise 且被 reject，则停止筛选 function(val) --- ---
isClearable 是否可清空 boolean --- true
isPanel 是否为级联面板 boolean --- false
cascaderList 级联选择器数据 string[ ] --- ---
计数器组件
<VelInputNum />

event
@focus()
@change(val)
@blur()
参数 说明 类型 可选值 默认值
initValue 默认值 number --- 0
min 设置计数器允许的最小值 number --- -Infinity
max 设置计数器允许的最大值 number --- Infinity
label 输入框关联的label文字 string --- ---
step 计数器步长 number --- 1
size 计数器尺寸 string large, small ---
ctrlPosition 控制按钮位置 string right ---
name 原生属性 string --- ---
placeholder 输入框默认 placeholder string --- ---
isDisable 禁用 boolean --- false
isStepStrictly 是否只能输入 step 的倍数 boolean --- false
isCtrl 是否使用控制按钮 boolean --- true
多选组件
<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
参数 说明 类型 可选值 默认值
initValue 默认值 array --- ---
min 可被勾选的 checkbox 的最小数量 number --- ---
max 可被勾选的 checkbox 的最大数量 number --- ---
isDisable 全局禁用 boolean --- false
textColor 按钮形式的 Checkbox 激活时的文本颜色 string --- #ffff
fill 按钮形式的 Checkbox 激活时的填充色和边框色 string --- #409EFF
checkboxList 多选组件配置列表 string[] --- ---
输入框组件
<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时有效
参数 说明 类型 可选值 默认值
initValue 默认值 string --- ---
placeholder 文字提示 string --- ---
beforeIcon 输入框头部图标 string --- ---
afterIcon 输入框尾部图标 string --- ---
type 类型 string text，textarea 和其他 原生 input 的 type 值 text
rows 输入框行数，只对 type="textarea" 有效 number --- 2
autosize 自适应内容高度，只对 type="textarea" 有效，可传入对象，如，{ minRows: 2, maxRows: 6 } [Object,boolean] --- false
size 输入框尺寸，只在 type!="textarea" 时有效 string --- medium / small / mini
popperClass Autocomplete 下拉列表的类名 / isShowAutocomplete时有效 string --- ---
maxlength 原生属性，最大输入长度 number --- ---
minlength 原生属性，最小输入长度 number --- ---
autocomplete 原生属性，自动补全 string on/off on
name 原生属性 string --- ---
max 原生属性，设置最大值 number --- ---
min 原生属性，设置最小值 number --- ---
step 原生属性，设置输入字段的合法数字间隔 number --- ---
resize 控制是否能被用户缩放 string none, both, horizontal, vertical ---
form 原生属性 string --- ---
label 输入框关联的label文字 string --- ---
tabindex 输入框的tabindex string --- ---
valueKey 输入建议对象中用于显示的键名 / isShowAutocomplete时有效 string --- value
debounce 获取输入建议的去抖延时 / isShowAutocomplete时有效 number --- 300
placement 菜单弹出位置/ isShowAutocomplete时有效 string top / top-start / top-end / bottom / bottom-start / bottom-end bottom-start
isOnfocus 原生属性，自动获取焦点 boolean --- false
isSelectUnmatched 在输入没有任何匹配建议的情况下，按下回车是否触发 select 事件 boolean/ isShowAutocomplete时有效 --- false
isHadeLoading 是否隐藏远程加载时的加载图标 / isShowAutocomplete时有效 boolean --- false
isHighlightFirstItem 是否默认突出显示远程搜索建议中的第一项/ isShowAutocomplete时有效 boolean --- false
isShowAutocomplete 是否为自动补全组件 boolean --- false
isDisable 禁用 boolean --- false
isClearable 是否有清空按钮 boolean --- true
isPassword 是否为密码框 boolean --- false
isReadonly 只读 boolean --- false
isAutofocus 是否自动聚焦 boolean --- false
isLimit 是否显示输入字数统计，只在 type = "text" 或 type = "textarea" 时有效 boolean --- false
下拉框组件
<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'}
]}
参数 说明 类型 可选值 默认值
initValue 初始值 [string,boolean,number] --- ---
placeholder 下拉框文字提示 string --- ---
filterFn 自定义搜索方法 function -- ---
remoteFn 远程搜索方法 function -- ---
valueKey 作为 value 唯一标识的键名，绑定值为对象类型时必填 string --- value
size 输入框尺寸 string medium/small/mini ---
limit 多选时用户最多可以选择的项目数，为 0 则不限制 number --- 0-
autocomplete select input 的 autocomplete 属性 string on / off off
name select input 的 name 属性 string --- ---
loadingText 远程加载时显示的文字 string --- 加载中
selectList 下拉框配置 string[] --- ---
isClearable 是否可以清空选项 boolean --- true
isMultiple 是否多选 boolean --- false
isCollapseTags 多选时是否将选中值按文字的形式展示 boolean --- false
isFilter 是否可搜索 boolean --- false
isReKeyword 多选且可搜索时，是否在选中一个选项后保留当前的搜索关键词 boolean --- false
isAutodropdown 对于不可搜索的 Select，是否在输入框获得焦点后自动弹出选项菜单 boolean --- false
isRemote 是否为远程搜索 boolean --- false
isFirstoption 在输入框按下回车，选择第一个匹配项。需配合 filterable 或 remote 使用 boolean --- false
isCreate 是否允许用户创建新条目，需配合 filterable 使用 boolean --- false
isDisable 是否禁用 boolean --- false

现有组件

    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,