# @beisen-platform/dropdown-list
> 表单下拉选择器，多选或单选，可直接用于表单中
Latest version **1.0.34-rc.8** (published 2019-11-06) · ISC license · 0 weekly downloads
## Install
```sh
npm install @beisen-platform/dropdown-list
pnpm add @beisen-platform/dropdown-list
yarn add @beisen-platform/dropdown-list
bun add @beisen-platform/dropdown-list
```
## Health
**Score 15/100 (F)** — status: abandoned.
Positive: no vulnerabilities.
Warnings: low downloads; no types; no esm support.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 1.0.34-rc.8 |
| Published | 2019-11-06 |
| First published | 2018-11-28 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 706.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | beisencorp |
## Links
- npm: https://www.npmjs.com/package/@beisen-platform/dropdown-list
- Repository: http://gitlab.beisencorp.com/ux-cnpm/ux-drop-down-list
- npm.io page: https://npm.io/package/@beisen-platform/dropdown-list
## Dependencies (3)
- [@beisen-platform/dropdown](https://npm.io/package/@beisen-platform/dropdown.md)
- [@beisen-platform/input-box](https://npm.io/package/@beisen-platform/input-box.md)
- [@beisen-platform/common-mount](https://npm.io/package/@beisen-platform/common-mount.md)
## Recent versions
- 1.0.34-rc.8 (latest) — 2019-11-06
- 1.0.34-rc.7 — 2019-10-28
- 1.0.34-rc.6 — 2019-09-20
- 1.0.34-rc.5 — 2019-09-09
- 1.0.34-rc.4 — 2019-09-06
- 1.0.34-rc.2 — 2019-08-08
- 1.0.34-rc.1 — 2019-08-06
- 1.0.34 — 2019-07-22
- 1.0.33 — 2019-07-11
- 1.0.32 — 2019-06-28
- 1.0.31 — 2019-06-24
- 1.0.30 — 2019-06-12
- 1.0.29 — 2019-06-05
- 1.0.28 — 2019-06-05
- 1.0.27 — 2019-06-03
- … 22 more at https://npm.io/package/@beisen-platform/dropdown-list/versions
## README
# DropDownList使用说明
## 项目运行
1. cnpm install 或 npm install cnpm使用教程
2. npm run dev （开发环境打包 port:8080）
3. npm run test （测试用例）
4. npm run build （生产环境打包）
## DropDownList参数
```javascript
const props = {
/**
* input框前的文字标识
* 可为空
*/
title: '',
/**
* 没有值的时候显示的内容
*/
placeholder:'',
/**
* 默认值
*/
defaultValue: '',
errorStatus: false,
errorMsg: '出错了~~~！',
helpMsg: '',
hasClosebtn: true,
/**
* 下拉菜单为单选或者多选，true为多选，false为单选,默认为false
*/
multiple: true,
/**
* 限制选择数量
* 当超过该数量后，其它的则禁用
*/
limitCount:5,
/**
* 多选时是否显示input
*/
hasInput: true,
/**
* 当为true时且有数据时不渲染input
*/
showInput: true,
/**
* label位置
* true 左边
* false 在上边
*/
lablePos: true,
/**
* label中文字对齐方式
* true 左对齐
* false 右对齐
*/
lableTxt: false,
/**
* 每项的内容
*/
children: [
{
value: 0,
text: '查看详情',
isActive: false,
isChecked: false,
tipText: "哎哎多撒多撒
多撒多撒多所" //如果有该字段，则鼠标移入文字会一直显示tip,tip内容为该字段内容
}
],
/**
* 是否显示
*/
hidden: false,
/**
* 在列表中新增一条数据 “空 (未填写)”
* 默认为false
*/
hasEmptyData: true,
/**
* 当获取异步数据会自动渲染
*/
autoShowPanel: true,
/**
* 渲染下拉列表
*/
showPanel: false,
/**
* 是否禁用
*/
disabled: false,
readonly: false,
/**
* 是否显示必选星号
*/
required: true,
/**
* 右侧下拉按钮的样式
*/
iconName: 'pc-sys-arrowdown-nomal-svg',
/**
* 点击后事件回调；
* @param event：事件
* @param target: 事件对象
* @param val：抛出的值
*/
onClick: function (event, target, val) { console.log(val) },
/**
* 失去焦点后事件回调
* @param event：事件
* @param val：input抛出的值
*/
onBlur: function (event, val) { console.log(val) },
/**
* change后事件回调
* @param event
* @param target: 事件对象
* @param val：input中值改变的值
*/
onChange: function (event, target, val) { console.log(event); console.log(target); console.log(val); },
/**
* 获取焦点后事件回调
* @param event：事件
* @param val：抛出的input中的值
*/
onFocus: function (event, val) {
console.log('focuse')
self.test2()
},
onClose: function (status) { console.log(status) }
}
```
## DropDownList调用方法
1.安装npm组件包
```
npm install @beisen/dropdown-list --save-dev
```
2.引用组件
```javascript
import DropDownList from "@beisen/dropdown-list"
```
3.传入参数
该参数为上述参数，传入方式使用: {...参数}
```javascript
{
"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 (
)
}
```
---
_Source: https://npm.io/package/@beisen-platform/dropdown-list · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._