vue项目常见的需求

1.vue项目实现埋点操作，记录用户浏览时间

需求分析：需要记录用户浏览页面的行为

包括：点击时记录当前所在页面的地址、标题、元素名称等 浏览页面时，记录上个页面和当前页面的地址、标题、浏览时间等。

具体实现：

点击事件，通过自定义指令来实现

1、首先我在我的项目中创建一个directive文件。

文中具体代码

import Vue from "vue";
// 自定义埋点指令
Vue.directive("track", {
  //钩子函数，只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置
  /*
   * el:指令所绑定的元素，可以用来直接操作 DOM
   * binding：一个对象，包含以下 property:
   *   name：指令名，不包括 v- 前缀。
   *   value：指令的绑定值，例如：v-my-directive="1 + 1" 中，绑定值为 2。
   *   expression：字符串形式的指令表达式。例如 v-my-directive="1 + 1" 中，表达式为 "1 + 1"。
   *   arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 "foo"。
   *   modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }。
   * vnode：Vue 编译生成的虚拟节点
   */
  bind: (el, binding, ) => {
    
    if (binding.value) {
      //这里参数是根据自己业务可以自己定义
      let params = {
        currentUrl: binding.value.currentUrl,
        actionType: binding.value.actionType,
        title: binding.value.title,
        // preUrl: binding.value.preUrl,
        frontTriggerType: binding.value.triggerType,
        // businessCode: binding.value.businessCode,
        behavior: binding.value.behavior,
        // service: "xxx",
      };
      //如果是浏览类型，直接保存
      if (binding.value.triggerType == "browse") {
        console.log("browse", params);
        //调用后台接口保存数据
        // api.eventTrack.saveEventTrack(params);
      } else if (binding.value.triggerType == "click") {
        //如果是click类型，监听click事件
        el.addEventListener(
          "click",
          () => {
            console.log("click", params);
            //调用后台接口保存数据
            // api.eventTrack.saveEventTrack(params);
          },
          false
        );
      }
    }
  },
});

2.将文件引入main.js

3.在需要的地方调用指令

<a-menu-item key="/info/table" v-track="{triggerType:'click', title:'首页',currentUrl: $route.path,behavior:'点击表格按钮'}"> 表格 </a-menu-item>
<a-menu-item key="/info/myEcharts" v-track="{triggerType:'click', title:'首页',currentUrl: $route.path,behavior:'点击myEcharts按钮'}"> myEcharts </a-menu-item>

可以看到输出，操作成功。

页面浏览事件

通过在router文件中，通过beforeEach钩子函数实现的，

//获取开始时间
let startTime = Date.now();
//定义一个获取用户的函数
const get_userinfo = (to, from, token) => {
//获取当前时间
  let currentTime = Date.now();
  let Brow_history = {
    preUrl: from.path,
    preTitle: from.meta.title,
    currentUrl: to.path,
    currentTitle: to.meta.title,
    prePage_browTime: parseInt((currentTime - startTime) / 1000) + "s",
  };
  if(token){
    Brow_history.user = JSON.parse(sessionStorage.getItem("user"));
  }
  console.log(Brow_history);
  console.log(
    "用户由 ",
    from.path,
    " 页面 跳转到 ",
    to.path,
    " 页面，在 ",
    from.path,
    " 页面停留了 ",
    currentTime - startTime,
    "毫秒。转换成秒数约为：",
    parseInt((currentTime - startTime) / 1000)
  );
  //初始化开始时间
  startTime = Date.now();
  console.log("======== 分割线 ========");
};

router.beforeEach((to, from, next) => {
  NProgress.start();
  if (to.meta.title) {
    //判断是否有标题
    document.title = to.meta.title;
  }
  if (to.meta.requireAuth == true) {
    const token = getToken();
    //需要登录权限进入的路由
    if (token) {
    //调用刚才定义的函数
      get_userinfo(to, from, token);
      next();
    } else {
      Message.error("未登录");
      next({ name: "login" });
    }
  } else {
    get_userinfo(to, from);
    //不需要登录权限
    next();
  }
  // next();
});

最后，看到页面输出，操作成功。

版权声明：本文为CSDN博主「没脾气的猫」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。 原文链接：blog.csdn.net/badoldboy/a…

2.element-ui的el-dialog弹框拖拽

1.首先在 utils中创建dialog.js 具体内容为：

import Vue from 'vue'

// v-dialogDrag: 弹窗拖拽
Vue.directive('dialogDrag', {
  bind(el, binding, vnode, oldVnode) {
    const dialogHeaderEl = el.querySelector('.el-dialog__header')
    const dragDom = el.querySelector('.el-dialog')
    dialogHeaderEl.style.cursor = 'move'

    // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
    const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null)

    dialogHeaderEl.onmousedown = (e) => {
      // 鼠标按下，计算当前元素距离可视区的距离
      const disX = e.clientX - dialogHeaderEl.offsetLeft
      const disY = e.clientY - dialogHeaderEl.offsetTop

      // 获取到的值带px 正则匹配替换
      let styL, styT

      // 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px
      if (sty.left.includes('%')) {
        styL = +document.body.clientWidth * (+sty.left.replace(/\%/g, '') / 100)
        styT = +document.body.clientHeight * (+sty.top.replace(/\%/g, '') / 100)
      } else {
        styL = +sty.left.replace(/\px/g, '')
        styT = +sty.top.replace(/\px/g, '')
      }

      document.onmousemove = function(e) {
        // 通过事件委托，计算移动的距离
        const l = e.clientX - disX
        const t = e.clientY - disY

        // 移动当前元素
        dragDom.style.left = `${l + styL}px`
        dragDom.style.top = `${t + styT}px`

        // 将此时的位置传出去
        // binding.value({x:e.pageX,y:e.pageY})
      }

      document.onmouseup = function(e) {
        document.onmousemove = null
        document.onmouseup = null
      }
    }
  }
})

