快速生成门户的一套工具

项目运行

git clone http://gd-gitlab.dc.servyou-it.com/gt-front/portal-config.git
cd portal-config
npm install
npm run serve

在项目根目录下执行npm run build,会生成一个lib文件夹，将lib文件夹中的内容copy到要引用的项目中。

如果你已经有一个该包的文件，可以直接忽略上面步骤。

引入

一、浏览器环境

引入上面lib文件中的文件

<link href="portal.css" rel="stylesheet">
...
<script src="portal.js"></script>

二、webpack中

1、从内网npm上下载，执行 npm i gd-portal -S，项目文件中执行：

import Portal from 'gd-portal';
import 'gd-portal/lib/portal.css';

2、直接引用上面lib文件，项目文件中执行：

import Portal from 'lib/gd-portal';
import 'lib/portal.css';

使用

  var myPortal = new Portal(options);

options 参数说明

| 名称 | 说明 | 类型 | 默认值 | | -------- | ---- | ----- | ---- | | container |挂载的元素| element | body | | appName | 门户名称 | String | '' | | taxName | 地方税务局名称 | String | '' | | userName | 用户的身份名称 | String | '' | | menuTrigger | 菜单展开方式，支持dropdown和popover | String | popover | | iconPosition | 左侧菜单的箭头位置，支持left和right | String | left | | leftMenuWidth | 左侧菜单宽度 | Number | 240 | | enableCollect | 是否可收藏 | Boolean | true | | shortcutRender | 顶部快捷导航渲染片段，如：<div>快捷导航</div> | String | '' | | rightSideBar | 右侧快捷导航渲染片段，如：<div>Sidebar</div> | String | '' | | maxTabs | 能打开的tabs数量 | Number | 10 | | maxCollectNum | 最大可收藏数量，0表示不限制 | Number | 0 | | showMenuSearch | 是否显示菜单顶部的搜索框 | Boolean | true | | showTab | 是否显示菜单tab页 | Boolean | true | | loginOut | 点击退出登录时的钩子事件 | Function | | | mounted | 页面已经挂载完成的钩子，回调参数为当前实例 | Function | | | menuCustomRender | 自定义菜单渲染，回调参数为每个menu | Function | | | identitySwitch | 切换身份的钩子事件 | Function | | | TabMenus | 右键导航时出现的菜单列表，详细配置见下表 | Array | 包含关闭右侧标签和关闭其他标签 | | identityActions | 点击身份时展开的下拉列表,详细配置见下表 | Array | [] |

TabMenus 参数说明

| 名称 | 说明 | 类型 | | -------- | ---- | ----- | | title |显示的名称| String | | onClick | 点击该菜单时的回调，参数为当前tab的id | Function | | className | 当前菜单项的class | Array |

identityActions 参数说明

| 名称 | 说明 | 类型 | | -------- | ---- | ----- | | title |显示的名称| String | | onClick | 点击改菜单时的回调，参数为当前portal的实例| Function | | className | 当前菜单项的class | Array |

实例方法说明

  var myPortal = new Portal(options);
  myPortal.methodName(params);

| 名称 | 说明 | 参数 | | -------- | ---- | ----- | | setAutoHide |设置自动隐藏的状态| flag:Boolean | Boolean | | closeRightTabs |关闭右侧标签，参数为当前作为参照的id，不传默认为当前选择的tab id| id:String | | closeOtherTabs |关闭其他标签，参数为当前作为参照的id，不传默认为当前选择的tab id| id:String | | closeTab |关闭某个标签| id:String | | openNewTab | 打开一个新标签，需要传入唯一值id、打开的tab栏名称、路径url、unClosed：是否可关闭| id:String,name:String, url:String, unClosed: boolean | | showDialog | 打开一个弹窗,需要传入弹窗标题，传给弹窗的属性，弹窗需要渲染的html（<div>我是弹窗内容</div>） | title:String, attr;Object, htmlContent: String | | showIdentitySwitch | 打开身份切换弹窗 | title:String, attr;Object, htmlContent: String |

Login说明

引入

浏览器环境

<link href="portal.css" rel="stylesheet">
...
<script src="portal.js"></script>
<script>
  new Portal.Login(options)
</script>

webpack中

import { Login } from 'gd-portal';
import 'gd-portal/lib/portal.css';
new Login(options);

| 名称 | 说明 | 类型 | 默认值 | | -------- | ---- | ----- | ---- | | container | 挂载元素,请提供原生DOM对象 | '' | | | allowScanCodeLogin | 允许扫码登录 | false | | | loginSuccess | 登录成功的钩子 | Function | | | account | 账户输入对象，详细说明见下表 | Object | | | password | 密码输入对象，详细说明见下表 | Object | | | forgetPassword | 点击忘记时的钩子，参数为当前输入框的用户名account，如果不传，则隐藏忘记密码文案 | Function | |

account、password详细说明

| 名称 | 说明 | 类型 | 默认值 | | -------- | ---- | ----- | ---- | | placeholder | input的placeholder属性 | String | | | rules | 输入框的验证规则 | Array | |

例如：

new Login({
  account: {
    placeholder: '手机号码/证件号',
    rules: [
      { required: true, message: '请输入账号' },
      { reg: /^\-[1-9][]0-9"*$/, message '请输入非零的负整数'}，
      { validator:(value, cb) => {
        if(value.length<10){
          cb('长度不能小于10')
        }else {
          cb();
        }
      }}
    ]
  },
  password: {
    placeholder: '密码',
    rules: [
      { required: true, message: '请输入密码' }
    ]
  }
})