0.0.1 • Published 1 year ago
kd-web-ui
安装教程
npm install kd-web-ui;
import KdWebUI from 'kd-web-ui';
Vue.use(KdWebUI);
组件说明
kd-dialog
属性
属性名 | 值类型 | 是否必须 | 默认值 | 说明 |
---|
title | String | 否 | | 标题 |
open | Boolean | 是 | | 是否打开 |
width | String | 否 | 700px | 宽度 |
hasSelfDialog | Boolean | 否 | false | 是否有留白样式 |
hasFooter | Boolean | 否 | false | 是否有底部按钮组 |
hasSave | Boolean | 否 | false | 底部按钮组是否暂存按钮 |
事件
事件名 | 参数 | 说明 |
---|
onClose | - | 当关闭dialog时触发事件,点击取消按钮也会触发 |
onConfirm | - | 当点击确定按钮时触发事件 |
onSave | - | 当点击暂存按钮时触发事件 |
kd-pagination
属性
属性名 | 值类型 | 是否必须 | 默认值 | 说明 |
---|
total | Number | 是 | | 总数 |
page | Number | 否 | 1 | 当前页码 |
limit | Number | 否 | 20 | 每页显示数量 |
pageSizes | Array | 否 | 10, 20, 30, 50 | 每页显示数量备选项 |
pagerCount | Number | 否 | 7 | 最大显示页码个数 |
layout | String | 否 | total, prev, pager, next | 布局,可选项total, prev, pager, next, sizes, jumper |
background | Boolean | 否 | true | 是否有背景色 |
事件
事件名 | 参数 | 说明 |
---|
pagination | {page:Number,limit:Number} | 当limit/page改变时会触发 |
kd-search-condition
属性
属性名 | 值类型 | 是否必须 | 默认值 | 说明 |
---|
options | Array | 是 | | 搜索条件配置项 |
labelWidth | String | 否 | - | label宽度 |
fromEleWidth | String | 否 | | 表单元素宽度 |
noReset | Boolean | 否 | false | 是否没有重置按钮 |
条件配置项options
属性名 | 值类型 | 是否必须 | 默认值 | 说明 |
---|
label | String | 是 | | 显示文本 |
key | String | 是 | | 条件字段 |
type | String | 是 | | 输入方式, 备选:input, select, treeselect, checkbox, year, month, date, week, datetime, datetimerange, daterange, monthrange |
placeholder | String | 否 | 请选择/请输入 + label | 非日期范围类的placeholder |
dataOptions | Array | 否 | | 当type为select/checkbox/treeselect时是必须,包含对象{value:String/Number,label:String} |
startPlaceholder | String | 否 | 开始日期/开始时间 | 日期范围类的start-placeholder |
endPlaceholder | String | 否 | 结束日期/结束时间 | 日期范围类的end-placeholder |
separator | String | 否 | - | 日期范围类的分隔符 |
valueFormat | String | 否 | | 日期类的值格式 |
format | String | 否 | | 日期类的值显示格式 |
defaultValue | Any | 否 | | 设定默认值 |
事件
事件名 | 参数 | 说明 |
---|
onSearch | {各条件项key:value} | 当点击搜索/重置按钮时会触发 |
kd-search-result
属性
属性名 | 值类型 | 是否必须 | 默认值 | 说明 |
---|
loading | Boolean | 否 | false | 是否显示loading |
hasMultSelect | Boolean | 否 | false | 是否有多选 |
removeHoverStyle | Boolean | 否 | false | 是否移除鼠标hover效果 |
resultData | Array | 是 | | 数据集,当使用tree展示时,必须有id,children字段 |
columnsConfig | Array | 是 | false | 列配置 |
列配置columnsConfig
属性名 | 值类型 | 是否必须 | 默认值 | 说明 |
---|
label | String | 是 | | 列显示文本 |
propKey | String | 是 | | 列数据key,对应数据集 |
align | String | 否 | center | 对齐方式 |
width | String | 否 | | 列宽 |
showOverflowTooltip | Boolean | 否 | false | 是否带有tooltip |
fixed | String | 否 | | 列固定方式 |
action | Array | 否 | | 操作按钮组 |
labelType | String | 否 | | 数据显示方式,备选项:link,template |
linkHrefKey | String | 否 | | link的href的列key,labelType为link时有效 |
linkableFunc | Function | 否 | | link是否可用,function(rowlinkHrefKey){ return Boolean },labelType为link时有效 |
otherHandle | Function | 否 | | 其他处理函数,function(rowpropKey){ return 数据值 } |
children | Array | 否 | | 嵌套列配置 |
操作按钮组action
属性名 | 值类型 | 是否必须 | 默认值 | 说明 |
---|
label | String | 是 | | 按钮显示文本 |
hasPermi | Array | 否 | | 权限控制 |
disabledFunc | Function | 否 | | 定义按钮是否可用,function(row) {return Boolean} |
clickEvent | Function | 否 | | 定义按钮点击事件,function(row){} |
事件
事件名 | 参数 | 说明 |
---|
onSelectedChange | selection:Array | 当选择项发生变化时会触发该事件 |
onSelected | selection:Array | 当手动勾选数据行的 Checkbox时触发的事件 |
onSelectedAll | selection:Array | 当手动勾选全选 Checkbox 时触发的事件 |
onClickLink | row, 该列配置项 | 当点击link数据时触发事件 |
kd-content-layout
属性
属性名 | 值类型 | 是否必须 | 默认值 | 说明 |
---|
hasCatalogue | Boolean | 否 | true | 是否有目录区域 |
kd-action-group
属性
属性名 | 值类型 | 是否必须 | 默认值 | 说明 |
---|
actionConfig | Object | 是 | | 配置项 |
配置项actionConfig说明
属性名 | 值类型 | 是否必须 | 默认值 | 说明 |
---|
add | Object | 否 | | 新增按钮配置项 |
edit | Object | 否 | | 编辑按钮配置项 |
delete | Object | 否 | | 删除按钮配置项 |
upload | Object | 否 | | 导入按钮配置项 |
download | Object | 否 | | 导出按钮配置项 |
通用配置项
属性名 | 值类型 | 是否必须 | 默认值 | 说明 |
---|
label | String | 否 | 新增/编辑/删除/导入/导出 | 显示文本 |
clickEvent | Function | 否 | | 点击事件处理函数 |
kd-group-catalogue
属性
属性名 | 值类型 | 是否必须 | 默认值 | 说明 |
---|
placeholder | String | | 请输入 | 占位符 |
addBtnConfig | Object | | | 新增按钮配置项 |
treeData | Array | 是 | | tree数据源,{id,label,children} |
hideEditBtnFunc | Function | | | 定义编辑按钮是否隐藏,function(nodeData) {return Boolean} |
hideDeleteBtnFunc | Function | | | 定义删除按钮是否隐藏,function(nodeData) {return Boolean} |
defaultExpandDeep | Number | | 3 | tree默认展开到深度,备选:2-5 |
新增按钮配置项addBtnConfig说明
属性名 | 值类型 | 是否必须 | 默认值 | 说明 |
---|
label | String | 否 | 新增 | 显示文本 |
hasPermi | Array | 否 | | 权限控制 |
clickEvent | Function | 否 | | 点击事件处理函数 |
事件
事件名 | 参数 | 说明 |
---|
onClickNode | nodeData:Object | 当点击树节点时会触发该事件 |
onClickEdit | nodeData:Object | 当点击编辑图标时触发的事件 |
onClickDelete | nodeData:Object | 当点击删除图标时触发的事件 |
方法
方法名 | 参数 | 返回值 | 说明 |
---|
getTreeRef | | 树ref对象 | 获取树ref对象 |
kd-file-upload-dialog
属性
属性名 | 值类型 | 是否必须 | 默认值 | 说明 |
---|
title | String | 否 | | 标题 |
uploading | Boolean | | false | 是否显示loading |
fileFmt | Array | | [] | 允许导入的文件格式,空数组表示任意格式 |
templateConfig | Object | | {label: "下载模板",show: true} | 模板下载配置项 |
tipOption | Object | | {label: "提示:允许导入任意格式文件!",show: true} | tip配置项,label中显示的文件格式会随fileFmt的配置变化 |
事件
事件名 | 参数 | 说明 |
---|
onDownloadTemplate | | 当点下载模板按钮时会触发该事件 |
onClose | | 当关闭dialog时触发事件,点击取消按钮也会触发 |
onConfirm | | 当点击确定按钮时触发事件 |
v-debounce 防抖指令
- 预期:Function
- 参数:无
- 说明:只监听click事件,以触发事件处理函数,使用该指令则不必再绑定click事件