DropDownList使用说明
项目运行
-
cnpm install 或 npm install cnpm使用教程
-
npm run dev （开发环境打包 port:8080）
-
npm run test （测试用例）
-
npm run build （生产环境打包）
DropDownList参数
{
"title":"title" //input框前的文字标识，可为空
// ,"placeholder":"" /**没有值的时候显示的内容(string)**/
,"defaultValue":"111111" //默认值
,"errorStatus": false
,"errorMsg":"出错了~~~！"
,"helpMsg":"312321"
,"hasClosebtn":true
,"multiple": true //下拉菜单为单选或者多选，true为多选，false为单选,默认为false
,"hasInput": true //多选时是否显示input
,"showInput": true //当有数据时且为true时不渲染input
,"lablePos": true //label位置，true时在左边，false在上边
,"lableTxt": false //label中文字对齐方式，true左对齐，false右对齐
,"children":[
{
"value":0
,"text":"查看详情"
,"isActive":false
,"isChecked":false
}
,{
"value":1
,"text":"性质维度"
,"isActive":false
,"isChecked":false
}
,{
"value":2
,"text":"地域维度"
,"isActive":false
,"isChecked":false
}
,{
"value":3
,"text":"包含下aaaaaaaaaaaaaaaaaaaaa属"
,"isActive":false
,"isChecked":false
}
,{
"value":4
,"text":"包含下属"
,"isActive":false
,"isChecked":false
},{
"value":5
,"text":"包含下属1"
,"isActive":false
,"isChecked":false
} ,{
"value":6
,"text":"包含下属2"
,"isActive":false
,"isChecked":false
} ,{
"value":7
,"text":"包含下属3"
,"isActive":false
,"isChecked":false
} ,{
"value":8
,"text":"包含下属4"
,"isActive":false
,"isChecked":false
} ,{
"value":9
,"text":"包含下属5"
,"isActive":false
,"isChecked":false
} ,{
"value":10
,"text":"包含下属6"
,"isActive":false
,"isChecked":false
} ,{
"value":11
,"text":"包含下属7"
,"isActive":false
,"isChecked":false
}
] /** MenuItem **/
,"hidden":false //是否显示\
,'hasEmptyData':true // 在列表中新增一条数据 “空 (未填写)”，默认为false
,'autoShowPanel':true //当获取异步数据会自动渲染
,"showPanel": false //渲染下拉列表
,"disabled":false //是否禁用
,"readonly":false
,"required":true //是否显示必选星号
,"iconName":"pc-sys-arrowdown-nomal-svg" //右侧下拉按钮的样式
,"onClick":function(event, target, val){console.log(val)} /**点击后事件回调；event：事件，target: 事件对象，val：抛出的值**/
,"onBlur":function(event, val){console.log(val)} /**失去焦点后事件回调event：val：input抛出的值**/
,"onChange":function(event, target, val){console.log(event);console.log(target);console.log(val);} /**change后事件回调event：事件，target: 事件对象，val：input中值改变的值**/
,"onFocus":function(event, val){
console.log('focuse')
self.test2();
} /**获取焦点后事件回调event：事件，val：抛出的input中的值**/
,"onClose":function(status){console.log(status)}
}
DropDownList调用方法
1.安装npm组件包
npm install @beisen/dropdown-list --save-dev
2.引用组件
import DropDownList from "@beisen/dropdown-list"
3.传入参数
该参数为上述参数，传入方式使用: {...参数}
{
"title":"title" //input框前的文字标识，可为空
// ,"placeholder":"" /**没有值的时候显示的内容(string)**/
,"defaultValue":"111111" //默认值
,"errorStatus": false
,"errorMsg":"出错了~~~！"
,"helpMsg":"312321"
,"hasSearch":false //是否显示下拉框
,"PromptMsg":"PromptMsg" //提示问题
,"hasClosebtn":true //是否显示Input框上的 删除按钮
,"limitCount": 5 //限制选择数量，当超过该数量后，其它的则禁用
,"multiple": true //下拉菜单为单选或者多选，true为多选，false为单选,默认为false
,"hasInput": true //多选时是否显示input
,"showInput": true //当有数据时且为true时不渲染input
,"lablePos": true //label位置，true时在左边，false在上边
,"lableTxt": false //label中文字对齐方式，true左对齐，false右对齐
,"children":[
{
"value":0
,"text":"查看详情"
,"isActive":false
,"isChecked":false
}
,{
"value":1
,"text":"性质维度"
,"isActive":false
,"isChecked":false
,"onlyShowInput":true //该参数为true的话，该数据仅在多选的input框中显示，不在下拉中显示
}
,{
"value":2
,"text":"地域维度"
,"isActive":false
,"isChecked":false
}
,{
"value":3
,"text":"包含下aaaaaaaaaaaaaaaaaaaaa属"
,"isActive":false
,"isChecked":false
}
,{
"value":4
,"text":"包含下属"
,"isActive":false
,"isChecked":false
},{
"value":5
,"text":"包含下属1"
,"isActive":false
,"isChecked":false
} ,{
"value":6
,"text":"包含下属2"
,"isActive":false
,"isChecked":false
} ,{
"value":7
,"text":"包含下属3"
,"isActive":false
,"isChecked":false
} ,{
"value":8
,"text":"包含下属4"
,"isActive":false
,"isChecked":false
} ,{
"value":9
,"text":"包含下属5"
,"isActive":false
,"isChecked":false
} ,{
"value":10
,"text":"包含下属6"
,"isActive":false
,"isChecked":false
} ,{
"value":11
,"text":"包含下属7"
,"isActive":false
,"isChecked":false
}
] /** MenuItem **/
,"hidden":false //是否显示\
,'autoShowPanel':true //当获取异步数据会自动渲染
,"showPanel": false //渲染下拉列表
,"disabled":false //是否禁用
,"readonly":false
,"required":true //是否显示必选星号
,"iconName":"pc-sys-arrowdown-nomal-svg" //右侧下拉按钮的样式
,"onClick":function(event, target, val){console.log(val)} /**点击后事件回调；event：事件，target: 事件对象，val：抛出的值**/
,"onBlur":function(event, val){console.log(val)} /**失去焦点后事件回调event：val：input抛出的值**/
,"onChange":function(event, target, val){console.log(event);console.log(target);console.log(val);} /**change后事件回调event：事件，target: 事件对象，val：input中值改变的值**/
,"onFocus":function(event, val){
console.log('focuse')
self.test2();
} /**获取焦点后事件回调event：事件，val：抛出的input中的值**/
,"onClose":function(status){console.log(status)}
}
render () {
return (
<DropDownList {...this.state.DropDownData} />
)
}