guide-modal

Usage

门户场景

引入js后，会在window下挂载GuideModal对象，使用方法：

GuideModal.showPortal({
  userGuid,
  serviceHost,
  appCode,
  style,
  contentMaxHeight,
  callback,
  onCloseButtonClick,
  showAfterLoading,
  hideIfNoData,
  onShow,
});

方法签名如下：

/**
 * @param{string} userGuid: 用户id
 * @param{string} serviceHost: 服务地址，结尾不要带'/'
 * @param{string} appCode: 应用id
 * @param{number} contentMaxHeight: 弹窗内容区域最大高度，单位为px，默认232, 超出显示滚动条 
 * @param{object} style: 指定弹窗宽度和位置, 具体值参考下方定义
 * @param{boolean} showAfterLoading: 是否加载完数据再显示弹窗，默认为false。当hideIfNoData为true时，此配置会被忽略，弹窗会在加载完数据之后根据是否有数据再决定是否显示。
 * @param{boolean} hideIfNoData: 如果没有数据，不展示弹窗, 默认false
 * @param{function} urlCallback: 点击url的回调, done参数接收一个boolean值，传true时隐藏弹窗，可不传。
 * @param{function} onShow: 弹窗动画完成回调函数。
 * @param{function} onCloseButtonClick: 点击左上角关闭迎铵钮的回调, 调用hideModal隐藏弹窗，可不传，不传时默认关闭弹窗。
 * @return{function} 返回一个函数，调用此函数关闭弹窗。需要在弹窗显示动画完成之后才能调用, 例如在onShow方法中可以调用这个函数。
 */
interface GuidePortalConfig {
  userGuid: string;
  serviceHost: string;
  appCode: string;
  contentMaxHeight?: number;
  style: {
    top?: number | string;
    left?: number | string;
    right?: number | string;
    bottom?: number | string;
    width?: number | string; // 默认362
    'z-index'?: number; // 默认1000
  };
  showAfterLoading?: boolean;
  hideIfNoData?: boolean;
  callback?(url: string, e: MouseEvent, done: (closeModal: boolean) => void): void;
  onCloseButtonClick?(hideModal: () => void): void;
  onShow?: () => void;
}

interface GuideModalType {
  showPortal: (config: GuidePortalConfig) => () => void;
}

declare var GuideModal: GuideModalType;

表单场景

引入js后，会在window下挂载GuideModal对象，使用方法：

GuideModal.showModal({
  operate,
  dataStr,
  userGuid,
  serviceHost,
  appCode,
  buttonCode,
  contentMaxHeight,
  showAfterLoading,
  hideIfNoData,
  callback,
  onCloseButtonClick,
  onShow,
});

方法签名如下：

/**
 * @param{number} operate: 0(只记录日志，不显示弹窗!), 1(只记录日志，显示弹窗)
 * @param{string} dataStr: 记录用户数据
 * @param{string} userGuid: 用户id
 * @param{string} appCode: 应用id
 * @param{string} buttonCode: 按钮id
 * @param{string} serviceHost: 服务地址，结尾不要带'/'
 * @param{function} urlCallback: 点击url的回调, done参数接收一个boolean值，传true时隐藏弹窗, 可不传
 * @param{function} onCloseButtonClick: 点击左上角关闭迎铵钮的回调, 调用hideModal隐藏弹窗，可不传，不传时默认关闭弹窗。
 * @param{number} contentMaxHeight: 弹窗内容区域最大高度，单位为px，默认100, 超出显示滚动条 
 * @param{boolean} showAfterLoading: 是否加载完数据再显示弹窗，默认为false。当hideIfNoData为true时，此配置会被忽略，弹窗会在加载完数据之后根据是否有数据再决定是否显示。
 * @param{boolean} hideIfNoData: 如果没有数据，不展示弹窗, 默认false
 * @param{function} onShow: 弹窗动画完成回调函数。
 * @return{function | undefined} 只在operate为1时返回一个函数，调用此函数关闭弹窗。需要在弹窗显示动画完成之后才能调用, 例如在onShow方法中可以调用这个函数。
 */
