Exciting news!Announcing our $4.6M Series Seed. Learn more
Socket
LoveBlogFAQ
Install
Log in

@beisen-platform/dropdown-list

Package Overview
Dependencies
3
Maintainers
1
Versions
37
Issues
File Explorer

Advanced tools

@beisen-platform/dropdown-list

表单下拉选择器,多选或单选,可直接用于表单中

    1.0.34-rc.8latest

Version published
Maintainers
1
Yearly downloads
8,634
increased by19.47%

Weekly downloads

Readme

Source

DropDownList使用说明

项目运行

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

  2. npm run dev (开发环境打包 port:8080)

  3. npm run test (测试用例)

  4. npm run build (生产环境打包)

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: "哎哎多撒多撒<br/>多撒多撒多所" //如果有该字段,则鼠标移入文字会一直显示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) } }

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} /> ) }
Socket

Product

Subscribe to our newsletter

Get open source security insights delivered straight into your inbox. Be the first to learn about new features and product updates.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc