Lzg-ctrl NPM | npm.io

npm i lzg-ctrl

import LzgCtrl from "lzg-ctrl";
//参数有{lang:'zh'}
Vue.use(LzgCtrl);

[demo](https://blog.csdn.net/xnlzg/article/details/109254643)

## 扩展属性

//全局加载层 this.$lzgLoading(text, callback(loading)); //全局Message 类型 success/warning/info/error,默认类型 info this.$lzgMessage(message, type); //全局Alert this.$lzgAlert(content, title, callback); //全局Confirm this.$lzgConfirm(content, title, confirmCallback, cancelCallback); //全局Notification 类型 success/warning/info/error,默认success 位置 top-right/top-left/bottom-right/bottom-left,默认top-right this.$lzgNotify(message, title, type, position); //全局排序 datas:数据 col:列字段 type:类型 asc desc this.$lzgOrderBy(datas, col, type); //全局分组 this.$lzgGroupBy(datas, function(item) { return item.字段 }); //全局下载文件---文件流 this.$lzgDownloadFile(filename, data); //移除对象 this.$lzgRemoveObj(Array, Object);

## lzg-icon 图标

Attributes（属性）

属性 | 说明 | 类型 | 默认值 icon | 编码 | String | ""

## lzg-button 按钮控件

Attributes（属性）

Events（事件）

事件名 | 说明 | 参数 click | 按钮点击事件 | { code, label, file }

Slot

事件名 | 说明 | 参数 icon | 自定义图标

## lzg-form 表单
![表单](https://img-blog.csdnimg.cn/20200729105934520.png)

Attributes（属性）

属性 | 说明 | 类型 | 默认值 labelPosition | 表单域标签的位置 right/left/top | String | "right" labelWidth | 表单域标签的宽度 | String | "100px" items | 项集合 | Array | [] buttons | 按钮集合 | Array | [] buttonAlign | 按钮集合位置 right/left/center | String | "right" loading | 加载状态 | Boolean | false isSearch | 是否添加查询按钮 | Boolean | false searchButton | 查询按钮配置 | Object | {code: "BtnSearch",label: "查询",icon: "el-icon-search",sort: -1,type: "success"}

items Attributes（属性）以下是自定义属性,其它属性可以参考对应组件属性一样可以用

属性 | 说明 | 类型 | 默认值 type | 类型(radio/checkbox/input/number/select/cascader/switch/slider/time/date/datetime/rate/color/avatar/upload/selecttree/selectpopup) | String | "" subtype| 子类型input(password/textarea)time(timerange)date(year/month/date/dates/week/datetime/datetimerange/daterange/monthrange) upload(text/picture/picture-card) |String| "" key | 字段 | String | "" label | 名称 | String | "" value | 默认值 | String | "" operator | 过滤操作符 | String | "" 按照自己系统定义 min | 最小值 | Number | 1 max | 最大值 | Number | 2 precision | 数值精度 | Number | 0 step | 计数器步长 | Number | 1 multiple | 是否多选 | Boolean | false collapseTags | 多选时是否将选中值按文字的形式展示 | Boolean | false checkStrictly | 多选时是否选中任意节点 | Boolean | false valueFormat | 绑定值的格式 | String | "" isRange | 是否区间 | String | "" filter | 是否可搜索| Boolean | false isGroup| 是否分组 | Boolean | false button | 是否按钮模式(radio/checkbox) | Boolean | false placeholder| 输入框占位文本 | String | "" rules| 表单验证规则 | Array | [] options| 选项集合 | Array | [] props | 配置选项 | Object | {key: "key",value: "value",children: "children",disabled: false} span | 栅格占据的列数 | Number | 8 url | url | String | "" accept | 文件类型 | String | "" resultFormat | 返回结果格式化 | Function | null function(result,file) fileSize | 文件大小 | Number | 2 pickerOptions|当前时间日期选择器特有的选项参考下表| Object | {} color | 颜色 | String,Array | 类型为 rate("#99A9BF", "#F7BA2A", "#FF9900") upload("primary")

buttons Attributes（属性）

具体属性请查看lzg-button属性

Method（方法）

方法名 | 说明 | 参数 setValue | 设置值 | { key: "值" } key 等于Items项里面的key,多个逗号隔开 getValue | 获取值 | 返回 Object对象 setOptions | 设置选项集合 | 列子1:{key: "Items项里面的key",options: [],} 列子2:[{key: "Items项里面的key",options: []},{key: "Items项里面的key",options: []}]

Events（事件）

事件名 | 说明 | 参数 click | 按钮点击事件,用于查询表单 | { code, label, file,conds } change | 表单里组件值改变事件 | key,value

## lzg-list 列表
![列表](https://img-blog.csdnimg.cn/20200729110135942.png)

Attributes（属性）更多配置具体请看element官方文档的table属性及lzg-form属性

属性 | 说明 | 类型 | 默认值 searchItems | 查询项集合 | Array | [] searchButtons | 查询按钮集合 | Array | [] listItems | 列表项集合 | Array | [] listButtons | 列表按钮集合 | Array | [] isPage | 是否显示分页 | Boolean | true isLocalPage | 是否本地分页 | Boolean | true isSelection | 是否多选 | Boolean | false defaultConditions | 默认查询条件 | Array | null {Value:"值",Key:"字段",Operator:"操作符(Equal)"} disabled | 是否禁用 | Boolean | false btnShowEvent | 操作列按钮显示判断 | Function | null function({ btn, row}) defaultDataLoad | 是否第一次加载数据 | Boolean | true dataLoad | 数据 | Function, Array, Object | null Function(查看列子) Array([]) Object({ datas, total }) rowKey | 行数据的 Key | Function, String | "id" height | 高度 | Number | 0 templateColExt | 模板列扩展属性或方法 | Object | {} isNo | 是否显示序号 | Boolean | false operFixed | 操作列位置 | String | right operType | 操作列类型 | String | link (link,button,icon) operWidth | 操作列宽度 | Number | 0 不设置自适应 isSearch | 是否添加查询按钮 | Boolean | true showSummary | 是否在表尾显示合计行 | Boolean | false sumText | 合计行第一列的文本 | String | 合计 pageSizes | 每页显示个数选择器的选项设置 | Number[] | 20, 50, 100, 200 pageSize | 每页显示条目个数 | Number | 20 pageIndex | 当前页数 | Number | 1 pageTotal | 总条目数 | Number | 0 pageLayout | 组件布局，子组件名用逗号分隔 | String | "total, sizes, prev, pager, next, jumper"

searchItems Attributes（属性）

请看lzg-form的items属性

searchButtons和listButtons Attributes（属性）

具体属性请查看lzg-button属性

listItems Attributes（属性）更多配置具体请看element官方文档的Table-column 属性

Method（方法）

方法名 | 说明 | 参数 reset | 重置数据 | params | {Value:"值",Key:"字段",Operator:"操作符(Equal)"} setSearchValue | 设置查询值 | { key: "值" } key 等于searchItems项里面的key,多个逗号隔开 getSearchValue | 获取查询值 | 返回 Object对象 setSearchOptions | 设置选项集合 | 列子1:{key: "searchItems项里面的key",options: [],} 列子2:[{key: "searchItems项里面的key",options: []},{key: "searchItems项里面的key",options: []}] getSelectDatas | 获取选中数据 | { addData, delData } setSelectDatas | 设置选中数据 | [] rowKey设置的字段值 getUpperRow | 获取上一行数据 | {} getNextRow | 获取下一行数据 | {} searchChange | 表单里组件值改变事件 | key,value

Events（事件）

事件名 | 说明 | 参数 btnClick | 按钮点击事件 | { code, label, file,row }

## lzg-select-tree 下拉树
![下拉树](https://img-blog.csdnimg.cn/20200729110219968.png)

Attributes（属性）

属性 | 说明 | 类型 | 默认值 data | 树结构数据 | Array | [] defaultProps | 配置选项 | Object | {label: "name", value: "id", children: "children"} multiple | 是否多选 | Boolean | false clearable | 是否可清空选择 | Boolean | true collapseTags | 配置多选时是否将选中值按文字的形式展示 | Boolean | false nodeKey | 每个树节点用来作为唯一标识的属性，整棵树应该是唯一的 | String | "id" checkStrictly | 显示复选框情况下，是否严格遵循父子不互相关联 | Boolean | false

Events（事件）

事件名 | 说明 | 参数 popoverHide | 浮动层隐藏 | checkedIds, checkedData

## lzg-popup-select 弹出选择
![弹出选择](https://img-blog.csdnimg.cn/20200729110309862.png)

Attributes（属性）

属性 | 说明 | 类型 | 默认值 type | 类型 | String | "input/dropdown/popover" title | 标题 | String | "" searchItems | 查询项集合 | Array | [] listItems | 列表项集合 | Array | [] isSelection | 是否多选 | Boolean | false dataLoad | 数据 | Function, Array, Object | null Function(查看列子) Array([]) Object({ datas, total }) width | 宽度 | String | "70%" height | 高度 | Number | 600 keyField | 指定作为键值的字段 | String | "id" showField | 指定显示内容的字段 | String | "name"

## lzg-fold-card 折叠卡片
![折叠卡片](https://img-blog.csdnimg.cn/20201224153833131.png)

Attributes（属性）

Events（事件）

事件名 | 说明 | 参数 click | 按钮点击事件 | isExpand(是否展开)

## lzg-img-cropper 图片裁剪
![图片裁剪](https://img-blog.csdnimg.cn/20201202160347300.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hubHpn,size_16,color_FFFFFF,t_70)

Attributes（属性）

属性 | 说明 | 类型 | 默认值 autoCropWidth | 截图框宽度 | Number | 320 autoCropHeight | 截图框高度 | Number | 180 fixedBox | 固定截图框大小 | Boolean | false showTip | 提示内容是否显示| Boolean | true imageWidth | 裁剪后图片显示宽度 | Number | 320 imageHeight | 裁剪后图片显示高度 | Number | 180 uploadLoad | 裁剪后图片上传方法 | Function(file(原文件),cropFile(裁剪文件)) | null 返回格式return new Promise((resolve, reject) => { resolve({url: ""});}); defaultUrl | 图片加载失败后显示的默认图片| String | "" isCropper | 是否显示裁剪| Boolean | true accept | 图片格式| String | '.gif,.jpeg,.jpg,.png' size | 文件大小| Number | 5

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago