DropDownList使用说明

项目运行

1. cnpm install 或 npm install cnpm使用教程

2. npm run dev （开发环境打包 port:8080）

3. npm run test （测试用例）

4. npm run build （生产环境打包）

DropDownList参数

``
{
"title":"测试测试测试测试" //input框前的文字标识，可为空
,"placeholder":"搜索" /没有值的时候显示的内容(string)/
,"defaultValue":"" //默认值
,"openListView":false // 是否打开下拉框
,"errorStatus":true // 错误状态
,"errorMsg":"出错了~~~！" //错误信息
,multiple: false //下拉菜单为单选或者多选，true为多选，false为单选,默认为false
,"children":[
{
"value":0
,"text":"查看详情"
,"isActive":false //点击效果，默认为false
,"isChecked":false //是否被选中，默认为false
}
,{
"value":1
,"text":"性质维度"
,"isActive":false
,"isChecked":false
}
,{
"value":2
,"text":"地域维度"
,"isActive":false
,"isChecked":false
}
,{
"value":3
,"text":"包含下属"
,"isActive":false
,"isChecked":false
}
,{
"value":4
,"text":"包含下属"
,"isActive":false
,"isChecked":false
}
] / MenuItem /
,"hidden":false //是否显示\
,"disabled":false //是否禁用
,"required":false //是否显示必选星号
,"iconName":"pc-sys-arrowdown-nomal-svg" //右侧下拉按钮的样式
,"onClick":function(event, target, val){console.log(val.value)} /点击后事件回调；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(val)} /获取焦点后事件回调event：事件，val：抛出的input中的值/
}
`

DropDownList调用方法

1.安装npm组件包

`
npm install @beisen/DropDownList --save-dev
`

2.引用组件

`
import DropDownList from "@beisen/DropDownList"
`
3.传入参数

该参数为上述参数，传入方式使用: {...参数}

`
{
"title":"测试测试测试测试" //input框前的文字标识，可为空
,"placeholder":"搜索" /没有值的时候显示的内容(string)/
,"defaultValue":"" //默认值
,"openListView":false // 是否打开下拉框
,"errorStatus":true // 错误状态
,"errorMsg":"出错了~~~！" //错误信息
,multiple: false //下拉菜单为单选或者多选，true为多选，false为单选,默认为false
,"children":[
{
"value":0
,"text":"查看详情"
,"isActive":false //点击效果，默认为false
,"isChecked":false //是否被选中，默认为false
}
,{
"value":1
,"text":"性质维度"
,"isActive":false
,"isChecked":false
}
,{
"value":2
,"text":"地域维度"
,"isActive":false
,"isChecked":false
}
,{
"value":3
,"text":"包含下属"
,"isActive":false
,"isChecked":false
}
,{
"value":4
,"text":"包含下属"
,"isActive":false
,"isChecked":false
}
] / MenuItem /
,"hidden":false //是否显示\
,"disabled":false //是否禁用
,"required":false //是否显示必选星号
,"iconName":"pc-sys-arrowdown-nomal-svg" //右侧下拉按钮的样式
,"onClick":function(event, target, val){console.log(val.value)} /点击后事件回调；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(val)} /获取焦点后事件回调event：事件，val：抛出的input中的值/
}
render () {
return (

)
}
``