lookup-v2 使用说明
项目运行
-
cnpm install 或 npm install cnpm使用教程
-
npm run dev （开发环境打包 port:8080）
-
npm run test （测试用例）
-
npm run build （生产环境打包）
lookup-v2参数
{
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时，输入框获取焦点触发函数
}lookup-v2调用方法
- 安装npm组件包
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} />
)
}
}