Vueはintroを使用する.js初心者ガイド

導入
npmダウンロード:npm install intro.js --save main.jsに導入:

import IntroJs from 'intro.js'
import 'intro.js/introjs.css';

Vue.use(IntroJs);

パラメータの詳細
ページ
ガイドの指示が必要なラベルに次のプロパティを追加すると、プラグインは自動的に現在のラベル領域をハイライトします.

<div data-step="1" data-intro="     1!"></div>
<div data-step="2" data-intro="     2!"></div>
<div data-step="3" data-intro="     3!"></div>

説明:

data-step:ステップ

data-intro:配布ガイドの内容

data-position:ブートコンテンツ表示位置、パラメータ:left,right,top,bottom

JS
jsで参照される2つの重要な方法は、次のとおりです.

oncomplete「スキップ」ボタンコールバック方法

を選択

onexit「終了」ボタンコールバック方法

を選択
一般的には、ページのロード時に呼び出すことができます.

//     
function guide() {
    introJs().setOptions({
        prevLabel: "   ",
        nextLabel: "   ",
        skipLabel: "  ",
        doneLabel: "  "
    }).oncomplete(function () {
        //            
    }).onexit(function () {
        //       ，      
    }).start();
}

キーワード:setOptionの主なパラメータは次のとおりです.

	  /*            */
      nextLabel: 'Next →',
      /*            */
      prevLabel: '← Back',
      /*           */
      skipLabel: 'Skip',
      /*           */
      doneLabel: 'Done',
      /*                  */
      tooltipPosition: 'bottom',
      /*            */
      tooltipClass: '',
      /*           */
      highlightClass: '',
      /*       Esc   */
      exitOnEsc: true,
      /*             */
      exitOnOverlayClick: true,
      /*            */
      showStepNumbers: true,
      /*           */
      keyboardNavigation: true,
      /*         */
      showButtons: true,
      /*             */
      showBullets: true,
      /*         */
      showProgress: false,
      /*            */
      scrollToElement: true,
      /*         */
      overlayOpacity: 0.8,
      /*           ，         */
      positionPrecedence: ["bottom", "top", "right", "left"],
      /*              */
      disableInteraction: false,
      /*        */
      hintPosition: 'top-middle',
      /*        */
      hintButtonLabel: 'Got it'