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(row[linkHrefKey]){ return Boolean },labelType为link时有效| |otherHandle|Function|否||其他处理函数，function(row[propKey]){ 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事件