快捷導(dǎo)航

vue使用driver.js完成頁(yè)面引導(dǎo)功能的示例詳解

更新時(shí)間：2023年08月02日 10:51:50 作者：阿wei程序媛

在Vue中,driver.js通常是指用于實(shí)現(xiàn)用戶引導(dǎo)和教程功能的JavaScript庫(kù),它可以幫助開(kāi)發(fā)者在應(yīng)用程序中創(chuàng)建交互式的引導(dǎo)和教程,以引導(dǎo)用戶了解應(yīng)用程序的不同功能和界面,本文就簡(jiǎn)單的給大家介紹一下vue如何使用driver.js完成頁(yè)面引導(dǎo)功能

一.安裝driver.js

# Using npm
npm install driver.js
# Using pnpm
pnpm install driver.js
# Using yarn
yarn add driver.js

二.在自己需要引導(dǎo)的頁(yè)面上引入driver.js

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

三.在外部建一個(gè)steps.js

const steps = [
  {
    element: '#A',
    popover: {
      title: '幫助',
      description: '第一步指引',
      position: 'bottom'
    }
  },
  {
    element: '#B',
    popover: {
      title: '幫助',
      description: '第二步指引',
      position: 'bottom'
    }
  },
  {
    element: '#C',
    popover: {
      title: '幫助',
      description: '第三步指引',
      position: 'bottom'
    },
  },
  {
    element: '#D',
    popover: {
      title: '幫助',
      description: '第四步指引',
      position: 'bottom'
    },
  },
]
export default steps

四.引導(dǎo)頁(yè)面里面引入steps.js，其引導(dǎo)頁(yè)面完整代碼

<template>
<div class="app-container">
  <div class="help">
    <el-button type="success" plain @click.prevent.stop="guide">幫助</el-button>
  </div>
  <div class="one" id="A">
    <h1>第一步</h1>
    <div>來(lái)嘍</div>
  </div>
  <div class="two" id="B">
    <h1>第二步</h1>
    <div>來(lái)嘍</div>
  </div>
  <div class="three" id="C">
    <h1>第三步</h1>
    <div>來(lái)嘍</div>
  </div>
  <div class="four" id="D">
    <h1>第四步</h1>
    <div>結(jié)束</div>
  </div>
</div>
</template>
<script>
import { driver } from "driver.js";
import "driver.js/dist/driver.css";
import steps from "./steps";
export default {
  name: "index",
  methods:{
    guide() {
      const driverObj = driver({
        doneBtnText: '完成', // 最后一個(gè)按鈕的文本
        nextBtnText: '下一步', // 下一步
        prevBtnText: '上一步', // 上一步
        showProgress: true,//顯示進(jìn)度條
        steps: steps
      });
      driverObj.drive();
    },
  }
}
</script>
<style scoped>
.help {
  display: flex;
  justify-content: right;
}
.one {
  width: 100px;
}
.two {
  margin: 0 auto;
  width: 100px;
}
.three{
  width: 100px;
  margin: 0 0 0 1500px;
}
</style>

以上代碼就能實(shí)現(xiàn)其頁(yè)面引導(dǎo)的功能

到此這篇關(guān)于vue使用driver.js完成頁(yè)面引導(dǎo)功能的示例詳解的文章就介紹到這了,更多相關(guān)vue driver.js頁(yè)面引導(dǎo)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: