@beisen/lookup-v2 v0.1.50-rc.10

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

2. 引用组件

   import LookUpV2 from "@beisen/lookup-v2"

3. 传入参数

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

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