React - 引导步骤(IntroJs)
<p>原文链接：http://www.pianshen.com/article/9144689534/</p><p> </p>
<p>在Antd中尝试写了一下, 感觉还可以, 配合后端来判断是否是新用户从而可以对新用户进行引导操作.</p>
<p> </p>
<p>效果:</p>
<p><img src="http://www.pianshen.com/images/664/27bbd201475c2cd7be05276f04c6d730.gif"></p>
<h1>IntroJs引导步骤</h1>
<p>给用户提示或介绍如何操作</p>
<h2>何时使用</h2>
<p>用户初次使用时</p>
<h2>如何使用</h2>
<pre>npm install intro.js –save</pre>
<h2>代码演示</h2>
<p>开始引导</p>
<p>基本用法</p>
<p>最简单的用法。</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 128, 128, 1)"> 1</span> import React from 'react'
<span style="color: rgba(0, 128, 128, 1)"> 2</span> import IntroJs from 'intro.js'
<span style="color: rgba(0, 128, 128, 1)"> 3</span> import { Card, Tooltip, Button } from 'antd'<span style="color: rgba(0, 0, 0, 1)">;
</span><span style="color: rgba(0, 128, 128, 1)"> 4</span>
<span style="color: rgba(0, 128, 128, 1)"> 5</span> <span style="color: rgba(0, 0, 0, 1)"> class IntroPage extends React.Component {
</span><span style="color: rgba(0, 128, 128, 1)"> 6</span>
<span style="color: rgba(0, 128, 128, 1)"> 7</span> startIntro = () =><span style="color: rgba(0, 0, 0, 1)"> {
</span><span style="color: rgba(0, 128, 128, 1)"> 8</span> <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 获取包含引导元素的父容器, 并组成IntroJs</span>
<span style="color: rgba(0, 128, 128, 1)"> 9</span> <span style="color: rgba(0, 0, 255, 1)">var</span> intro1 = IntroJs(document.getElementById('root'<span style="color: rgba(0, 0, 0, 1)">))
</span><span style="color: rgba(0, 128, 128, 1)">10</span> <span style="color: rgba(0, 0, 0, 1)"> intro1.setOptions({
</span><span style="color: rgba(0, 128, 128, 1)">11</span> prevLabel: "上一步"<span style="color: rgba(0, 0, 0, 1)">,
</span><span style="color: rgba(0, 128, 128, 1)">12</span> nextLabel: "下一步"<span style="color: rgba(0, 0, 0, 1)">,
</span><span style="color: rgba(0, 128, 128, 1)">13</span> skipLabel: "跳过"<span style="color: rgba(0, 0, 0, 1)">,
</span><span style="color: rgba(0, 128, 128, 1)">14</span> doneLabel: "结束"<span style="color: rgba(0, 0, 0, 1)">,
</span><span style="color: rgba(0, 128, 128, 1)">15</span> }).oncomplete(<span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> () {
</span><span style="color: rgba(0, 128, 128, 1)">16</span> <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">点击跳过按钮后执行的事件</span>
<span style="color: rgba(0, 128, 128, 1)">17</span> }).onexit(<span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> () {
</span><span style="color: rgba(0, 128, 128, 1)">18</span> <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">点击结束按钮后， 执行的事件</span>
<span style="color: rgba(0, 128, 128, 1)">19</span> <span style="color: rgba(0, 0, 0, 1)"> }).start();
</span><span style="color: rgba(0, 128, 128, 1)">20</span> <span style="color: rgba(0, 0, 0, 1)"> }
</span><span style="color: rgba(0, 128, 128, 1)">21</span>
<span style="color: rgba(0, 128, 128, 1)">22</span> <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> render</span>
<span style="color: rgba(0, 128, 128, 1)">23</span> <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 关键是data-step 和 data-intro</span>
<span style="color: rgba(0, 128, 128, 1)">24</span> <span style="color: rgba(0, 0, 0, 1)"> render() {
</span><span style="color: rgba(0, 128, 128, 1)">25</span> <span style="color: rgba(0, 0, 255, 1)">return</span><span style="color: rgba(0, 0, 0, 1)"> (
</span><span style="color: rgba(0, 128, 128, 1)">26</span> <div id='root'>
<span style="color: rgba(0, 128, 128, 1)">27</span> <Card bordered={<span style="color: rgba(0, 0, 255, 1)">true</span>} style={{ width: '100%' }} data-step="1" data-intro='开始引导!'>
<span style="color: rgba(0, 128, 128, 1)">28</span> <Button onClick={() => <span style="color: rgba(0, 0, 255, 1)">this</span>.startIntro()}>开始引导</Button>
<span style="color: rgba(0, 128, 128, 1)">29</span> </Card>
<span style="color: rgba(0, 128, 128, 1)">30</span> </div>
<span style="color: rgba(0, 128, 128, 1)">31</span> <span style="color: rgba(0, 0, 0, 1)"> );
</span><span style="color: rgba(0, 128, 128, 1)">32</span> <span style="color: rgba(0, 0, 0, 1)"> }
</span><span style="color: rgba(0, 128, 128, 1)">33</span> <span style="color: rgba(0, 0, 0, 1)"> }
</span><span style="color: rgba(0, 128, 128, 1)">34</span>
<span style="color: rgba(0, 128, 128, 1)">35</span> export <span style="color: rgba(0, 0, 255, 1)">default</span> IntroPage</pre>
</div>
<p> </p>
<h2>API</h2>
<h3>IntroJs Props</h3>
<table style="height: 603px; width: 1112px" align="left">
<thead>
<tr><th>参数</th><th>说明</th><th>类型</th><th>默认值</th></tr>
</thead>
<tbody>
<tr>
<td>start</td>
<td>开始引导</td>
<td>func</td>
<td> </td>
</tr>
<tr>
<td>exit</td>
<td>退出引导</td>
<td>func</td>
<td> </td>
</tr>
<tr>
<td>clone</td>
<td>克隆</td>
<td>func</td>
<td> </td>
</tr>
<tr>
<td>exit</td>
<td>退出引导</td>
<td>func</td>
<td> </td>
</tr>
<tr>
<td>goToStepNumber</td>
<td>跳转到第x引导步骤</td>
<td>func | (stepId: number)</td>
<td> </td>
</tr>
<tr>
<td>goToStep</td>
<td>跳转到第x引导步骤</td>
<td>func | (step: number)</td>
<td> </td>
</tr>
<tr>
<td>nextStep</td>
<td>下一步</td>
<td>func</td>
<td> </td>
</tr>
<tr>
<td>previousStep</td>
<td>上一步</td>
<td>func</td>
<td> </td>
</tr>
<tr>
<td>refresh</td>
<td>重置</td>
<td>func</td>
<td> </td>
</tr>
<tr>
<td>setOption</td>
<td>设置引导步骤选项</td>
<td>func | (option: string, value: string|number|boolean)</td>
<td> </td>
</tr>
<tr>
<td>setOptions</td>
<td>设置引导步骤选项</td>
<td>func | options: Options</td>
<td> </td>
</tr>
<tr>
<td>onexit</td>
<td>退出引导回调</td>
<td>func | callback: Function</td>
<td> </td>
</tr>
<tr>
<td>onbeforechange</td>
<td>在元素变化之前</td>
<td>func | callback: (element: HTMLElement) => any</td>
<td> </td>
</tr>
<tr>
<td>onafterchange</td>
<td>在元素变化之后</td>
<td>func | callback: (element: HTMLElement) => any</td>
<td> </td>
</tr>
<tr>
<td>onchange</td>
<td>变化时回调</td>
<td>func | callback: (element: HTMLElement) => any</td>
<td> </td>
</tr>
<tr>
<td>oncomplete</td>
<td>完成时回调</td>
<td>func | callback: Function</td>
<td> </td>
</tr>
<tr>
<td>addHints</td>
<td>添加提示</td>
<td>func</td>
<td> </td>
</tr>
<tr>
<td>showHint</td>
<td>显示stepId提示</td>
<td>func | stepId: number</td>
<td> </td>
</tr>
<tr>
<td>showHints</td>
<td>显示提示</td>
<td>func</td>
<td> </td>
</tr>
<tr>
<td>hideHint</td>
<td>隐藏stepId提示</td>
<td>func | stepId: number</td>
<td> </td>
</tr>
<tr>
<td>hideHints</td>
<td>隐藏提示</td>
<td>func</td>
<td> </td>
</tr>
<tr>
<td>removeHint</td>
<td>删除stepId提示</td>
<td>func | stepId: number</td>
<td> </td>
</tr>
<tr>
<td style="text-align: left">removeHints</td>
<td>删除提示</td>
<td>func</td>
<td> </td>
</tr>
<tr>
<td>onhintsadded</td>
<td> </td>
<td>func | callback: Function</td>
<td> </td>
</tr>
<tr>
<td>onhintclick</td>
<td> </td>
<td>func | callback: (hintElement: HTMLElement, item: Step, stepId: number) => any</td>
<td> </td>
</tr>
<tr>
<td>onhintclose</td>
<td> </td>
<td>func | callback: (stepId: number) => any</td>
<td> </td>
</tr>
</tbody>
</table>
<h3> </h3>
<h3> </h3>
<h3> </h3>
<h3> </h3>
<h3> </h3>
<h3> </h3>
<h3> </h3>
<h3> </h3>
<h3> </h3>
<h3> </h3>
<h3> </h3>
<h3> </h3>
<h3> </h3>
<h3> </h3>
<h3> </h3>
<h3> </h3>
<h3>Options Props</h3>
<table align="left">
<thead>
<tr><th>参数</th><th>说明</th><th>类型</th><th>默认值</th></tr>
</thead>
<tbody>
<tr>
<td>nextLabel</td>
<td>下一步标签名称</td>
<td>string</td>
<td> </td>
</tr>
<tr>
<td>prevLabel</td>
<td>上一步标签名称</td>
<td>string</td>
<td> </td>
</tr>
<tr>
<td>skipLabel</td>
<td>跳过标签名称</td>
<td>string</td>
<td> </td>
</tr>
<tr>
<td>doneLabel</td>
<td>结束标签名称</td>
<td>string</td>
<td>Done</td>
</tr>
<tr>
<td>hidePrev</td>
<td>是否隐藏上一步</td>
<td>boolean</td>
<td> </td>
</tr>
<tr>
<td>hideNext</td>
<td>是否隐藏下一步</td>
<td>boolean</td>
<td> </td>
</tr>
<tr>
<td>tooltipPosition</td>
<td>提示框位置</td>
<td>string</td>
<td> </td>
</tr>
<tr>
<td>highlightClass</td>
<td>高亮...</td>
<td>string</td>
<td> </td>
</tr>
<tr>
<td>exitOnEsc</td>
<td>是否按esc退出引导</td>
<td>boolean</td>
<td> </td>
</tr>
<tr>
<td>exitOnOverlayClick</td>
<td>是否点击遮盖层退出引导</td>
<td>boolean</td>
<td> </td>
</tr>
<tr>
<td>showStepNumbers</td>
<td>是否展示第几步</td>
<td>boolean</td>
<td> </td>
</tr>
<tr>
<td>keyboardNavigation</td>
<td>是否用键盘导航</td>
<td>boolean</td>
<td> </td>
</tr>
<tr>
<td>showButtons</td>
<td>是否展示button按钮</td>
<td>boolean</td>
<td> </td>
</tr>
<tr>
<td>showBullets</td>
<td>是否展示公告</td>
<td>boolean</td>
<td> </td>
</tr>
<tr>
<td>showProgress</td>
<td>是否展示引导进度条</td>
<td>boolean</td>
<td>false</td>
</tr>
<tr>
<td>scrollToElement</td>
<td>是否滚动到展示的元素上(貌似无效)</td>
<td>boolean</td>
<td>true</td>
</tr>
<tr>
<td>overlayOpacity</td>
<td>遮盖层透明度</td>
<td>number</td>
<td> </td>
</tr>
<tr>
<td>scrollPadding</td>
<td>滚动间距</td>
<td>number</td>
<td> </td>
</tr>
<tr>
<td>positionPrecedence</td>
<td>位置优先??</td>
<td>string[]</td>
<td> </td>
</tr>
<tr>
<td>disableInteraction</td>
<td>禁用交互</td>
<td>boolean</td>
<td> </td>
</tr>
<tr>
<td>hintPosition</td>
<td>提示位置</td>
<td>string</td>
<td> </td>
</tr>
<tr>
<td>hintButtonLabel</td>
<td>提示按钮标签</td>
<td>string</td>
<td> </td>
</tr>
<tr>
<td>hintAnimation</td>
<td>删除动画</td>
<td>boolean</td>
<td> </td>
</tr>
<tr>
<td>steps</td>
<td>步骤</td>
<td>Step[]</td>
<td> </td>
</tr>
<tr>
<td>hints?</td>
<td>
<p>提示</p>
<p> </p>
<p> </p>
</td>
<td>Hint[]</td>
</tr>
</tbody>
</table><br><br>
来源：https://www.cnblogs.com/nlyangtong/p/11940070.html
頁:
[1]