hotmaneil熱血新好男人

●參閱：https://driverjs.com/

•首先準備一份快速建置Vue網站的Demo範例，參閱：https://vite.dev/guide/

•開啟cmd輸入：

npm create vite@latest

預設是TypeScript，也可以選擇現在專案用的JavaScript

建置完成需要輸入如下安裝套件

npm install

•在終端機輸入如下安裝driver.js

npm install driver.js

寫第一個driver.js的範例：

App.vue

<script setup>
import HelloWorld from './components/HelloWorld.vue'
import {callSelectLogo} from './myFirstDriver.js'
import {callStepByStep} from './stepByStep.js'


</script>

<template>
  <div>
    <a href="https://vite.dev" target="_blank">
      <img src="/vite.svg" class="logo" alt="Vite logo" />
    </a>
    <a href="https://vuejs.org/" target="_blank">
      <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
    </a>
  </div>
  <HelloWorld msg="Vite + Vue" />
  <button @click="callSelectLogo">呼叫Logo</button>
  <button @click="callStepByStep">呼叫一步一步的教學</button>
</template>

<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>

myFirstDriver.js

import { driver } from "driver.js";
import "driver.js/dist/driver.css";

export function callSelectLogo() {
    const driverObj = driver();
    driverObj.highlight({
    element: ".logo",
    popover: {
        title: "Title",
        description: "Description"
    }
    });
}

export default callSelectLogo

stepByStep.js

import { driver } from "driver.js";
import "driver.js/dist/driver.css";

/** 一步一步的教學 */
export function callStepByStep() {
    const driverObj = driver({
        showProgress: true,
        steps:[
            { 
                element: '.logo', 
                popover: { 
                    title: 'vite', 
                    description: '這是vite的logo', 
                    side: "left", 
                    align: 'start'
                 }
            },
            { 
                element: '.logo.vue', 
                popover: { 
                    title: 'vite', 
                    description: '這是vue的logo', 
                    side: "left", 
                    align: 'start'
                 }
            },
            { 
                element: '.card', 
                popover: { 
                    title: 'card', 
                    description: '這是記數卡片', 
                    side: "left", 
                    align: 'start'
                 }
            },
        ]
    });
    driverObj.drive();
}

export default callStepByStep