interface GuideModalConfig {
  operate: number;
  dataStr: string;
  userGuid: string;
  serviceHost: string;
  appCode: string;
  buttonCode: string;
  contentMaxHeight? number;
  showAfterLoading?: boolean;
  hideIfNoData?: boolean;
  callback?(url: string, e: MouseEvent, done: (closeModal: boolean) => void): void;
  onCloseButtonClick?(hideModal: () => void): void;
  onShow?: () => void;
}

interface GuideModalType {
  showModal: (config: GuideModalConfig) => () => void;
}

declare var GuideModal: GuideModalType;

为下一个用户生成一条信息

引入js后，会在window下挂载GuideModal对象，使用方法：

GuideModal.notifyNext({
  userGuid,
  serviceHost,
  appCode,
  code,
});

方法签名如下：

/**
 * @param{string} userGuid: 通知的用户id
 * @param{string} appCode: 应用id
 * @param{string} code: 业务code
 * @param{string} serviceHost: 服务地址，结尾不要带'/'
 * @param{boolean} sync: ajax请求是否是同步请求。如果因业务需要，调完此接口之后页面发生跳转，需要设置此项为true防止页面跳转后ajax请求被取消，默认为false
 * @return{undefined} 
 */
interface GuideNotifyConfig {
  userGuid: string;
  serviceHost: string;
  appCode: string;
  code: string;
  sync?: boolean;
}

interface GuideModalType {
  notifyNext: (config: GuideNotifyConfig) => () => void;
}

declare var GuideModal: GuideModalType;

为多个用户生成信息

引入js后，会在window下挂载GuideModal对象，使用方法：

GuideModal.notifyAll({
  serviceHost,
  appCode,
  statusList,
  sync?: boolean;
});

方法签名如下：

/**
 * @param{Array<{userGuid: string, code: string}> statusList:  userGuid: 通知的用户id, code: 业务code
 * @param{string} appCode: 应用id
 * @param{string} serviceHost: 服务地址，结尾不要带'/'
 * @param{boolean} sync: ajax请求是否是同步请求。如果因业务需要，调完此接口之后页面发生跳转，需要设置此项为true防止页面跳转后ajax请求被取消，默认为false
 * @return{undefined} 
 **/
interface GuideNotifyAllConfig {
  statusList: Array<{userGuid: string, code: string}>;
  serviceHost: string;
  appCode: string;
  sync?: boolean;
}

interface GuideModalType {
  notifyAll: (config: GuideNotifyAllConfig) => () => void;
}

declare var GuideModal: GuideModalType;

指引内容抽屉

引入js后，会在window下挂载Drawer类，使用方法：

const drawer =  new Drawer({
  width,
  afterVisibleChange,
  stepCode,
  sectionCode,
  targetOffset,
});

方法签名如下：

/**
 * @param{number} width: 抽屉组件宽度，默认为884
 * @param{function} afterVisibleChange: 弹窗动画完成回调函数
 * @param{string} stepCode: 二级步骤id
 * @param{string} sectionCode: // 锚点默认选中的章节id
 * @param{number} targetOffset: // 锚点距离窗口顶部滚动偏移量，默认值为0
 * @return{undefined} 
 **/
interface DrawerConfig {
  width?: number;
  afterVisibleChange?: () => void;
  stepCode: string | number;
  sectionCode?: string | number;
  targetOffset?: number;
}

declare var DrawerType: (config: DrawerConfig) => () => void;

changelog

• v0.0.0: 弹窗新增最大高度设置，超出显示滚动条； 添加通知多个接口；
• v0.0.1: portal弹窗富文本内段落不显示分割线; 弹窗配置添加hideIfNoData, showAfterLoading及onShow配置;
• v0.0.2: 公共服务路径修改