# @beisen-platform/lookup-v2 > Ethos-lookupv2组件 Latest version **1.0.17** (published 2019-10-29) · ISC license · 0 weekly downloads ## Install ```sh npm install @beisen-platform/lookup-v2 pnpm add @beisen-platform/lookup-v2 yarn add @beisen-platform/lookup-v2 bun add @beisen-platform/lookup-v2 ``` ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 1.0.17 | | Published | 2019-10-29 | | First published | 2018-11-29 | | Weekly downloads | 0 | | License | ISC | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 8 | | Unpacked size | 247.5 KB | | Known vulnerabilities | 0 | | Install scripts | no | | Author | beisen | | Maintainers | beisencorp | | Keywords | beisen, react-component, es6 | ## Links - npm: https://www.npmjs.com/package/@beisen-platform/lookup-v2 - Repository: http://gitlab.beisencorp.com/ux-cnpm/ux-lookup-v2 - npm.io page: https://npm.io/package/@beisen-platform/lookup-v2 ## Dependencies (8) - [lodash](https://npm.io/package/lodash.md) ^4.17.10 - [@beisen-platform/loading](https://npm.io/package/@beisen-platform/loading.md) - [@beisen-platform/tool-tip](https://npm.io/package/@beisen-platform/tool-tip.md) - [@beisen-platform/common-func](https://npm.io/package/@beisen-platform/common-func.md) - [@beisen-platform/react-icons](https://npm.io/package/@beisen-platform/react-icons.md) - [@beisen-platform/common-input](https://npm.io/package/@beisen-platform/common-input.md) - [@beisen-platform/common-label](https://npm.io/package/@beisen-platform/common-label.md) - [@beisen-platform/common-mount](https://npm.io/package/@beisen-platform/common-mount.md) ## Recent versions - 1.0.17 (latest) — 2019-10-29 - 1.0.16 — 2019-10-29 - 1.0.15 — 2019-07-17 - 1.0.14 — 2019-07-09 - 1.0.13 — 2019-07-04 - 1.0.12 — 2019-06-14 - 1.0.11 — 2019-05-30 - 1.0.10 — 2019-05-30 - 1.0.9 — 2019-05-17 - 1.0.8 — 2019-05-09 - 1.0.7-rc.3 — 2019-05-08 - 1.0.7-rc.2 — 2019-04-30 - 1.0.7-rc.1 — 2019-04-30 - 1.0.7 — 2019-03-15 - 1.0.6 — 2019-03-15 - … 7 more at https://npm.io/package/@beisen-platform/lookup-v2/versions ## 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参数 ```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 ``` 2. 引用组件 ``` import LookUpV2 from "@beisen/lookup-v2" ``` 3. 传入参数 该参数为上述参数，传入方式使用: {...参数} ```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 ( ) } } ``` --- _Source: https://npm.io/package/@beisen-platform/lookup-v2 · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._