VUE页面引导插件vue-introjs使用记录

一，安装

  npm i intro.js
  npm i vue-introjs

二，全局引入CSS

import 'intro.js/introjs.css'

三，模板中使用

<template>
    <div
        v-intro="'提示文本'"
        v-intro-position="'top'"
        v-intro-tooltip-class="'tipclass'" <!--提示框CSS,注意，这里的tipclass类样式要写全局不要写在scoped里面-->
        v-intro-step="1"
    >
    </div>
</template>
<script>
    export default {
        mounted() {
            const introJS = require('intro.js')
            introjs().setOptions({
                prevLabel: '上一步',
                nextLabel: '下一步',
                skipLabel: '跳过',
                doneLabel: '知道了',
                exitOnOverlayClick：false //点击空白区域是否关闭提示组件
            }).start()
        }
    }
</script>