vue2.x关于el-input输入框的自定义指令，新需求埋点统计用户输入时长统计，记录

1.创建js文件

import Vue from 'vue'

// 创建一个用于存储焦点持续时间的对象
const focusDurations = {}

Vue.directive('focus-duration', {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function(el, binding) {
    let inputDom
    if (el) {
      inputDom = el.children[0]
      console.log(el.children[0])
    }
    // 为当前输入框初始化焦点持续时间数组
    focusDurations[binding.arg] = focusDurations[binding.arg] || []

    // 监听输入框的焦点获取事件
    inputDom.addEventListener('focus', function() {
      // 记录获取焦点的时间
      this.focusStartTime = Date.now()
    })

    // 监听输入框的焦点失去事件
    inputDom.addEventListener('blur', function() {
      // 检查是否有focusStartTime记录
      if (this.focusStartTime !== null) {
        // 计算焦点持续时间并添加到数组中
        const duration = Date.now() - this.focusStartTime
        focusDurations[binding.arg].push(duration)
        focusDurations[binding.arg].join()
        // 清除时间记录
        this.focusStartTime = null
      }
    })
  },
  // 当Vue实例销毁时，清除事件监听器和存储的数据
  unbind: function(el, binding) {
    let inputDom
    if (el) {
      inputDom = el.children[0]
    }
    // 移除事件监听器
    inputDom.removeEventListener('focus', focusDurations)
    inputDom.removeEventListener('blur', focusDurations)

    // 清除存储的焦点持续时间数组（如果需要）
    // 这里可以根据实际情况选择是否清除，比如如果希望保留历史数据则不执行此操作
    // delete focusDurations[binding.arg];
  }
})

// 添加一个方法到Vue原型上，以便在任何组件中都能访问
Vue.prototype.$exportFocusDurations = function() {
  const result = {}
  Object.keys(focusDurations).forEach(item => {
    result[item] = focusDurations[item].join()
  })
  // 返回焦点持续时间对象
  return result
}

2.在main.js引入

import './utils/customDirective'

3.在组件中使用

 <el-form-item label="活动名称">
      <el-input v-model="form.name" v-focus-duration:name />
  </el-form-item>
  <el-form-item label="活动形式">
      <el-input v-model="form.desc" v-focus-duration:desc type="textarea" />
   </el-form-item>

 onSubmit() {
      console.log(this.$exportFocusDurations()) 
      // 拿到的结果
      {
    "name": "1342,1057,576",
    "desc": "806,334,276"
		}
    }