vue-beginner-guide

npm install vue-beginner-guide -S

import Guide from 'vue-beginner-guide';
Vue.component('Guide', Guide);

config: [{
    dom: 'block1',// Box selection element, DOM node or ID name
    title: 'Step 1 Title',// Description copy title
    cont: ['1.This is the first paragraph', '2.This is the second paragraph'],// State the content of the copy, each item is a paragraph
    btnText: { // Action buttons
        pre: 'previous',// Previous button copy
        next: 'next',// Next button copywriting
        close: 'close'// Close button copywriting
    },

    width: 200, // Optional:You can customize the width of the box area. When not specified, the component automatically takes the width of the target element
    height: 100, // Optional:The box area defines the height. If this is not specified, the component automatically takes the width of the target element

    fakeImg: './image.png' // Optional:Overwrite the image of the target element, if you want to replace the element to be illustrated with a picture.
},
{
    //... Step 2
}]

npm install vue-beginner-guide -S

import Guide from 'vue-beginner-guide';

Vue.component('Guide', Guide);

config: [{
    dom: 'block1', //框选元素，dom节点或id名
    title: '第一步标题', //说明文案标题
    cont: ['1.这是第一段文案', '2.这是第二段文案'], //说明文案内容，每一项是一段
    btnText: { //操作按钮
        pre: '上一步', // 上一步按钮文案
        next: '下一步', // 下一步按钮文案
        close: '关闭' // 关闭引导按钮文案
    },

    width: 200, //（可选）框选区域自定义宽度，当不指定时，组件自动取目标元素的宽度
    height: 100, //（可选）框选区域自定义高度，当不指定时，组件自动取目标元素的高度

    fakeImg: './image.png' //（可选）覆盖目标元素的图片（如果想用一张图片替代要说明的元素时）
},
{
    //... 第二步
}]