l-hammer/v-track

不太会用

hi500 opened this issue · 1 comments

hi500 commented

必须要绑定一个click的function吗?如何传递参数?我理解能力差,使用文档能再详细和清楚一些吗?Thanks♪(・ω・)ノ大神

不是必须的,只有事件行为的埋点才需要绑定click修饰符。v-track主要是为了解决埋点代码和业务代码耦合的问题,不同类型的埋点都会有对应的修饰符。

至于传参,如下示例:一段业务代码,一段埋点代码,业务代码中的折叠面板组件提供了一个change的自定义事件,事件的回调接收一个当前激活面板名称的参数,同时上报一个id为18020的埋点事件。

<el-collapse
  v-model="activeName"
  v-track:18020.change="handleChange"
>
  <el-collapse-item title="反馈" name="Feedback">...</el-collapse-item>
  <el-collapse-item title="效率" name="Efficiency">...</el-collapse-item>
  <el-collapse-item title="可控" name="Controllability">...</el-collapse-item>
</el-collapse>

<script>
export default {
  data() {
    return {
      activeName: "Feedback",
    };
  },
  methods: {
    handleChange(val) {
      this.activeName = val;
    }
  }
}
</script>
import trackAction from "./action";

export default {
  /**
   * @param {Object} context 当前上下文(可以访问当前实例上的任何属性)
   * @param {Object} activeName 事件参数(即**当前激活面板名称**)
   * @param {Object} event 事件对象
   */
  18020(context, params) {
    const { activeName, $route: { name } } = context;
    // 这里的activeName其实就是params,因为我们在`handleChange`中做了赋值操作。
    trackAction("18020", {
      source_page: name,
      active_name: activeName
    });
  }
}

埋点需要的大部分参数都可以从实例data和事件本身接收的参数params中获取到,除此之外你也可以从store or 其它的数据状态管理中获取。这里有个建议:尽量从公用的地方读取参数,而不是从传递事件本身不需要的参数中获取。

如果还有困惑,可以描述下具体的需求及遇到的问题,最好能用codesandbox提供一个的在线的demo。