ButtonGroup 使用说明
项目运行
-
cnpm install 或 npm install cnpm使用教程
-
npm run dev （开发环境打包 port:8080）
-
npm run test （测试用例）
-
npm run build （生产环境打包）
ButtonGroup参数
//children 参数可以是BaseButton、DropdownButtons、IconButton ,注意需要写明buttonName的类型
示例：三个BaseButton按钮，分别是星期一、星期二、星期三
state= {
GroupData: {
"children": [{
"buttonName": "BaseButton" //按钮名称 BaseButton IconButton DropDownButton
,
"bsStyle": "default"
/**按钮类型(string)。参数：
1.默认:“default”
2.弱化按钮：“weaken”
3.连接按钮：“link”
**/
,
"bsSize": "default"
/**按钮尺寸(string)。参数：
1.默认:“default”
2.小按钮：“small”
3.块状按钮：“block”
**/
,
"active": false
/**是否选中(Boolean)。参数：
1.默认未选中:false
2.选中:true
**/
,
"disabled": false
/**是否禁用(Boolean)。参数：
1.默认不禁用:false
2.禁用:true
**/
,
"href": "" /**如果该字段有定义且非空，return（<a/>）,否则return（</button>）**/ ,
"title": "星期一" /**显示文本(string)**/ ,
"onClick": function(target,onClick,btnInfo) {
console.log(target); //输出e
console.log(onClick); //输出true
console.log(btnInfo); //输出this.state
},/**点击后事件回调**/
"hidden": false //是否显示按钮
}, {
"buttonName": "BaseButton",
"bsStyle": "default"
/**按钮类型(string)。参数：
1.默认:“default”
2.弱化按钮：“weaken”
3.连接按钮：“link”
**/
,
"bsSize": "default"
/**按钮尺寸(string)。参数：
1.默认:“default”
2.小按钮：“small”
3.块状按钮：“block”
**/
,
"active": false
/**是否选中(Boolean)。参数：
1.默认未选中:false
2.选中:true
**/
,
"disabled": false
/**是否禁用(Boolean)。参数：
1.默认不禁用:false
2.禁用:true
**/
,
"href": "" /**如果该字段有定义且非空，return（<a/>）,否则return（</button>）**/ ,
"title": "星期一" /**显示文本(string)**/ ,
"onClick": function(target,onClick,btnInfo) {
console.log(target); //输出e
console.log(onClick); //输出true
console.log(btnInfo); //输出this.state
},/**点击后事件回调**/
"hidden": false //是否显示按钮
}, {
"buttonName": "BaseButton",
"bsStyle": "default"
/**按钮类型(string)。参数：
1.默认:“default”
2.弱化按钮：“weaken”
3.连接按钮：“link”
**/
,
"bsSize": "default"
/**按钮尺寸(string)。参数：
1.默认:“default”
2.小按钮：“small”
3.块状按钮：“block”
**/
,
"active": false
/**是否选中(Boolean)。参数：
1.默认未选中:false
2.选中:true
**/
,
"disabled": false
/**是否禁用(Boolean)。参数：
1.默认不禁用:false
2.禁用:true
**/
,
"href": "" /**如果该字段有定义且非空，return（<a/>）,否则return（</button>）**/ ,
"title": "星期一" /**显示文本(string)**/ ,
"onClick": function(target,onClick,btnInfo) {
console.log(target); //输出e
console.log(onClick); //输出true
console.log(btnInfo); //输出this.state
},/**点击后事件回调**/
"hidden": false //是否显示按钮
}]
}
}
IconButton
{
"buttonName" :"IconButton"
,"bsStyle":"default" /**按钮类型(string)。参数：
1.默认:“default”
2.弱化按钮：“weaken”
3.连接按钮：“link”,将返回一个<a></a>
**/
,"active":false //是否激活
,"disabled":false //是否禁用
,"href":"" //返回<a>的链接
,"title":"测试11" //返回<a>的title
,"onClick":function(val){console.log(val)}
,"iconName":"sys-icon-spread"
,"hidden":false //是否显示按钮
}
DropDownButton
{
"buttonName" :"DropDownButton"
,"title":"测试测试测试" //下拉按钮上的文字
,"type":"text" //下拉按钮上的文字类型 是文本，还是icon
,"bsSize":"default" /**按钮尺寸(string)。参数：
1.默认:“default”
2.小按钮：“small”
**/
,"bsStyle":"weaken" /**按钮类型(string)。参数：
1.默认:者“default”
2.弱化按钮：“weaken”
**/
,"children":[
{
"value":0
,"text":"查看详情"
,"active":false
,"isChecked":false
}
,{
"value":1
,"text":"性质维度"
,"active":false
,"isChecked":false
}
,{
"value":2
,"text":"地域维度"
,"active":false
,"isChecked":false
}
,{
"value":3
,"text":"包含下属"
,"active":false
,"isChecked":false
}
,{
"value":4
,"text":"不包含下属"
,"active":false
,"isChecked":false
},{
"value":5
,"text":"不包含下属"
,"active":false
,"isChecked":false
},{
"value":6
,"text":"不包含下属"
,"active":false
,"isChecked":false
},{
"value":7
,"text":"不包含下属"
,"active":false
,"isChecked":false
},{
"value":8
,"text":"不包含下属"
,"active":false
,"isChecked":false
},{
"value":9
,"text":"不包含下属"
,"active":false
,"isChecked":false
},{
"value":10
,"text":"不包含下属"
,"active":false
,"isChecked":false
},{
"value":11
,"text":"不包含下属"
,"active":false
,"isChecked":false
}
] /** MenuItem **/
,"open":false /** is open or not 首次渲染列表是否已展开**/
,"disabled":false //是否禁用
,"hidden":false //是否显示按钮
,"iconName":"pc-sys-arrowdown-nomal-svg" //icon图标
,"maxWidth":"" //最大宽度，默认为"" ,超出后，超出的部分显示... ,仅对文本模式有用
,"direction":"right-down" /**
MenuList spread direction,one of:
1."left-top"
2."right-top"
3."left-down"
4."right-down"
**/
,"onClick":function(val){console.log(val)} /**点击后时间回调**/
}
ButtonGroup调用方法
1.安装npm组件包
npm install @beisen/ButtonGroup --save-dev
2.引用组件
import ButtonGroup from "@beisen/ButtonGroup"
- 传入参数
该参数为上述参数，传入方式使用: {...参数}
render () {
return (
<ButtonGroup {...this.state.GroupData} />
)
}