js-新手引导插件应用

本文以vue使用新手引导插件为例

一、intro.js

vue-intro官网地址：https://www.npmjs.com/package/vue-introjs

1、vue中安装相关插件

npm i intro.js --save
npm i vue-introjs --save

2、webpack配置

// webpack.base.config.js
const webpack = require('webpack')
{
    plugins: [
        new webpack.ProvidePlugin({
            // other modules
            introJs: ['intro.js']
        })
    ]
}

如果是vue-cli3的项目，则在vue.config.js

chainWebpack: config => {
    config.plugin('provide').use(webpack.ProvidePlugin, [{
      // other modules
      introJs: ['intro.js']
    }])    
}

3、在使用的地方引入插件，如果是全局使用则需在main.js引入

import VueIntro from 'vue-introjs'
Vue.use(VueIntro);
import 'intro.js/introjs.css';

4、vue文件中使用方式

<div 
  v-intro="'提示信息'"
  v-intro-position="'bottom'"
>
  添加引导的DOM节点
</div>

5、在js方法中定义的方式为

mounted () {
  this.startIntro()
},
methods: {
  startIntro() {
    this.$intro().setOptions({
      prevLabel: "上一步",
      nextLabel: "下一步",
      skipLabel: "跳过",
      doneLabel: "完成",
      steps: [
        {
          element: '#step1',
          intro: "This is a <b>bold</b> tooltip."，
          position: 'bottom'
        },
        {
          element: '#step2',
          intro: "Ok, <i>wasn't</i> that fun?",
        },
        {
          element: '#step3',
          intro: 'More features, more <span style="color: red;">f</span><span style="color: green;">u</span><span style="color: blue;">n</span>.',
        }
      ]
    }).start();
  }
}

二、pagewalkthrough.js

1、官网地址：https://www.jq22.com/jquery-info7009

2、使用之前需要引入相关的插件：

<link type="text/css" rel="stylesheet" href="jquery.pagewalkthrough.css" />  
<script type="text/javascript" src="jquery.min.js"></script>  
<script type="text/javascript" src="jquery.pagewalkthrough.min.js"></script>

如果是vue项目，使用时引入方式为：

import $ from 'jquery'
import './utils/jquery.pagewalkthrough';

css文件需在<style></style>中引入，其中的相关id*="walkthrough"样式是针对在DOM元素中定义的提示信息，使其在页面隐藏

<style>
 @import './utils/jquery.pagewalkthrough.css';
 [id*="walkthrough"] {
   display: none;
 }
</style>

webpack配置jquery

// webpack.base.config.js
const webpack = require('webpack')
{
    plugins: [
        new webpack.ProvidePlugin({
            // other modules
            $: "jquery",
            jQuery: "jquery",
            jquery: "jquery",
            sss"window.jQuery": "jquery"
        })
    ]
}

3、基本用法代码如下：

$(function() {
    // 设置参数
    $('body').pagewalkthrough({
        name: 'introduction',
        steps: [{
            popup: { //定义弹出提示引导层
                content: '#walkthrough-1',
                type: 'modal'
            }
        },
        {
            wrapper: '.w1',
            //当前引导对应的元素位置
            popup: {
                content: '#walkthrough-2',
                //关联的内容元素
                type: 'tooltip',
                //弹出方式（tooltip和modal以及nohighlight）
                position: 'bottom' //弹出层位置（top,left, right or bottom）
            }
        }]
    });
 
    // 一步一步显示引导页
    $('body').pagewalkthrough('show');
});

4、如果需要修改上一步、下一步、关闭蒙层引导按钮文本，需要修改buttons属性，与steps属性同级

buttons: {
  jpwClose: {
    i18n: "点击关闭"
  },
  jpwNext: {
    i18n: "下一步"
  },
  jpwPrevious: {
    i18n: "上一步"
  },
  jpwFinish: {
    i18n: "完成"
  }
}

5、如果需要在关闭蒙层引导之前执行什么操作，需要重写onClose方法，与steps属性同级

onClose: function(){
   console.log('关闭')
}

github代码地址：https://github.com/xiaoaiai/vue-sass-test/tree/main/src/views/guide