網站功能操做分佈引導插件：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';

/**
 * 一、經過dataSource設置表格數據
 * 二、經過columns設置表格格式
 * 三、經過rowKey設置表格每一行的惟一key
 * 四、若是不須要翻頁，設置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';

/**
 * 一、經過dataSource設置表格數據
 * 二、經過columns設置表格格式
 * 三、經過rowKey設置表格每一行的惟一key
 * 四、若是不須要翻頁，設置pagination=false
 * 五、經過設置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