全部 / 工具 · 2021年5月19日 0

新手引导组件

广告位招租 (vx: ghostcode, 备注:网站广告)

新产品或新功能上线,为了帮助用户快速明白产品的意图和使用方法,所以新手引导必不可少,下面来介绍几个:

Intro.js

这个之前就用过,现在官网也该了更清晰了

使用方法:

  1. Include the JavaScript and CSS
JS : https://unpkg.com/intro.js/minified/intro.min.js
CSS: https://unpkg.com/intro.js/minified/introjs.min.css

2. Call the introJs.start() method

The start() method configures the library and starts the product tour.

introJs().setOptions({
  steps: [{
    intro: "Hello world!"
  }, {
    element: document.querySelector('#login'),
    intro: "Click here to login!"
  }]
}).start();

详细的看文档: https://github.com/usablica/intro.js

Driver.js

使用方法:

  1. Install

yarn or npm

yarn add driver.js<br>npm install driver.js

cdn

<script src="https://unpkg.com/driver.js/dist/driver.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/driver.js/dist/driver.min.css">

grab the code from dist directory and include it directly.

<link rel="stylesheet" href="/dist/driver.min.css">
<script src="/dist/driver.min.js"></script>

2. usage

import Driver from <a href="https://github.com/kamranahmedse/driver.js">'driver.js'</a>;
import <a href="https://github.com/kamranahmedse/driver.js">'driver.js/dist/driver.min.css'</a>;
const driver = new Driver();
driver.highlight('#create-post');