react-comp-guide v1.0.1

引导组件

对于复杂的B端系统，用户在使用过程中会存在疑问，新手引导，是可以让用户在短时间内快速了解产品的特色以及产品的使用方式，轻松上手去体验产品的功能，完成自己的目标。同时上线新功能后，往往会给用户一些提示，引导用户去体验新功能，不然在众多功能中，用户很难在短时间内发现更新了哪些内容。

安装

 npm install react-comp-guide -S

新功能弹窗

1、GuideModal

用法：

import { GuideModal, createFunctionalComponent }  from '@ali/lark-guide';

createFunctionalComponent(GuideModal, {
  title: ['财富功能已上线', '在线记账更方便'],
  textArray: ['可创建多个版本预算，讨论更方便。', '支持创建各个阶段的预算版本，支持Excel复制站提。']
  handleOk: () => {},
  backgroundImg: '',
  frontImg: '',
  btnText: '',  
})

API：

2、NotifyModal

用法：

import { NotifyModal, createFunctionalComponent }  from '@ali/lark-guide';

createFunctionalComponent(NotifyModal, {
  title: '总部端换装成功，快去看看',
  subTitle: '全新总部端给您不一样的舒适体验，智能排片更给力',
  handleOk: () => {},
  backgroundImg: '',
  frontImg: '',
  btnText: '',  
})

API：

流程引导

GuideFlow

用法

import { GuideFlow, createFunctionalComponent } from '@ali/lark-guide';
const steps = [
  {
    selector: '#first-step', // 在需要引导的html中加上id,或者classname
    title: '权益类型选择',
    width: 500,
    placement: 'right',
    content: '可按照会员等级或持卡/非持卡发放权益，同时只能生效一种',
  },
  {
    selector: '#second-step',
    title: '权益的启用停用',
    placement: 'right',
    width: 600,
    content: '权益启用时需仔细阅读建议说明，避免权益重复发放',
  },
  {
    selector: '#third-step',
    title: '内容设置',
    placement: 'bottom',
    borderPadding: 10,
    content: '权益的内容会影响用户客户端内容，可按需要设置客户端说明内容',
  },
];
// 函数式调用
createFunctionalComponent(GuideFlow, {
   steps,
   scrollElement: document.querySelector('.classname'), // 默认为
});

// 在jsx中加入id或者className
ReactDOM.render(
  <div>
    <div id="first-step">引导内容1</div>
    <div id="econd-step">引导内容2</div>
    <div id="third-step">引导内容2</div>
  </div>
, mountNode);

API：

GuideFlow的props：

steps的配置项

GuideFlowWithoutMask

没有遮罩和高亮效果的引导，配合麦座亚运会需求的引导，交互稿链接：链接

用法

import { GuideFlowWithoutMask, createFunctionalComponent } from '@ali/lark-guide';
const steps = [
  {
    selector: '#first-step', // 在需要引导的html中加上id,或者classname
    title: '权益类型选择',
    width: 500,
    content: '可按照会员等级或持卡/非持卡发放权益，同时只能生效一种',
  },
  {
    selector: '.second-step',
    title: '权益的启用停用',
    placement: 'rightBottom',
    content: '权益启用时需仔细阅读建议说明，避免权益重复发放',
  },
  {
    selector: '.third-step',
    title: '内容设置',
    placement: 'right',
    borderPadding: 10,
    content: '权益的内容会影响用户客户端内容，可按需要设置客户端说明内容',
  },
];
// 函数式调用
createFunctionalComponent(GuideFlow, {
   steps,
   scrollElement: document.querySelector('.classname'), // 默认为window
});

// 在jsx中加入id或者className
ReactDOM.render(
  <div>
    <div id="first-step">引导内容1</div>
    <div className="econd-step">引导内容2</div>
    <div className="third-step">引导内容2</div>
  </div>
, mountNode);

API：

GuideFlow的props：

steps的配置项

单点引导

GuideTip 和 GuideTipWithCircle 这两个组件的区别是 GuideTipWithCircle 带有高亮圆点，而GuideTip没有；

1、GuideTip

这个组件新的antd版本也有，可配置背景颜色，云智项目用的antd2的版本没有

2、GuideTipWithCircle

用法：

import { GuideTip，GuideTipWithCircle }  from '@ali/lark-guide';

ReactDOM.render(
  <div>
    <GuideTip text="创建线上免费领券后，进入自有渠道-活动页管理配置对应活动页，确保活动在H5/APP可见。" placement="topLeft" toolTipProps={{overlayStyle: {zIndex: 9, width: 300}}}>
      <Button>Align edge / 边缘对齐</Button>
    </GuideTip>
    <GuideTipWithCircle placement="topLeft" text="Prompt Text">
      <Button>Arrow points to center / 箭头指向中心</Button>
    </GuideTipWithCircle>
  </div>
, mountNode);

API：

组件函数式调用

createFunctionalComponent

用函数式的方式调用组件，用于类似弹窗挂载到 body 上

用法

该方法可以用在Antd的modal上；

// TestModal
class TestModal extends React.Component {
   handleOk = (e) => {
    if (typeof this.props.handleOK === 'function') {
      this.props.handleOK(this.state.selectedRows);
    }
    if (typeof this.props.destroy === 'function') {
      this.props.destroy();
    }
  }
  handleCancel = (e) => {
    if (typeof this.props.destroy === 'function') {
      this.props.destroy();
    }
  }
  render() {
    return (
        <Modal
          title="Basic Modal"
          onOk={this.handleOk}
          onCancel={this.handleCancel}
        >
          <p>Some contents...</p>
          <p>Some contents...</p>
          <p>Some contents...</p>
        </Modal>
    );
  }
}

// 调用TestModal
// 函数式调用
createFunctionalComponent(TestModal, {
   props,
});

Utils方法

GuideStorage

很多的引导组件如果没有后端的支持都会存在本地浏览器的localstorage，用于控制显示隐藏，GuideStorage就是用来保存所有的引导组件的状态的一个localstorage, 保证系统的一致性；

import { GuideTipWithCircle, GuideStorage } from '@ali/lark-guide';

this.guideStore = new GuideStorage();
// 设置一个tip的状态
this.guideStore.set({ ticketVersionManagementTip: true });
// 获取一个tip的状态
this.guideStore.get('ticketVersionManagementTip')