@beisen/lookup-v2

## 项目运行

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
@beisen/lookup-v2
0.1.50-rc.103 years ago6 years agoMinified + gzip package size for @beisen/lookup-v2 in KB

Readme

lookup-v2 使用说明

项目运行

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

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

  1. npm run test (测试用例)

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

lookup-v2参数

```javascript
{
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调用方法

1. 安装npm组件包
npm install @beisen/lookup-v2 --save-dev ```
  1. 引用组件

``` import LookUpV2 from "@beisen/lookup-v2" ```
  1. 传入参数
该参数为上述参数,传入方式使用: {...参数}  
```javascript 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} />  
  )
}
}
```