Security News
Cloudflare Adds Security.txt Setup Wizard
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
@beisen-platform/dropdown-list
Advanced tools
cnpm install 或 npm install cnpm使用教程
npm run dev (开发环境打包 port:8080)
npm run test (测试用例)
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} />
)
}
FAQs
We found that @beisen-platform/dropdown-list demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
Security News
The Socket Research team breaks down a malicious npm package targeting the legitimate DOMPurify library. It uses obfuscated code to hide that it is exfiltrating browser and crypto wallet data.
Security News
ENISA’s 2024 report highlights the EU’s top cybersecurity threats, including rising DDoS attacks, ransomware, supply chain vulnerabilities, and weaponized AI.