页面新手引导插件 driver.js

桃扇骨 2022-12-23 03:53 390阅读 0赞

笔者较为熟悉 vue 框架，就在这个里面为大家演示吧。（主要是我也没试过 react 行不行）

先上效果图（pc端和移动端均可使用，笔者这里是为了录制 gif 图，才把页面缩小）

![在这里插入图片描述][20201122135928641.gif_pic_center]

1.安装

npm install driver.js

虽然插件提供链接方式引入，但一般的开发中很少使用

main.js

import Driver from 'driver.js';
    import 'driver.js/dist/driver.min.css';
    
    Vue.prototype.$driver = new Driver({ 
      allowClose: false, //禁止点击外部关闭
      doneBtnText: '完成', // 完成按钮标题
      closeBtnText: '关闭', // 关闭按钮标题
      stageBackground: '#fff', // 引导对话的背景色
      nextBtnText: '下一步', // 下一步按钮标题
      prevBtnText: '上一步', // 上一步按钮标题
    })

一般使用都是给要引导的页面创建相应的数组对象导出使用，例如创建一个defineSteps.js

export const defineSteps = [
      { 
        element: "#demo1",
        popover: { 
          title: "演示标题1",
          description: "这是详细描述\n",
          position: "bottom-center",
        },
      },
      { 
        element: "#demo2",
        popover: { 
          title: "演示标题2",
          description: "这是详细描述\n",
          position: "bottom-center",
        },
      },
      { 
        element: "#demo3",
        popover: { 
          title: "演示标题3",
          description: "这是详细描述\n",
          position: "top-center",
        },
      },
    ]
    
    export default defineSteps

一个对象就是一个引导框，看你需要几个就配置几个

想要使用的页面中

<template>
      <div>
        <h1 id="demo1">dfdsfsdf</h1>
        <h2 id="demo2">dfdsfsdf</h2>
        <h3 id="demo3">dfdsfsdf</h3>
      </div>
    </template>
    
    <script>
    import defineSteps from './defineSteps'
    
    export default { 
      name: "HelloWorld",
      props: { 
        msg: String,
      },
      data() { 
        return { 
          driver: null,
        };
      },
      mounted() { 
        this.$driver.defineSteps(defineSteps);
        this.$driver.start();
      },
    };
    </script>

完美撒花  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNDc3NzIx_size_16_color_FFFFFF_t_70_pic_center]

[20201122135928641.gif_pic_center]: /images/20221120/63df9fc504c04e719a7f8ab4a419e454.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNDc3NzIx_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/e53ecc470ced4974856baf23bef2e788.png