ページガイドを「vue-page-guide」で実装する

by kabanoki

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-page-guide.umd.min.js"></script>
<div id="app">
  <button class="btn" @click="guideOn">ガイドスタート</button>
  <div>
    <div 
      class="my-elm"
      v-page-guide.bottom="'ツールチップを表示1'"
    >
    area1
    </div>
    <div 
    class="my-elm"
    v-page-guide.bottom="'ツールチップを表示2'"
    >
    area2
    </div>
    <div 
    class="my-elm"
    v-page-guide.bottom="'ツールチップを表示3'"
    >
    area3
    </div>
    <div 
    class="my-elm"
    v-page-guide.right="'ツールチップを表示4'"
    >
    area4
    </div>
    <div 
    class="my-elm"
    v-page-guide.top="'ツールチップを表示5'"
    >
    area5
    </div>
    <div 
    class="my-elm"
    v-page-guide.left="'ツールチップを表示6'"
    >
    area6
    </div>
  </div>
  

  <v-page-guide v-model="showGuide"></v-page-guide> 
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>

CSS

#app {
      text-align: center;
      padding:30px;
    }

    .v-page-guide__overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 99;
    }


    .v-page-guide__text {
      margin: 0;
    }


    .v-page-guide__tooltip {
      position: relative;
      background-color: #fff;
      border-radius: 3px;
      margin: 10px;
      padding: 10px;
      z-index: 100;
      -webkit-filter: drop-shadow(0 10px 20px rgba(0,0,0,0.19)) drop-shadow( 0 6px 6px rgba(0,0,0,0.23));
      filter: drop-shadow(0 10px 20px rgba(0,0,0,0.19)) drop-shadow( 0 6px 6px rgba(0,0,0,0.23));
    }

    .v-page-guide__tooltip[x-placement^="bottom"]:after{
      bottom: 100%;
      left: 50%;
      border: solid transparent;
      content: " ";
      height: 0;
      width: 0;
      position: absolute;
      pointer-events: none;
      border-bottom-color: #fff;
      border-width: 10px;
      margin-left: -10px;
    }

    .v-page-guide__tooltip[x-placement^="top"]:after{
      top: 100%;
      left: 50%;
      border: solid transparent;
      content: " ";
      height: 0;
      width: 0;
      position: absolute;
      pointer-events: none;
      border-top-color: #fff;
      border-width: 10px;
      margin-left: -10px;
    }

    .v-page-guide__tooltip[x-placement^="left"]:after{
      left: 100%;
      top: 50%;
      border: solid transparent;
      content: " ";
      height: 0;
      width: 0;
      position: absolute;
      pointer-events: none;
      border-left-color: #fff;
      border-width: 10px;
      margin-top: -10px;
    }

    .v-page-guide__tooltip[x-placement^="right"]:after{
      right: 100%;
      top: 50%;
      border: solid transparent;
      content: " ";
      height: 0;
      width: 0;
      position: absolute;
      pointer-events: none;
      border-right-color: #fff;
      border-width: 10px;
      margin-top: -10px;
    }


    .v-page-guide__fade-enter-active, .v-page-guide__fade-leave-active {
...

Vue

const VPageGuide  = window['vue-page-guide'].default;

Vue.use(VPageGuide);

let app = new Vue({
  el: '#app',
  data: {
    showGuide:false
  },
  methods: {
    guideOn: function(){
      this.showGuide = true;
    }
  }
});