vue 數據上報組件

有些場景下，須要咱們去上報一些數據，給到BI進行統計。 爲了簡化上報步驟，使用自定義指令進行數據上報封裝。

如何使用？

// 引入
import Vue from 'vue'
import { Report } from './components/testReport'
Vue.use(Report)
// dom use
<p v-report.view="reportObj">沙發上紛紛</p>
<p v-report.click="reportObj">沙發上111</p>
<p v-report="reportObj">沙發上111</p>
複製代碼

testReport 內容

import RePortEventInfo from './event-info'
let Report = {}
Report.RePortEventInfo = RePortEventInfo
Report.install = function (Vue) {
  Vue.directive('report', {
    inserted: function (el, binding) {
      // view 上報
      console.log(binding)
      if (binding.modifiers.view || (!binding.modifiers.view && !binding.modifiers.click)) {
        Report.RePortEventInfo(binding.value)
      }
      // 點擊上報
      if (binding.modifiers.click) {
        el.addEventListener('click', function () {
          Report.RePortEventInfo(binding.value)
        })
      }
    }
  })
}

export {
  Report
}

複製代碼

上報到BI函數封裝，進行統一，具體上報的字段、id雙方溝通好。 eg：

reportObj = {
  event_id: '', // 必傳 具體申請操做在https://appdata.oa.fenqile.com
  label: '', // 選傳 在申請event_id時建立
  tag_list: [], // 選傳 渠道碼過濾標籤key數組
  extend_info: {} // 選傳拓展字段對象集合
}
複製代碼

event-info.js 內容

import axios from 'axios'
export default function (evt = {}) {
  reportEventInfoH5(evt)
}
function reportEventInfoH5 (evt) {
  axios.post('/XXXXXXXX/uploadData.json', {
    data: {
      system: {
        app_version: '',
        new_version: '',
        machine_code: '',
        os: 'H5'
      },
      data_list: [{
        data_type: 2,
        record_list: [{
          event_id: evt.event_id,
          label: evt.label || '',
          time: Date.now(),
          extend_info: evt.extend_info
        }]
      }]
    }
  })
}
複製代碼

3-5年內部崗位（平安、樂信、vivo、oppo）推薦機會，歡迎發簡歷到： zgxie@126.com