DropDownButton 使用说明
项目运行
-
cnpm install 或 npm install cnpm使用教程
-
npm run dev (开发环境打包 port:8080)
-
npm run test (测试用例)
-
npm run build (生产环境打包)
DropDownButton参数
{
title: '测试测试测试',
type: 'text',
textIcon: true,
bsSize: 'default',
bsStyle: 'weaken',
isBtnStyle: false,
deviationLeft: 140,
panelWidth: '137px',
rightAlign: true,
children: [{
"value": 0,
"text": '查看详情查看详情查看详情查看详情',
"active": false,
"isChecked": false,
"isDisabled": true
}, {
"value": 1,
"text": '性质维度',
"active": false,
"isChecked": false,
"isDisabled": false
}],
open: false,
disabled: false,
hidden: false,
iconName: 'pc-sys-dropdownmin-nomal-svg',
activeName: 'pc-sys-dropdownmin-active-svg',
maxWidth: '',
autoDirection: true,
direction: 'left-down',
itemClick: function (retFun) {
let promise = new Promise(function (resolve, reject) {
resolve([{
value: 0,
text: '查看详情',
active: false,
isChecked: false
}]);
});
promise.then(function (data) {
retFun(data)
})
},
onClick: function (value, target, onClick, btnInfo) {]
console.log(value);
console.log(target);
console.log(onClick);
console.log(btnInfo);
}
}
DropDownButton调用方法
1.安装npm组件包
npm install @beisen/dropdown-button --save-dev
2.引用组件
import DropDownButton from "@beisen/dropdown-button"
3.传入参数
该参数为上述参数,传入方式使用: {...参数}
{
"title":"测试"
,"type":"icon"
,"bsSize":"default"
,"bsStyle":"default"
,"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":true
}
,{
"value":4
,"text":"不包含下属"
,"active":false
,"isChecked":false
}
]
,"open":false
,"disabled":false
,"hidden":false
,"iconName":"pc-sys-arrowdown-nomal-svg"
,"maxWidth":"20px"
,"autoDirection":false
,"direction":"right-down"
,"onClick": function(value,target,onClick,btnInfo, btn) {
console.log(value);
console.log(target);
console.log(onClick);
console.log(btnInfo);
console.log(btn)
}
}
render () {
return (
<DropDownButton {...this.state} />
)
}