Ipotisedge-ui NPM

精控能源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