@beisen-platform/lookup-v2
Advanced tools
cnpm install 或 npm install cnpm使用教程
npm run dev （开发环境打包 port:8080）
npm run test （测试用例）
npm run build （生产环境打包）
{
onChange: (val) => {}, //输入框改变事件
value: this.state.inputValue, //单选默认值
title: 'LookUpV2',
required: true,
readOnly: false, //是否只读
disabled: false, //输入框是否禁用
status: 'search', //edit search 默认edit
helpMsg: 'sds', //帮助信息，默认为空
isShowFindAll: true, //渲染“全部查找”按钮，默认为true
onlyShowAdvanced: true, //值为true时，直接触发高级模式回调，不会出现下拉弹层，点击输入框等同于点击高级模式；值为false时，在输入框输入文本后，出现下拉弹层。
isNotAllow: true, //渲染无权限界面
// errorMsg: 'dfsfdsfsdf',
// promptMsg: 'sfsfsf',
multiple: false, //单选或多选模式
listValue: [ //列表中的值
[{isShowCustomViewButton:true, avatars: {100022: {hasAvatar: true, small: "//cache.tita.gift/Image/100013/4233e527dcd24ea594614b707f21cb1d_s.jpg",color: '#8dc8ea'}}, name:"Address", text:"11海淀11海淀11海淀11海淀11海淀11海淀11海淀11海淀11海11海淀11海淀11海淀11海淀11海淀11海淀淀", value:"海11海淀11海淀11海11海淀11海淀11海淀11海淀11海淀11海淀11海淀11海淀淀11海淀11海淀淀"}],
[{isShowCustomViewButton:true, avatars: {100022: {hasAvatar: true, small: "//cache.tita.gift/Image/100013/4233e527dcd24ea594614b707f21cb1d_s.jpg",color: '#8dc8ea'}}, name:"Address", text:"11淀11海淀11海淀11海淀11海淀11海淀11海11海淀11海淀11海淀11海淀11海淀11海淀11海淀11海11海淀11海海淀", value:"海淀"}],
[{isShowCustomViewButton:true, avatars: {100022: {hasAvatar: true, small: "//cache.tita.gift/Image/100013/4233e527dcd24ea594614b707f21cb1d_s.jpg",color: '#8dc8ea'}}, name:"Address", text:"11海淀", value:"海淀"}],
[{isShowCustomViewButton:true,
avatars: {100022:
{hasAvatar: true
, small: "//cache.tita.gift/Image/100013/4233e527dcd24ea594614b707f21cb1d_s.jpg",color: '#8dc8ea'}
}
, name:"Address", text:"11海淀", value:"海淀"
},
{isShowCustomViewButton:true,
avatars: {100022:
{hasAvatar: true
, small: "//cache.tita.gift/Image/100013/4233e527dcd24ea594614b707f21cb1d_s.jpg",color: '#8dc8ea'}
}
, name:"Address", text:"11海淀", value:"海淀"
}
],
[{isShowCustomViewButton:true, avatars: {100022: {hasAvatar: true, small: "//cache.tita.gift/Image/100013/4233e527dcd24ea594614b707f21cb1d_s.jpg",color: '#8dc8ea'}}, name:"Address", text:"11海淀", value:"海淀"}],
[{isShowCustomViewButton:true, avatars: {100022: {hasAvatar: true, small: "//cache.tita.gift/Image/100013/4233e527dcd24ea594614b707f21cb1d_s.jpg",color: '#8dc8ea'}}, name:"Address", text:"11海淀", value:"海淀"}],
[{isShowCustomViewButton:true, avatars: {100022: {hasAvatar: true, small: "//cache.tita.gift/Image/100013/4233e527dcd24ea594614b707f21cb1d_s.jpg",color: '#8dc8ea'}}, name:"Address", text:"11海淀11海淀11海淀11海淀11海淀11海淀11海11海淀11海淀11海淀11海淀11海淀11海淀11海淀11海11海淀11海淀11海淀11海淀11海淀11海淀11海淀11海11海淀11海淀", value:"海淀"}],
[{isShowCustomViewButton:true, avatars: {100022: {hasAvatar: true, small: "//cache.tita.gift/Image/100013/4233e527dcd24ea594614b707f21cb1d_s.jpg",color: '#8dc8ea'}}, name:"Address", text:"11海淀", value:"海淀"}]
],
isFetching: false, //loading状态，默认为false
multiValue: [//多选的值
{
name:"122sadsadsadsadasdsadsadsadsa3"
},
{
name:"122sadsadsadsadasdsadsadsadsa3"
},
{
name:"122sadsadsadsadasdsadsadsadsa3"
},
{
name:"122sadsadsadsadasdsadsadsadsa3"
},
{
name:"122sadsadsadsadasdsadsadsadsa3"
}
],
listClick: (event, data) => {},//下拉层的点击事件
multipleClear: (index) => {},
lablePos: false, //label位置，true时在左边，false在上边
lableTxt: false, //label中文字对齐方式，true左对齐，false右对齐
onFindAll: () => {console.log('onFindAll execute')} //当onlyShowAdvanced为true时，输入框获取焦点触发函数
}
npm install @beisen/lookup-v2 --save-dev
import LookUpV2 from "@beisen/lookup-v2"
传入参数
该参数为上述参数，传入方式使用: {...参数}
class Demo extends Component{
constructor(props) {
super(props);
this.multiple = true;
this.multiValue = [
{
name:"122sadsadsadsadas&dsadsadsadsa3"
},
{
name:"122sadsadsadsadasdsadsadsadsa3"
},
{
name:"122sadsadsadsadasdsadsadsadsa3"
},
{
name:"122sadsadsadsadasdsadsadsadsa3"
},
{
name:"122sadsadsadsadasdsadsadsadsa3"
}
];
this.listValue = [
[{name:"Address", text:null, value:""}],
[{name:"Address", text:null, value:""}],
[{name:"Address", text:null, value:""}],
[{name:"Address", text:null, value:""}],
[{name:"Address", text:null, value:""}],
[{name:"Address", text:null, value:""}],
[{name:"Address", text:null, value:""}]
];
this.state = {
inputValue: '海淀',
showapp:true
};
this.commounMount = new CommounMount({
containerId: 'BS_lookupV2_wrapper',
fixed: true
})
}
inputOnChange = (val) => {
console.info(val);
let _value;
if (typeof val == 'string') {
_value = val;
} else {
_value = val.target.value;
}
this.isFetching = true;
if (_value == '海淀') {
this.listValue = [
[{isShowCustomViewButton:true, avatars: {100022: {hasAvatar: true, small: "//cache.tita.gift/Image/100013/4233e527dcd24ea594614b707f21cb1d_s.jpg",color: '#8dc8ea'}}, name:"Address", text:"效益3&bu", value:"效益3&bu"}],
[{isShowCustomViewButton:true, avatars: {100022: {hasAvatar: true, small: "//cache.tita.gift/Image/100013/4233e527dcd24ea594614b707f21cb1d_s.jpg",color: '#8dc8ea'}}, name:"Address", text:"效益3&bu", value:"海淀"}],
[{isShowCustomViewButton:true, avatars: {100022: {hasAvatar: true, small: "//cache.tita.gift/Image/100013/4233e527dcd24ea594614b707f21cb1d_s.jpg",color: '#8dc8ea'}}, name:"Address", text:"11海淀", value:"海淀"}],
[{isShowCustomViewButton:true,
avatars: {100022:
{hasAvatar: true
, small: "//cache.tita.gift/Image/100013/4233e527dcd24ea594614b707f21cb1d_s.jpg",color: '#8dc8ea'}
}
, name:"Address", text:"效益3&bu", value:"海淀"
},
{isShowCustomViewButton:true,
avatars: {100022:
{hasAvatar: true
, small: "//cache.tita.gift/Image/100013/4233e527dcd24ea594614b707f21cb1d_s.jpg",color: '#8dc8ea'}
}
, name:"Address", text:"效益3&bu", value:"海淀"
}
],
[{isShowCustomViewButton:true, avatars: {100022: {hasAvatar: true, small: "//cache.tita.gift/Image/100013/4233e527dcd24ea594614b707f21cb1d_s.jpg",color: '#8dc8ea'}}, name:"Address", text:"11海淀", value:"海淀"}],
[{isShowCustomViewButton:true, avatars: {100022: {hasAvatar: true, small: "//cache.tita.gift/Image/100013/4233e527dcd24ea594614b707f21cb1d_s.jpg",color: '#8dc8ea'}}, name:"Address", text:"11海淀", value:"海淀"}],
[{isShowCustomViewButton:true, avatars: {100022: {hasAvatar: true, small: "//cache.tita.gift/Image/100013/4233e527dcd24ea594614b707f21cb1d_s.jpg",color: '#8dc8ea'}}, name:"Address", text:"效益3&bu", value:"海淀"}],
[{isShowCustomViewButton:true, avatars: {100022: {hasAvatar: true, small: "//cache.tita.gift/Image/100013/4233e527dcd24ea594614b707f21cb1d_s.jpg",color: '#8dc8ea'}}, name:"Address", text:"11海淀", value:"海淀"}]
];
this.isFetching = false;
// this.isNotAllow = true;
} else if (_value == '222') {
this.listValue = [
{
name: '1',
text: '2'
},
{
name: '1',
text: '2'
}
];
this.isFetching = false;
} else {
this.listValue = [];
this.isFetching = false;
}
// this.listValue = null;
this.setState({inputValue: _value, listValue: this.listValue});
}
listClick = (event, data) => {
console.log(event, data, '------')
if (this.multiple) {
this.multiValue.push(data);
this.setState({inputValue: ''})
} else {
// if (_value == '' || _value == 'zjh') {
// this.listValue = null;
// this.isFetching = false;
// console.log('list-click execute')
// return;
// }
this.setState({inputValue: data[0].text});
}
}
multipleClear = (index) => {
this.multiValue.splice(index, 1);
}
render () {
this.data = {
onChange: this.inputOnChange,
value: this.state.inputValue,
title: 'LookUpV2',
required: true,
readOnly: false,
disabled: false,
status: '',
helpMsg: 'sds',
isShowFindAll: false,
isNotAllow: false,
// errorMsg: 'dfsfdsfsdf',
// promptMsg: 'sfsfsf',
placeholder: '请搜索',
multiple: false,
onlyShowAdvanced: true,
listValue: this.listValue,
isFetching: false,
multiValue: this.multiValue,
listClick: this.listClick,
multipleClear: this.multipleClear,
lablePos: false, //label位置，true时在左边，false在上边
lableTxt: false, //label中文字对齐方式，true左对齐，false右对齐
onFindAll: () => {console.log('onFindAll execute')}
}
return (
<LookUpV2 {...data} />
)
}
}
FAQs
Ethos-lookupv2组件
We found that @beisen-platform/lookup-v2 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
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.
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.