@beisen/lookup-v2

## 项目运行

Stats

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

Readme

lookup-v2 使用说明

项目运行

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

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

  3. npm run test (测试用例)

  4. 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调用方法

  1. 安装npm组件包
npm install @beisen/lookup-v2 --save-dev
  1. 引用组件
import LookUpV2 from "@beisen/lookup-v2"
  1. 传入参数

    该参数为上述参数,传入方式使用: {...参数}

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

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.