Diwork-business-components NPM

参照组件

组件简介

组件主要提供三个UI组件，包含Search、Personal、QuickApplication

安装

npm install --save diwork-business-components

引用方式

import { Search, Personal, QuickApplicatoin } from 'diwork-business-components';

QuickApplicatoin 组件

调用方式

<QuickApplication
	serviceList={serviceList}
	openAllFn={this.openAllFn}
	openServiceFn={this.openServiceFn}
	locale="en_US"
    className="xxx"
/>

参数讲解

 1. serviceList:  快捷应用数据源

 2. openAllFn:   打开全部应用的方法调用
    openAllFn = () => {}

 3. openServiceFn:  打开单独应用的调用方法  默认接收参数 应用code
    openServiceFn = (applicationCode) => {}
 4. locale: 本地语言  zh_CN：中文简体  en_US：英文  zh_TW：中文繁体
 5. className:  自定义的class

Search 组件

调用方式

<Search
	list={SearchSuggestList}
	onChange={this.getSearchList}
	onEnter={this.goSearchPage}
	onSearch={this.goSearchPage}
	onMoreBtnClick={this.goSearchPage}
	dispatch={dispatch}
	trigger={trigger}
	locale="en_US"
/>

参数讲解

 1. list  搜索返回的数据源

 2. onChange  :   获取数据的调用方法
		onChange = (keyworks) => {
			const {
			  getSearchSuggest,
			} = this.props;
			getSearchSuggest(keyworks).then(({ error, payload }) => {});
		}

 3. onEnter: 回车键触发到的方法

 4. onSearch: 点击搜索按钮触发的方法

 5. onMoreBtnClick: 点击更多搜索结果触发的方法

 6. dispatch:	必传方法  需要从tools 获取

 7. trigger: 	必传方法  需要从tools 获取

 8. locale:   本地语言    zh_CN：中文简体  en_US：英文  zh_TW：中文繁体

Personal 组件

调用方式

<Personal
	currType={currType}
	userInfo = {userInfo}
	requestDisplay = {requestDisplay}
	closeRequestDisplay = {() => { this.closeRequestDisplay(); }}
	exitModal = {exitModal}
	openExitModal = {this.openExitModal}
	dispatch = { this.dispatch }
	hrefs = {hrefs}
	logout = {logout}
	language={language}
	icons = {icons}
	locale="en_US"
/>;

参数讲解

  1. currType    0 或者 1 ， 0代表企业，1代表团队

  2. locale:   本地语言    zh_CN：中文简体  en_US：英文  zh_TW：中文繁体

  3. userinfo 	   userinfo信息

  4. requestDisplay   类型 bool  是否显示创建成功后的弹出层

  5. closeRequestDisplay  func  关闭 创建成功后弹出层的方法

  6. exitModal  类型 bool   是否显示退出团队或者企业的弹层

  7. openExitModal    func  打开退出团队企业的弹层

  8. dispatch  路由或者链接跳转统一调用的方法

  9. hrefs   左下角 hrefs

  10. logout  func  注销
	
  11. icons  数组 
	[
		{
			element:<Icon type="iconfont" title="字体图标" />		// 传递元素进去渲染 
			background: 'blue',					// ICON BACKGROUND
			arguments: 'openDynamic',		// 点击ICON 参数
			fn: () => { }								// 传递的方法  如果不传递 则直接调用dispatch方法  将arguments参数传递回去
		}
	]

  12. editType  bool  非必传  默认 true  是否显示首页编辑按钮

  13. exitModalButton  bool  非必传  默认 true  是否显示退出团队/企业按钮

  14. animatedType :   非必传参数， 决定动画方向和位置 （ Left || Right ）  默认为"Left"

  15. modalStyle: 非必传参数， 决定弹窗层位置  {top: '100px', right: '0px'}  top: 默认48px, left ：默认0  right： 默认auto  bottom：默认0

  16. language  .object  非必传参数   默认 true  语言切换
		{
			show  :  true或者false   传递true显示
			defaultValue :  默认展示的value
			onChangeLanguage: 点击切换按钮后执行的操作方法  默认自带value参数
			languageList:  数组类型， 语言列表 
		}