vue-tuto v0.1.1

vue-tuto

Installation

$ yarn add vue-tuto

or

$ npm install vue-tuto

Usage

use global plugin

// main.js
import Vue from 'vue';
import VueTuto from 'vue-tuto';

import 'vue-tuto/dist/tutorial.css';

Vue.use(VueTuto);

use component

// ###.vue

import { VueTutorial } from 'vue-tuto';
import 'vue-tuto/dist/tutorial.css';

export default {
  components: {
    VueTutorial,
  },
};

component

// ###.vue
<template>
  <tutorial
    :steps="steps"
    :run="run"
    use-jump
    @end="handleCallback"
  />
</template>
<script>
// .. import
export default {
  // ... use component
  data() {
    return {
      steps: [
        {
          target: '.box-item-0',
          content: 'blah~ blah~',
          showSkip: true,
        },
        {
          target: '.box-item-1',
          content: 'blah~ blah~2',
          showSkip: true,
        },
        {
          target: '.box-item-2',
          content: 'blah~ blah~3',
        },
      ],
      run: false,
    }
  },
  methods: {
    handleCallback(reason) {
      // callback logic
    }
  },
}
</script>

Props

• buttonOption (default: {})

{
  skip: {
    text: '스킵',
    style: {
      color: 'white', fontWeight: 'bold', backgroundColor: 'black',
    }
  },
  next: { text: '다음', lastText: '닫기' },
  prev: { text: '이전' },
}

• steps (default: [])

[
  {
    target: '.element .query',
    duration: 1000,
    offset: -100,
    padding: 10,
    useJump: false, // 개별 처리
    showSkip: false, // 개별 처리
  }
]