Avue项目基于Vue2.x使用mixin封装用户引导driver插件配置文件

官方文档

Avue

https://avuejs.com/

混入 (mixin)

https://cn.vuejs.org/v2/guide/mixins.html#%E5%9F%BA%E7%A1%80

driver.js插件

Github地址：https://github.com/kamranahmedse/driver.js

Gitee地址：https://gitee.com/mirrors/Driverjs

在线案例：https://kamranahmed.info/driver.js/

效果截图

1. 点击“打开引导”按钮

2. 点击下一步

3. 点击下一步

4. 点击完成

实现步骤

前提

使用Avue-cli2.0.0完成项目搭建（使用Vue-cli搭建的项目亦可实现，只是文件目录会有点不同，创建的文件放哪其实随意，看自己啦），并成功运行。安装依赖：

npm install

// 安装driver.js
npm install driver.js

// 安装echarts（非必需依赖）
npm install echarts --save

第一步： 在mixins文件夹下新建一个js文件，这里命名为guide.js，用以完成引导插件的初始化和调用方法定义。

guide.js代码如下

import Driver from "driver.js";
import "driver.js/dist/driver.min.css";
import steps from "@/util/guide/steps.js";

const mixGuide = {
    data() {
        return {
            // 引导组件
            driver: null,
        };
    },
    mounted() {
        // 初始化引导组件
        this.driver = new Driver({
            doneBtnText: "完成",
            closeBtnText: "关闭",
            stageBackground: "#fff",
            nextBtnText: "下一步",
            prevBtnText: "上一步",
        });
    },
    methods: {
        // 此方法非必需
        testGuide() {
            return '打开引导'
        },
        guide() {
            this.driver.defineSteps(steps);
            this.driver.start();
        },
    }
}

export {
    mixGuide
}

第二步： 在util文件夹下新建一个js文件，这里命名为steps.js，用以完成引导步骤定义和提示文案配置。

steps.js代码如下

const steps = [{
        element: '#top-data',
        popover: {
            title: '数据统计',
            description: '包括密码总计、已过期的密码、违反策略、冲突的密码',
            position: 'bottom'
        }
    },
    {
        element: '#myChart',
        popover: {
            title: '柱状图统计',
            description: '统计数据',
            position: 'bottom'
        }
    },
    {
        element: '#mix-title',
        popover: {
            title: '引导按钮',
            description: '打开用户引导弹窗',
            position: 'right'
        }
    }
]

export default steps

第三步：在页面中调用引导方法

<template>
  <div>
    <basic-container id="top-data">
      <avue-data-box :option="option"></avue-data-box>
    </basic-container>

    <basic-container id="echarts-data">
      <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM 单位为像素 -->
      <div id="myChart" :style="{ width: '800px', height: '380px' }"></div>
    </basic-container>

    <basic-container>
      <el-button
        id="mix-title"
        icon="el-icon-question"
        type="primary"
        @click.prevent.stop="guide"
      >
        {{ mixTitle }}
      </el-button>
    </basic-container>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { mixGuide } from "@/mixins/guide";
export default {
  name: "Test",
  //注册mixins
  mixins: [mixGuide],
  data() {
    return {
      mixTitle: this.testGuide(),
      option: {
        span: 6,
        data: [
          {
            title: "密码总计",
            count: 83,
            icon: "el-icon-pie-chart",
            color: "rgb(49, 180, 141)",
            // href: "https://avuejs.com",
            target: "_blank",
          },
          {
            title: "已过期的密码",
            count: 71,
            icon: "el-icon-key",
            color: "#E6A23C",
            // href: "https://avuejs.com",
            target: "_blank",
          },
          {
            title: "违反策略",
            count: 17,
            icon: "el-icon-attract",
            color: "rgb(56, 161, 242)",
            // href: "https://avuejs.com",
            target: "_blank",
          },
          {
            title: "冲突的密码",
            count: 2,
            icon: "el-icon-lock",
            color: "rgb(230, 71, 88)",
            // href: "https://avuejs.com",
            target: "_blank",
          },
        ],
      },
      echartsdata: {
        title: {
          text: "密码活动",
        },
        color: ["#FF6666", "#FF9966", "#99CC99", "#CC3399"],
        dataset: {
          source: [
            [
              "type",
              "一月",
              "二月",
              "三月",
              "四月",
              "五月",
              "六月",
              "七月",
              "八月",
              "九月",
              "十月",
              "十一月",
              "十二月",
            ],
            ["获取", 2, 5, 6, 5, 15, 29, 52, 43, 389, 221, 112, 277],
            ["更改", 1, 2, 2, 0, 68, 4, 0, 5, 2, 1, 3, 4],
            ["访问请求", 0, 1, 4, 0, 68, 7, 1, 1, 2, 8, 3, 4],
            ["远程连接", 1, 2, 0, 7, 1, 6, 1, 3, 14, 20, 6, 11],
          ],
        },
        legend: {},
        xAxis: {
          type: "category",
          axisTick: {
            show: false,
          },
        },
        yAxis: {},
        series: [
          {
            type: "bar",
            seriesLayoutBy: "row",
          },
          {
            type: "bar",
            seriesLayoutBy: "row",
          },
          {
            type: "bar",
            seriesLayoutBy: "row",
          },
          {
            type: "bar",
            seriesLayoutBy: "row",
          },
        ],
      },
    };
  },
  mounted() {
    this.draw();
  },
  methods: {
    draw() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById("myChart"));
      myChart.setOption(this.echartsdata);
    },
  },
};
</script>

<style>
</style>

参考博客

https://blog.youkuaiyun.com/qq_35658349/article/details/98782358