精控能源UI组件库

安装

npm install ipotisedge-ui

使用

// 引入 ipotisedge-ui
import ipotisedgeUI from 'ipotisedge-ui'

app.use(ipotisedgeUI)

组件库

• [Button](#Button 按钮)
• [ButtonGroup](#ButtonGroup 按钮组)
• [CheckboxGroup](#CheckboxGroup 多选按钮组)
• [DateTime](#DateTime 日期事件选择器)
• [Dialog](#Dialog 模态框)
• [Drawer](#Drawer 抽屉)
• [Input](#Input 输入框)
• [Pagination](#Pagination 分页器)
• [RadioGroup](#RadioGroup 单选)
• [Select](#Select 下拉选择框)
• [Switch](#Switch 开关)
• [Tabs](#Tabs 标签页)
• [Table](#Table 表格)
• [Textarea](#Textarea 多行输入框)

Button 按钮

使用

<jk-button><jk-button>

属性

| 属性名 | 说明 | 类型 | 默认值 | 备注 | | -------- | -------- | ------- | ------ | ------------------------------------------------------------ | | Text | 文字按钮 | Boolean | false | | | disabled | 禁用 | Boolean | false | | | color | 颜色 | String | - | 自定义按钮颜色 | | type | 类型 | Enum | - | primary（#3B8BF6）success（#3B8BF6）warning（#FF8C00）danger（#FF5555）info（#5E6E82A6） | | size | 禁用 | Enum | - | large,default,small |

事件

| 事件名 | 说明 | 类型 | | ------ | -------- | -------- | | click | 点击事件 | Function |

ButtonGroup 按钮组

使用

<jk-button-group></jk-button-group>

属性

| 属性名 | 说明 | 类型 | 默认值 | 备注 | | ------------- | -------- | -------------- | ------ | ---------- | | v-model | 绑定值 | String, Number | - | | | height | 高度 | String | 32px | 必须带单位 | | width | 宽度 | String | - | 必须带单位 | | options | 选项 | Array | [] | | | options.label | 选项文案 | String | - | | | options.value | 选项值 | String, Number | - | |

事件

暂无

CheckboxGroup 多选按钮组

使用

<jk-checkbox-group></jk-checkbox-group>

属性

| 属性名 | 说明 | 类型 | 默认值 | 备注 | | ------------- | -------- | -------------- | ------ | ---- | | v-model | 绑定值 | String, Number | - | | | options | 选项 | Array | [] | | | options.label | 选项文案 | String | - | | | options.value | 选项值 | String, Number | - | |

事件

暂无

DateTime 日期事件选择器

使用

<jk-date-time></jk-date-time>

属性

| 属性名 | 说明 | 类型 | 默认值 | 备注 | | ----------- | -------- | -------------- | ------ | ---- | | v-model | 绑定值 | String, Number | - | | | placeholder | 占位文字 | String | ‘’ | | | disabled | 禁用 | boolean | false | |

事件

| 事件名 | 说明 | 类型 | | ------ | -------------- | -------- | | change | 值发生改变事件 | Function |

Dialog 模态框

使用

<jk-dialog></jk-dialog>

属性

| 属性名 | 说明 | 类型 | 默认值 | 备注 | | ------------ | ---------- | ------- | ------ | -------------- | | v-model | 绑定值 | Boolean | false | 控制显示和隐藏 | | title | 占位文字 | String | 标题 | | | width | 宽度 | String | 500px | 必须带单位 | | customHeader | 自定义顶部 | Boolean | false | | | showFooter | 展示底部 | Boolean | true | |

事件

| 事件名 | 说明 | 类型 | | ------ | --------------------------------------- | ---- | | header | 自定义头部插槽，customHeader必须为 true | Slot | | footer | 底部插槽，showFooter必须为 true | Slot |

Drawer 抽屉

使用

<jk-drawer></jk-drawer>

属性

| 属性名 | 说明 | 类型 | 默认值 | 备注 | | ---------- | ------------ | ------- | ------ | ----------------------- | | v-model | 绑定值 | Boolean | false | 控制显示和隐藏 | | title | 占位文字 | String | 标题 | | | width | 宽度 | String | 500px | 必须带单位 | | showHeader | 显示顶部 | Boolean | true | | | direction | 抽屉打开方向 | Enum | rtl | rtl，ltr，ttb，btt，rtl |

事件

| 事件名 | 说明 | 类型 | | ------ | -------- | ---- | | footer | 底部插槽 | Slot |

Input 输入框

使用

<jk-input></jk-input>

属性

| 属性名 | 说明 | 类型 | 默认值 | 备注 | | ----------- | -------- | -------------- | ------ | ---------- | | v-model | 绑定值 | String, Number | - | | | placeholder | 占位文字 | String | 请输入 | | | width | 宽度 | String | 180px | 必须带单位 | | height | 高度 | String | 32px | 必须带单位 | | type | 类型 | String | text | | | disabled | 禁用 | boolean | false | |

事件

| 事件名 | 说明 | 类型 | | ------ | -------- | -------- | | enter | 回车时间 | Function | | input | 输入事件 | Function |

Pagination 分页器

使用

<jk-pagination></jk-pagination>

属性

| 属性名 | 说明 | 类型 | 默认值 | 备注 | | -------------------- | ---------------------------- | ------ | ------------------------------- | ------------------------------------------------------------ | | v-model:current-page | 当前页 | Number | 1 | | | v-model:page-size | 单页条目数 | Number | 10 | | | total | 总条数 | Number | 0 | | | layout | 组件布局，子组件名用逗号分隔 | String | total, sizes, prev, pager, next | string (consists of sizes, prev, pager, next, jumper, ->, total, slot) | | pageSizes | 每页显示个数选择器的选项设置 | Array | [10, 20, 50, 100] | |

事件

| 事件名 | 说明 | 类型 | | --------------- | ------------------ | -------- | | onCurrentChange | 当前页值发生变化 | Function | | onSizeChange | 单页条目数发生变化 | Function |

RadioGroup 单选

使用

<jk-radio-group></jk-radio-group>

属性

| 属性名 | 说明 | 类型 | 默认值 | 备注 | | ------------- | -------- | -------------- | ------ | ---- | | v-model | 绑定值 | String, Number | - | | | options | 选项 | Array | [] | | | options.label | 选项文案 | String | - | | | options.value | 选项值 | String, Number | - | |

事件

暂无

Select 下拉选择框

使用

<jk-select></jk-select>

属性

| 属性名 | 说明 | 类型 | 默认值 | 备注 | | ------------- | -------- | -------------- | ------ | ---------- | | v-model | 绑定值 | String, Number | - | | | placeholder | 占位文字 | String | 请输入 | | | width | 宽度 | String | 180px | 必须带单位 | | height | 高度 | String | 32px | 必须带单位 | | clearable | 清楚选项 | Boolean | false | | | disabled | 禁用 | boolean | false | | | options | 选项 | Array | [] | | | options.label | 选项文案 | String | - | | | options.value | 选项值 | String, Number | - | |

事件

| 事件名 | 说明 | 类型 | | ------ | -------------- | -------- | | change | 值发生改变事件 | Function |

Switch 开关

使用

<jk-switch></jk-switch>

属性

| 属性名 | 说明 | 类型 | 默认值 | 备注 | | ------------- | -------------- | -------------- | ------------------------ | ------------------- | | v-model | 绑定值 | String, Number | - | | | activeColor | 激活状态颜色 | String | #3B8BF6 | | | inactiveColor | 未激活状态颜色 | String | rgba(94, 110, 130, 0.20) | | | activeText | 激活文字 | String | - | | | inactiveText | 未激活文字 | String | - | | | disabled | 禁用 | Boolean | false | | | loading | 加载状态 | Boolean | false | | | size | 尺寸 | String | | large,default,small |

事件

| 事件名 | 说明 | 类型 | | ------ | -------------- | -------- | | change | 值发生改变事件 | Function |

Tabs 标签页

使用

<jk-tabs></jk-tabs>

属性

| 属性名 | 说明 | 类型 | 默认值 | 备注 | | ------------- | -------- | -------------- | ------ | ---------- | | v-model | 绑定值 | String, Number | - | | | width | 宽度 | String | - | 必须带单位 | | height | 高度 | String | 32px | 必须带单位 | | fontSize | 字体大小 | String | 16px | 必须带单位 | | options | 选项 | Array | [] | | | options.label | 选项文案 | String | - | | | options.value | 选项值 | String, Number | - | |

事件

暂无

Table 表格

使用

<jk-table></jk-table>

属性

| 属性名 | 说明 | 类型 | 默认值 | 备注 | | -------------------- | ---------------- | ------- | ------ | ---------- | | data | 表格数据 | Array | [] | | | config | 表格配置 | Object | {} | | | config.height | 高度 | String | - | 必须带单位 | | config.selectable | 打开勾选 | Boolean | false | | | config.column | 列的配置 | Array | [] | | | config.column.prop | 列数据对应的 key | String | - | | | config.column.label | 表头 | String | - | | | config.column.width | 列的宽度 | String | - | | | config.column.render | 自定义列的内容 | dom | - | |

事件

| 事件名 | 说明 | 类型 | | ----------------- | ---------------- | -------- | | onSelectionChange | 勾选的值发生变化 | Function |

Textarea 多行输入框

使用

<jk-textarea></jk-textarea>

属性

| 属性名 | 说明 | 类型 | 默认值 | 备注 | | ----------- | -------- | -------------- | ------ | ---------- | | v-model | 绑定值 | String, Number | - | | | placeholder | 占位文字 | String | 请输入 | | | width | 宽度 | String | 100% | 必须带单位 | | height | 高度 | String | 32px | 必须带单位 | | false | 禁用 | boolean | false | |

事件

| 事件名 | 说明 | 类型 | | ------ | -------- | -------- | | enter | 回车时间 | Function |