# Intro 引导页

- 来源：[E10 UI 组件库](https://www.e-cology.com.cn/ui/intro/freepass)
- 平台：PC
- 维护者：屈正巍
- 设计稿：http://pd.e-cology.com.cn//PD/E10/interface/e10xiaoguotu/PC/zy/bz/index.html#s0
- Issue：http://gitlab.ecology10.cn/FRONTEND/weapp-ui/-/issues?state=all&search=[Intro]

## 代码演示

### 基础用法1

直接引入组件进行使用

```jsx
import React, { Component } from 'react'
import { Intro, constants, Button } from "@weapp/ui"

const prefixCls = `${constants.uiPcClsPrefix}-demo-intro`;
const styles = { display: 'flex', justifyContent: 'space-between' };
export default class Basic extends Component {

  instance: any = null;

  componentDidMount() {
    Intro().then((r) => {
      const introJs = r.default;
      this.instance = introJs();
    })
  }

  start = () => {
    if (this.instance) {
      this.instance.start();
    }
  }

  render() {
    return (
      <>
        <Button onClick={this.start}>点击开始引导</Button>
        <div className={prefixCls} style={styles}>
          <div id='introjs-tooltip-white' data-title='Welcome!' data-intro={'Hello World! 👋'}>
            Quaco Lighthouse
          </div>
          <div data-intro="Intro.js是一个开源的vanilla Javascript/CSS库，用于添加分步介绍或提示。">
            What is Intro.js?
          </div>
          <div data-intro='Intro.js会自动找到工具提示的最佳位置，但您可以使用position配置显式定义每个步骤的工具提示位置：'>
            Document Link: <a href="https://introjs.com/docs/examples/basic/json-config"></a>
          </div>
        </div>
      </>

    )
  }
}
```

### 自定义参数

直接引入组件进行使用

```jsx
import React, { Component } from 'react'
import { Intro, constants, Button } from "@weapp/ui"

const prefixCls = `${constants.uiPcClsPrefix}-demo-intro`;

const intro0 = "若逢新雪初霁，满月当空，下面空铺着皓影，上面流转着亮银，而你带笑的向我步来，月色与雪色之间你是第三种绝色";
const intro1 = "每个人都是一座孤岛，可以决定自己的流放：遭遇风雨，心路不开，愁思就会绵长，直到有一天，撞见阳光";
const intro2 = "愿中国青年都摆脱冷气，只是向上走，不必听自暴自弃者流的话。能做事的做事，能发声的发声。有一分热，发一分光，就令萤火一般，也可以在黑暗里发一点光。不必等候炬火，此后如竟没有炬火: 我便是唯一的光。"

export default class Basic extends Component {

  instance: any = null;

  componentDidMount() {
    Intro().then((r) => {
      const introJs = r.default;
      introJs().setOptions({
        prevLabel: '测试上一步',
        skipLabel: '跳过跳过跳过过跳过跳过跳过过'
      })
      this.instance = introJs();
      //通过onbeforechange事件给toolip动态添加class
      this.instance.onbeforechange((a: any) => {
        const id = a?.id;
        this.instance.setOptions({ tooltipClass: id })
      })
    })
  }

  start = () => {
    if (this.instance) {
      this.instance.setOptions({
        tooltipClass: `${prefixCls}-introjs-tooltip-custom`,
        prevLabel: '测试上一步',
        skipLabel: '跳过跳过跳过过跳过跳过跳过过'
      }).start();
    }
  }

  render() {
    return (
      <div className={prefixCls}>
        <Button onClick={this.start}>点击开始引导</Button>
        <div data-intro={intro2} className="card-demo">
          <div className="card shadow-md">
            <div className="card__image" id='introjs-tooltip-white' data-title="—梭罗" data-intro={intro1}>
              我是img
            </div>
            <div className="card__body" id={`${prefixCls}-introjs-tooltip-custom`} data-title="—余光中《绝色》" data-intro={intro0}>
              <h4>IntroJs使用</h4>
              <span>还可以使用JSON configuration使用引导</span>
              <a href="https://introjs.com/docs/examples/basic/json-config">点击查看如何使用</a>
            </div>
          </div>
        </div>
      </div>
    )
  }
}
```

## API

### 参数说明如下：

组件库采用的三方Intro版本为：6.0.0
详细参考 Intro.js 文档 [https://introjs.com/docs/intro/api/](https://introjs.com/docs/intro/api/)

// 常用配置项

```javascript
  componentDidMount() {
    Intro().then((r) => {
      const introJs = r.default;
      this.instance = introJs();
      this.instance.setOptions({
        prevLabel: '上一步',
        nextLabel: '下一步',
        skipLabel: '跳过',
        doneLabel: '我知道了',
      });
    })
  }
```
