chore: replace intro.js with driver.js (#3151)

vbenjs · Oct 15, 2023 · d30fd1d · d30fd1d
1 parent 8f6153f
commit d30fd1d
Show file tree

Hide file tree

Showing 3 changed files with 79 additions and 35 deletions.
diff --git a/package.json b/package.json
@@ -82,9 +82,9 @@
     "cropperjs": "^1.5.13",
     "crypto-js": "^4.1.1",
     "dayjs": "^1.11.9",
+    "driver.js": "^1.3.0",
     "echarts": "^5.4.2",
     "exceljs": "^4.3.0",
-    "intro.js": "^7.0.1",
     "lodash-es": "^4.17.21",
     "mockjs": "^1.1.0",
     "nprogress": "^0.2.0",
@@ -116,7 +116,6 @@
     "@purge-icons/generated": "^0.9.0",
     "@types/codemirror": "^5.60.8",
     "@types/crypto-js": "^4.1.1",
-    "@types/intro.js": "^5.1.1",
     "@types/lodash-es": "^4.17.7",
     "@types/mockjs": "^1.0.7",
     "@types/nprogress": "^0.2.0",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/views/demo/setup/index.vue b/src/views/demo/setup/index.vue
@@ -7,35 +7,40 @@
   import { defineComponent } from 'vue';
   import { PageWrapper } from '/@/components/Page';
   import { useDesign } from '/@/hooks/web/useDesign';
-  import intro from 'intro.js';
-  import 'intro.js/minified/introjs.min.css';
+  import { driver } from 'driver.js';
+  import 'driver.js/dist/driver.css';
 
   export default defineComponent({
     components: { PageWrapper },
     setup() {
       const { prefixVar } = useDesign('');
 
       function handleStart() {
-        intro()
-          .setOptions({
-            steps: [
-              {
+        driver({
+          showProgress: true,
+          steps: [
+            {
+              popover: {
                 title: 'Welcome',
-                intro: 'Hello World! 👋',
+                description: 'Hello World! 👋',
               },
-              {
+            },
+            {
+              element: `.${prefixVar}-layout-header-trigger`,
+              popover: {
                 title: 'Collapse Button',
-                element: document.querySelector(`.${prefixVar}-layout-header-trigger`)!,
-                intro: 'This is the menu collapse button.',
+                description: 'This is the menu collapse button.',
               },
-              {
+            },
+            {
+              element: `.${prefixVar}-layout-header-action`,
+              popover: {
                 title: 'User Action',
-                element: document.querySelector(`.${prefixVar}-layout-header-action`)!,
-                intro: 'This is the user function area.',
+                description: 'This is the user function area.',
               },
-            ],
-          })
-          .start();
+            },
+          ],
+        }).drive();
       }
       return { handleStart };
     },