网站功能操作分布引导插件：Intro.js介绍；React里如何使用Intro.js以及如何进行分页导航
插件作用：使用向导，引导新用户正确使用Web网站。我的环境是React+Mobx。
基本使用介绍，参加代码地址里的README.md：https://github.com/usablica/intro.js
安装：npm install intro.js --save
在项目里的app.js里引入css文件，全局引入一次即可：
import 'intro.js/introjs.css'; import 'intro.js/themes/introjs-modern.css'; // 使用模板，模板效果在线展示：https://introjs.com/docs/themes/list
在使用的的页面引入js文件，如果需要中文化，修改intro.js
import introJs from 'intro.js';
核心代码：intro.js/introjs.css/各种主题css(用于定制导览显示效果)
使用方法：把核心代码加入到作用范围内，把下列元素加到你需要导览的html元素上：
data-intro:使用导航时显示给用户的内容；data-step：表示导航的哪一步；data-position：表示导航元素显示在被导航内容的位置，更改属性定义参考官方文档。
introJs().goToStep(2).start();可以直接从某一个步骤开始。
introJs(".class").goToStep(2).start();introJs("#id").goToStep(2).start();可以直接使用id和class的方式引用元素
多页实现参考官方示例：https://introjs.com/example/multi-page/index.html
在React+Mobx里使用history.push("/api/v1/edit")进行后台页面切换(程序控制，而非用户点击方式切换页面)，效果类似于window.location.href=url
使用mobx的history.push是遇到的问题(使用history的前提必须有path)：
TypeError: Cannot read property 'history' of undefined
github地址：https://github.com/usablica/intro.js
文档地址：https://introjs.com/docs/
api地址：https://introjs.com/docs/intro/api/
官网地址：https://introjs.com/，里面有大量的示例，还有源代码：
点击Demo在线看效果，点击Source查看github上的代码，其实通过调试工具也可以看
React+Mobx的分页导航示例：
import React from 'react'; import { inject, observer } from 'utils/mobx-react'; import { message, Button, Col } from 'td-ui'; import introJs from 'intro.js'; /** * 1、通过dataSource设置表格数据 * 2、通过columns设置表格格式 * 3、通过rowKey设置表格每一行的唯一key * 4、如果不需要翻页，设置pagination=false */ @inject('manualStore', 'globalStore') // 将store注入到props中 // @inject() @observer export default class Manual extends React.Component { // constructor(props) { // super(props); // } handleClick() { const {history} = this.props; // 在这里引入history const {globalStore} = this.props; // history.push("/pluginSec/Search"); // introJs().setOption('showProgress', true); // introJs().start();
// 注意下面的设置属性的方法，当有多个属性时，就连着写，字典方式传入无效；而且start函数、oncomplete函数要继续写在后面。分开写的话，不生效。
introJs().setOption('showProgress', true).setOption('doneLabel', '下一页').start().oncomplete(function() { // const {history} = this.props; // 这里引入history是无效的 // message.info('ss'); history.push('/pluginSec/WhiteList'); // 分页的时候跳转 // history.push('/pluginSec/RuleAdd/add？multi=true'); // 加参数的方式，其实参数并不能传入进去 globalStore.setMulti(true); // 设置一个全局参数，用于跳转后的页面判断是否是引导进入到页面？如果是引入进入的页面，则继续引导 // window.location.href = '/manual/Manual'; // 不生效 }); // message.info("ss"); // message.error("error"); // console.log('sss'); } render() { return ( <div className='main_area' data-step="1" data-intro='请根据步骤完成设置，请点击下一步'> 我是使用手册 <Col span={8} style={{textAlign:'right', paddingRight:20}}> <Button type="primary" onClick={()=>this.handleClick()}>向导</Button> </Col> </div> ); } }
import React from 'react'; import { inject, observer } from 'utils/mobx-react'; import {Button, Table, message, Col} from 'td-ui'; import introJs from 'intro.js'; /** * 1、通过dataSource设置表格数据 * 2、通过columns设置表格格式 * 3、通过rowKey设置表格每一行的唯一key * 4、如果不需要翻页，设置pagination=false * 5、通过设置expandedRowRender函数来渲染展开信息（可以用过expandedRowKeys和onExpandedRowsChange来控制和获取展开行id，具体可参考文档） */ @inject('securityWhiteListStore') // 将store注入到props中 @inject('globalStore') // 将store注入到props中 @observer export default class WhiteList extends React.Component { constructor(props) { super(props); } componentWillMount() { const {securityWhiteListStore} = this.props; securityWhiteListStore.getWhiteList(); } componentDidMount() { // 一定在组件装载之后来做导航这个事情，不然导航无法显示 const {match,globalStore} = this.props; // introJs().start();
// 这是官方给的示例，通过传入参数来判断是否继续导航 // if (RegExp('multipage', 'gi').test(match.params)) { // introJs().start(); // } if(globalStore.multi) { // 判断全局参数是否设置，来决定是否进行继续导航 introJs().start(); // 只能激活当前页面的导航点，其他页面不可以，所以才介绍如何做分页导航 globalStore.setMulti(false); // 恢复全局参数，下次导航时重新设置 } } handleClick(id) { message.info(id); const {securityWhiteListStore} = this.props; securityWhiteListStore.deleteWhite(id); } modifyWhiteList(id) { const {history} = this.props; history.push('/pluginSec/WhiteListEdit/' + id); } render() { const { whiteList } = this.props.securityWhiteListStore; // 从this.props.expandTableStore中取出dataList const columns = [{ title: 'id', dataIndex: 'id', key: 'id', render: id => <a href="#">{id}</a>, }, { title: '规则内容', dataIndex: 'ruleContent', key: 'ruleContent', render: seqId => <a href="#">{seqId}</a>, }, { title: '项目名字', dataIndex: 'projectName', key: 'projectName', }, { title: '创建者', dataIndex: 'ruleCreater', key: 'ruleCreater', }, { title: '创建时间', dataIndex: 'modifyTime', key: 'modifyTime', }, { title: '操作', dataIndex: 'opt', key: 'opt', render: (text, record) => ( <span> <Button type="default" style={{marginRight:10}} onClick={() => this.modifyWhiteList(record.id)}>修改</Button> <Button type="danger" onClick={() => this.handleClick(record.id)}>删除</Button> </span> ), }]; return ( <div className="main_area"> <Col style={{"marginBottom": 20, "textAlign": "right"}}> <Button type="primary" onClick={()=>this.modifyWhiteList('add')} data-step="2" data-intro='Hello step one!'>新建</Button> </Col> <Table dataSource={whiteList.toJS()} columns={columns} rowKey='key' pagination={false} expandedRowRender={record => <p>{record.ruleDescription}</p>} /> </div> ); } }
最后再介绍一个封装了intro.js的插件：https://www.npmjs.com/package/intro.js-react#usage
参考：
https://devework.com/intro-js.html
