Skip to content

Commit 41cb416

Browse files
author
宋慧武
committed
✨component track support native modifiers
1 parent ab01cca commit 41cb416

9 files changed

+135
-11
lines changed

‎README.md

+3-1
Original file line numberDiff line numberDiff line change
@@ -113,7 +113,9 @@ export default {
113113

114114
## 指令修饰符
115115

116-
- `.click` 表示事件行为的埋点，支持自定义事件
116+
- `.click` 表示事件行为的埋点
117+
- `.[custom-event]` 表示自定义事件行为的埋点
118+
- `.native` 表示监听组件原生click事件行为的埋点
117119
- `.watch` 表示页面异步行为的埋点
118120
- `.async` 配合`.click`指令，表示异步事件行为的埋点
119121
- `.delay` 表示埋点是否延迟执行，默认先执行埋点再执行回调

‎docs/dist/js/app.2e4508ff.js

-2
This file was deleted.

‎docs/dist/js/app.2e4508ff.js.map

-1
This file was deleted.

‎docs/dist/js/app.b09015e7.js

+2
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/dist/js/app.b09015e7.js.map

+1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
<!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"><link rel=icon href=dist/favicon.ico><link href=//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/nord.min.css rel=stylesheet><title>v-track</title><link href=dist/css/app.1efa72a7.css rel=preload as=style><link href=dist/css/chunk-vendors.7ed2d91f.css rel=preload as=style><link href=dist/js/app.2e4508ff.js rel=preload as=script><link href=dist/js/chunk-vendors.8d6844e1.js rel=preload as=script><link href=dist/css/chunk-vendors.7ed2d91f.css rel=stylesheet><link href=dist/css/app.1efa72a7.css rel=stylesheet></head><body><noscript><strong>We're sorry but v-track doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script src=dist/js/chunk-vendors.8d6844e1.js></script><script src=dist/js/app.2e4508ff.js></script></body></html>
1+
<!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"><link rel=icon href=dist/favicon.ico><link href=//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/nord.min.css rel=stylesheet><title>v-track</title><link href=dist/css/app.1efa72a7.css rel=preload as=style><link href=dist/css/chunk-vendors.7ed2d91f.css rel=preload as=style><link href=dist/js/app.b09015e7.js rel=preload as=script><link href=dist/js/chunk-vendors.8d6844e1.js rel=preload as=script><link href=dist/css/chunk-vendors.7ed2d91f.css rel=stylesheet><link href=dist/css/app.1efa72a7.css rel=stylesheet></head><body><noscript><strong>We're sorry but v-track doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script src=dist/js/chunk-vendors.8d6844e1.js></script><script src=dist/js/app.b09015e7.js></script></body></html>

‎docs/pages/home.vue

+39-4
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@
1919
<a href="https://github.com/l-hammer/v-track/issues">打开一个 issue</a>
2020
</section>
2121

22+
<!----------------------- DEMO 1 ------------------------>
2223
<section class="demo">
2324
<el-alert
2425
center
@@ -38,11 +39,34 @@
3839
<CodeSnippet class="snippet" lang="html" :code="trackClickSnippet" />
3940
</section>
4041

42+
<!----------------------- DEMO 2 ------------------------>
4143
<section class="demo">
4244
<el-alert
4345
center
4446
type="info"
45-
title="这个一个带参数点击事件行为的埋点，默认最后一个参数为event事件对象"
47+
title="通过增加 .native 修饰符，我们可以监听组件原生click事件行为的埋点"
48+
:closable="false"
49+
>
50+
</el-alert>
51+
<div class="section-content">
52+
<Button v-track:18015.click.native="handleNativeEvent"></Button>
53+
</div>
54+
</section>
55+
56+
<section class="snippets">
57+
<CodeSnippet
58+
class="snippet"
59+
lang="html"
60+
:code="trackNativeClickSnippet"
61+
/>
62+
</section>
63+
64+
<!----------------------- DEMO 3 ------------------------>
65+
<section class="demo">
66+
<el-alert
67+
center
68+
type="info"
69+
title="这个一个带参数点击事件行为的埋点，默认最后一个参数为 event 事件对象"
4670
:closable="false"
4771
>
4872
</el-alert>
@@ -69,6 +93,7 @@
6993
/>
7094
</section>
7195

96+
<!----------------------- DEMO 4 ------------------------>
7297
<section class="demo">
7398
<el-alert
7499
center
@@ -89,18 +114,19 @@
89114
<CodeSnippet class="snippet" lang="js" :code="jsTrackClickDelaySnippet" />
90115
</section>
91116

117+
<!----------------------- DEMO 5 ------------------------>
92118
<section class="demo">
93119
<el-alert
94120
center
95121
type="info"
96-
title="这是一个有异步行为的事件埋点，如示例所示：rest初始值为null，点击事件会fetch为success，所以埋点获取到的rest值应该为success"
122+
title="这是一个有异步行为的事件埋点，如示例所示：rest 初始值为 null，点击事件会 fetch 为 success，所以埋点获取到的 rest 值应该为 success"
97123
:closable="false"
98124
>
99125
</el-alert
100126
><el-alert
101127
center
102128
type="warning"
103-
title="备注：①修饰符 async 是基于 Vue 实例提供的 vm.$watch 方法，所以只有在返回结果 rest 发生变化时才会触发埋点；②当有多个参数时，.async会把最后一个参数当做监听对象"
129+
title="备注：①修饰符 async 是基于 Vue 实例提供的 vm.$watch 方法，所以只有在返回结果 rest 发生变化时才会触发埋点；②当有多个参数时，.async 会把最后一个参数当做监听对象"
104130
:closable="false"
105131
>
106132
</el-alert>
@@ -123,10 +149,14 @@
123149

124150
<script>
125151
import CodeSnippet from "../components/code-snippet";
152+
import Button from "../components/button";
126153
127154
const trackClickSnippet = `
128155
<div class="track-button" v-track:18015.click="handleClick">click me</div>
129156
`;
157+
const trackNativeClickSnippet = `
158+
<Button v-track:18015.click.native="handleNativeEvent"></Button>
159+
`;
130160
const trackClickWithParamSnippet = `
131161
<div class="track-button" v-track:18016.click="{ handleClickWithParam, item }">click me</div>
132162
`;
@@ -140,7 +170,7 @@ export default {
140170
}
141171
`;
142172
const trackClickDelaySnippet = `
143-
<div class="track-button" v-track:18017.click.delay="handleClickWithParam">click me</div>
173+
<div class="track-button" v-track:18017.click.delay="handleClickDelay">click me</div>
144174
`;
145175
const jsTrackClickDelaySnippet = `
146176
export default {
@@ -183,11 +213,13 @@ export default {
183213
export default {
184214
name: "Home",
185215
components: {
216+
Button,
186217
CodeSnippet
187218
},
188219
data() {
189220
return {
190221
trackClickSnippet,
222+
trackNativeClickSnippet,
191223
trackClickWithParamSnippet,
192224
jsTrackClickWithParamSnippet,
193225
trackClickDelaySnippet,
@@ -205,6 +237,9 @@ export default {
205237
handleClick() {
206238
this.$message.success("事件执行成功");
207239
},
240+
handleNativeEvent() {
241+
this.$message.success("组件原生事件执行成功");
242+
},
208243
handleClickWithParam(item, { target }) {
209244
this.$message.success(
210245
`事件执行成功，参数为${JSON.stringify(item)}--${target}`

‎src/hooks/index.js

+5-2
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
* @Author: 宋慧武
33
* @Date: 2019-03-06 17:49:29
44
* @Last Modified by: 宋慧武
5-
* @Last Modified time: 2019-04-27 22:51:25
5+
* @Last Modified time: 2019-05-28 17:05:58
66
*/
77
import {
88
zipArray,
@@ -117,7 +117,10 @@ export function bind(
117117
(once ? vm.$once : vm.$on).call(vm, "fullyvisible", fn);
118118
el.$visMonitor = vm;
119119
}
120-
} else if (!componentInstance && modifiers.click) {
120+
} else if (
121+
(!componentInstance && modifiers.click) ||
122+
(componentInstance && partialMatch("native"))
123+
) {
121124
/**
122125
* @desc DOM元素事件行为埋点(需区分是否带参数)
123126
* @var {Function} fn 获取第一个参数作为回调函数

‎tests/unit/track-click-native.spec.js

+84
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
/*
2+
* @Author: 宋慧武
3+
* @Date: 2019-05-28 17:46:45
4+
* @Last Modified by: 宋慧武
5+
* @Last Modified time: 2019-05-28 18:37:50
6+
*/
7+
import Vue from "vue";
8+
import VTrack from "@/";
9+
import VueRouter from "vue-router";
10+
import { mount, createLocalVue } from "@vue/test-utils";
11+
12+
const localVue = createLocalVue();
13+
const mockTrackAction = jest.fn();
14+
const trackEvents = {
15+
18015: mockTrackAction
16+
};
17+
const Button = Vue.extend({
18+
template: `
19+
<div @click="$emit('click')" />
20+
`
21+
});
22+
const TrackClickNative = Vue.extend({
23+
template: `
24+
<Button v-track:18015.click.native="handleNativeEvent"></Button>
25+
`,
26+
components: {
27+
Button
28+
},
29+
data() {
30+
return {
31+
count: 0
32+
};
33+
},
34+
methods: {
35+
handleNativeEvent() {
36+
this.count += 1;
37+
}
38+
}
39+
});
40+
const RouterLinkTrackClickNative = Vue.extend({
41+
template: `
42+
<router-link to="home" v-track:18015.click.native="handleNativeEvent" />
43+
`,
44+
data() {
45+
return {
46+
count: 0
47+
};
48+
},
49+
methods: {
50+
handleNativeEvent() {
51+
this.count += 1;
52+
}
53+
}
54+
});
55+
56+
localVue.use(VueRouter);
57+
localVue.use(VTrack, {
58+
trackEvents
59+
});
60+
61+
describe("TrackClickNative", () => {
62+
test("确保组件原生click事件、埋点事件正常触发，且埋点上报次数为1", () => {
63+
const wrapper = mount(TrackClickNative, {
64+
localVue
65+
});
66+
67+
expect(wrapper.vm.count).toBe(0);
68+
wrapper.trigger("click");
69+
expect(wrapper.vm.count).toBe(1);
70+
expect(mockTrackAction).toBeCalledTimes(1);
71+
});
72+
73+
test("确保组件原生click事件、埋点事件正常触发，且埋点上报次数为2", () => {
74+
const wrapper = mount(RouterLinkTrackClickNative, {
75+
localVue,
76+
stubs: ["router-link"]
77+
});
78+
79+
expect(wrapper.vm.count).toBe(0);
80+
wrapper.trigger("click");
81+
expect(wrapper.vm.count).toBe(1);
82+
expect(mockTrackAction).toBeCalledTimes(2);
83+
});
84+
});

0 commit comments

Comments
 (0)