// v-dialogDragWidth: 弹窗宽度拖大 拖小
Vue.directive('dialogDragWidth', {
  bind(el, binding, vnode, oldVnode) {
    const dragDom = binding.value.$el.querySelector('.el-dialog')

    el.onmousedown = (e) => {
      // 鼠标按下，计算当前元素距离可视区的距离
      const disX = e.clientX - el.offsetLeft

      document.onmousemove = function(e) {
        e.preventDefault() // 移动时禁用默认事件

        // 通过事件委托，计算移动的距离
        const l = e.clientX - disX
        dragDom.style.width = `${l}px`
      }

      document.onmouseup = function(e) {
        document.onmousemove = null
        document.onmouseup = null
      }
    }
  }
})

2.在main.js中引入

import './utils/directives.js'

3、使用 el-dialog 的地方加入 v-dialogDrag

 <el-dialog :visible.sync="dialogVisible" v-dialogDrag>
      // ...
 </el-dialog>

3.导出页面为PDF

1.首先在 utils中创建htmlToPdf.js

// 导出页面为PDF格式
import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'
export default {
  install(Vue, options) {
    Vue.prototype.getPdf = function(title) {
      var element = document.querySelector('#pdfDom'); // 这个dom元素是要导出pdf的div容器
      setTimeout(() => {
        html2Canvas(element).then(function(canvas) {
          var contentWidth = canvas.width;
          var contentHeight = canvas.height;
          //一页pdf显示html页面生成的canvas高度;
          var pageHeight = contentWidth / 592.28 * 841.89;
          //未生成pdf的html页面高度
          var leftHeight = contentHeight;
          //页面偏移
          var position = 0;
          //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
          var imgWidth = 595.28;
          var imgHeight = 592.28 / contentWidth * contentHeight;

          var pageData = canvas.toDataURL('image/jpeg', 1.0);

          var pdf = new JsPDF('', 'pt', 'a4');

          //有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
          //当内容未超过pdf一页显示的范围，无需分页
          if (leftHeight < pageHeight) {
            pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight);
          } else {
            while (leftHeight > 0) {
              pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
              leftHeight -= pageHeight;
              position -= 841.89;
              //避免添加空白页
              if (leftHeight > 0) {
                pdf.addPage();
              }
            }
          }
          pdf.save(title + '.pdf');
        });
      }, 0);
    }
  }
}

2.mian.js中引入并使用

import htmlToPdf from './utils/htmlToPdf.js'
Vue.use(htmlToPdf)

3.创建容器，id为htmlToPdf.js中的指定的容器名称；pdf将导出容器中的内容

 <div id="pdfDom">
     ...
 </div>

4.导出页面为html文件(含有echarts)

1.在需要导出的页面

<el-button  @click="generate">导出HTML</el-button>

//需要导出的内容区域
<div ref="test"><div>

async generate() {
     // 将html文件中需要用到的数据挂载到store上
     // this.$store.commit("basicmsg", this.$refs.test.innerHTML);
    // import()引入含有html代码的js文件,因为vue不支持引入html文件,只能将html代码写成字符串放到js文件中;
    await import("./export.js").then((modules) => {
        const content = modules.html;
        //生成报告
        const link = document.createElement("a");
        link.download = "index.html"; // 文件名
        link.style.display = "none";
        // 创建文件流
        // 创建bolb实例时，内容一定要放在[]中
        const blob = new Blob([content], { type: "text/html" });
        link.href = window.URL.createObjectURL(blob);
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
    }).catch((err)=>{
        consosle.log(err)
    });
}

2.新建export.js

import store from '@/store'
export const html = 
    `<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>报告</title>
        <!-- import element v-chart CSS -->
        <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
        <style>
            body {
                background-color: #f5f5f5;
            }
        </style>
    </head>
    <body>
        <div>
        // content
        ${store.state.basicmsg}
        </div>
    </body>
    // 需要引入的依赖，一般官网上都会有，直接粘贴就可
    // 注意引入vue要在element之前，v-chart也要在element之前
    <!-- import Vue before Element -->
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <!-- import JavaScript -->
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/v-charts/lib/index.min.js"></script>
	
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    </html>`

包含echarts的导出推荐是将echarts转化成为图片导出，（此处注意需要异步，因为echarts的渲染需要时间，需要等echarts渲染完毕之后，在调用echarts获取图片的方法，否则得到的图片将是没有横纵坐标的图）

 <div>
    <img id ='div'  onclick="evetest('11111111')"  :src = "imgUrl" :style="        
    {width: '1000px', height: '500px'}" />
 </div>
// 此处注意需要异步，因为echarts的渲染需要时间，需要等echarts渲染完毕之后，在调用echarts获取图片的方法，否则得到的图片将是没有横纵坐标的图
async initDeviceLevel() {
      var that = this;
      this.DeviceLevel = echarts.init(document.getElementById("deviceLevel"));
     await this.DeviceLevel.setOption({
        color: ["#3398DB"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: [
          {
            type: "category",
            data: [],
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: "value"
          }
        ],
        series: [
          {
            name: "设备IP",
            type: "bar",
            barWidth: "60%",
            data: [],
            animation: false,
          }
        ]
      });
      this.imgUrl =  this.DeviceLevel.getDataURL({
          pixelRatio: 2,
          backgroundColor: '#fff'
      });
    }
  }