Feat: 增加 driver.js demo

Lruihao · Aug 8, 2023 · eb8fbd0 · eb8fbd0
1 parent e87a1aa
commit eb8fbd0
Show file tree

Hide file tree

Showing 4 changed files with 134 additions and 6 deletions.
diff --git a/package.json b/package.json
@@ -22,7 +22,13 @@
     "lint": "vue-cli-service lint",
     "serve": "npm run gr && vue-cli-service serve"
   },
-  "dependencies": {},
+  "dependencies": {
+    "core-js": "^3.8.3",
+    "driver.js": "^1.2.1",
+    "element-ui": "^2.15.13",
+    "vue": "^2.6.14",
+    "vue-router": "^3.5.1"
+  },
   "devDependencies": {
     "@babel/core": "^7.12.16",
     "@babel/eslint-parser": "^7.12.16",
@@ -31,18 +37,14 @@
     "@vue/cli-plugin-eslint": "~5.0.0",
     "@vue/cli-plugin-router": "~5.0.0",
     "@vue/cli-service": "~5.0.0",
-    "core-js": "^3.8.3",
-    "element-ui": "^2.15.13",
     "eslint": "^7.32.0",
     "eslint-plugin-vue": "^8.0.3",
     "lint-staged": "^11.1.2",
     "sass": "^1.32.7",
     "sass-loader": "^12.0.0",
-    "vue": "^2.6.14",
-    "vue-router": "^3.5.1",
     "vue-template-compiler": "^2.6.14"
   },
   "gitHooks": {
     "pre-commit": "lint-staged"
   }
-}
+}
diff --git a/src/router.js b/src/router.js
@@ -5,6 +5,12 @@ import Vue from 'vue'
 Vue.use(VueRouter)
 
 const routes = [
+  {
+    path: '/guide',
+    name: 'guide',
+    meta: { description: 'driver.js demo' },
+    component: () => import(/* webpackChunkName: "guide" */ '@/views/guide.vue'),
+  },
   {
     path: '/',
     name: 'home',

diff --git a/src/views/guide.vue b/src/views/guide.vue
@@ -0,0 +1,115 @@
+<!-- driver.js demo -->
+<template>
+  <div>
+    <div class="page-header">
+      <h1>Page Header</h1>
+    </div>
+    <div class="top-nav">
+      <ul>
+        <li>Nav Item 1</li>
+        <li>Nav Item 2</li>
+        <li>Nav Item 3</li>
+      </ul>
+    </div>
+    <div class="sidebar">
+      <ul>
+        <li>Sidebar Item 1</li>
+        <li>Sidebar Item 2</li>
+        <li>Sidebar Item 3</li>
+      </ul>
+    </div>
+    <div class="footer">
+      <p>Footer</p>
+    </div>
+  </div>
+</template>
+
+<script>
+import { driver } from 'driver.js'
+import 'driver.js/dist/driver.css'
+
+export default {
+  name: 'GuideView',
+  mounted() {
+    const driverObj = driver({
+      popoverClass: 'driverjs-theme',
+      showProgress: true,
+      popover: {
+        title: 'Style However You Want',
+        description: 'You can use the default class names and override the styles or you can pass a custom class name to the popoverClass option either globally or per step.'
+      },
+      steps: [
+        { element: '.page-header', popover: { title: 'Title', description: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus sunt, assumenda amet, temporibus minima facilis repellendus cupiditate unde porro ex obcaecati, tempore quidem optio inventore cumque quam dolore sapiente deleniti.' } },
+        { element: '.top-nav', popover: { title: 'Title', description: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus sunt, assumenda amet, temporibus minima facilis repellendus cupiditate unde porro ex obcaecati, tempore quidem optio inventore cumque quam dolore sapiente deleniti.' } },
+        { element: '.sidebar', popover: { title: 'Title', description: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus sunt, assumenda amet, temporibus minima facilis repellendus cupiditate unde porro ex obcaecati, tempore quidem optio inventore cumque quam dolore sapiente deleniti.' } },
+        { element: '.footer', popover: { title: 'Title', description: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus sunt, assumenda amet, temporibus minima facilis repellendus cupiditate unde porro ex obcaecati, tempore quidem optio inventore cumque quam dolore sapiente deleniti.' } },
+      ]
+    })
+
+    driverObj.drive()
+  },
+}
+</script>
+
+<style lang="scss">
+.driver-popover.driverjs-theme {
+  background-color: #fde047;
+  color: #000;
+}
+
+.driver-popover.driverjs-theme .driver-popover-title {
+  font-size: 20px;
+}
+
+.driver-popover.driverjs-theme .driver-popover-title,
+.driver-popover.driverjs-theme .driver-popover-description,
+.driver-popover.driverjs-theme .driver-popover-progress-text {
+  color: #000;
+}
+
+.driver-popover.driverjs-theme button {
+  flex: 1;
+  text-align: center;
+  background-color: #000;
+  color: #ffffff;
+  border: 2px solid #000;
+  text-shadow: none;
+  font-size: 14px;
+  padding: 5px 8px;
+  border-radius: 6px;
+}
+
+.driver-popover.driverjs-theme button:hover {
+  background-color: #000;
+  color: #ffffff;
+}
+
+.driver-popover.driverjs-theme .driver-popover-navigation-btns {
+  justify-content: space-between;
+  gap: 3px;
+}
+
+.driver-popover.driverjs-theme .driver-popover-close-btn {
+  color: #9b9b9b;
+}
+
+.driver-popover.driverjs-theme .driver-popover-close-btn:hover {
+  color: #000;
+}
+
+.driver-popover.driverjs-theme .driver-popover-arrow-side-left.driver-popover-arrow {
+  border-left-color: #fde047;
+}
+
+.driver-popover.driverjs-theme .driver-popover-arrow-side-right.driver-popover-arrow {
+  border-right-color: #fde047;
+}
+
+.driver-popover.driverjs-theme .driver-popover-arrow-side-top.driver-popover-arrow {
+  border-top-color: #fde047;
+}
+
+.driver-popover.driverjs-theme .driver-popover-arrow-side-bottom.driver-popover-arrow {
+  border-bottom-color: #fde047;
+}
+</style>
diff --git a/yarn.lock b/yarn.lock
@@ -2825,6 +2825,11 @@ dotenv@^10.0.0:
   resolved "https://registry.npmjs.org/dotenv/-/dotenv-10.0.0.tgz#3d4227b8fb95f81096cdd2b66653fb2c7085ba81"
   integrity sha512-rlBi9d8jpv9Sf1klPjNfFAuWDjKLwTIJJ/VxtoTwIR6hnZxcEOQCZg2oIL3MWBYw5GpUDKOEnND7LXTbIpQ03Q==
 
+driver.js@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.npmjs.org/driver.js/-/driver.js-1.2.1.tgz#63d0c43062b34f42a4572d95d50f91667b0d44a1"
+  integrity sha512-6nDbVnZdjRgTsJOOmGRmMf/t6cHnMyyZK/wLSbdLZp33I7odPglw1cVlX3TMaPnMDYIJUq7h8a0buejOLqM7XQ==
+
 duplexer@^0.1.2:
   version "0.1.2"
   resolved "https://registry.npmjs.org/duplexer/-/duplexer-0.1.2.tgz#3abe43aef3835f8ae077d136ddce0f276b0400e6"