@beisen-platform/lookup-v2
Ethos-lookupv2组件
Last updated 10 months ago by beisencorp .
ISC · Repository · Original npm · Tarball · package.json
$ cnpm install @beisen-platform/lookup-v2 
SYNC missed versions from official npm registry.

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

Current Tags

  • 1.0.17                                ...           latest (10 months ago)

22 Versions

  • 1.0.17                                ...           10 months ago
  • 1.0.16                                ...           10 months ago
  • 1.0.15                                ...           a year ago
  • 1.0.14                                ...           a year ago
  • 1.0.13                                ...           a year ago
  • 1.0.12                                ...           a year ago
  • 1.0.11                                ...           a year ago
  • 1.0.10                                ...           a year ago
  • 1.0.9                                ...           a year ago
  • 1.0.8                                ...           a year ago
  • 1.0.7-rc.3                                ...           a year ago
  • 1.0.7-rc.2                                ...           a year ago
  • 1.0.7-rc.1                                ...           a year ago
  • 1.0.7                                ...           a year ago
  • 1.0.6                                ...           a year ago
  • 1.0.5                                ...           2 years ago
  • 1.0.4                                ...           2 years ago
  • 1.0.3                                ...           2 years ago
  • 1.0.2                                ...           2 years ago
  • 1.0.1                                ...           2 years ago
  • 1.0.0                                ...           2 years ago
  • 0.1.24                                ...           2 years ago

Copyright 2014 - 2016 © taobao.org |