详细页
情景：滚动条与 top 按钮组件结合
任务：需要解决两个没有关系的组件相互通信，简单的方法是通过事件一直传输到跟组件，然后再返回到另一个需要通信的组件，然而效率不高，所以用事件总线来解决：
事件总线可以监听j组件/普通js模块与组件/普通js模块相互通信的过程
事件总线：
1.提供监听某个事件的接口
2.提供取消监听的接口
3.触发事件的接口（可以传递数据）
4.触发事件后会自动通知监听者
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
| const listeners = {};
export default {
$on(eventName, handler) {
if (!listeners[eventName]) {
listeners[eventName] = new Set();
}
listeners[eventName].add(handler);
},
$off(eventName, handler) {
if (!listeners[eventName]) {
return;
}
listeners[eventName].delete(handler);
},
$emit(eventName, ...arges) {
if (!listeners[eventName]) {
return;
}
for (const handler of listeners[eventName]) {
handler(...arges);
}
}
}
|
然后在需要的地方引入使用
或者更为方便的用法：
1
2
3
| import Vue from 'vue';
Vue.prototype.$bus = new Vue({});
|
main.js 中：
所有文件都引入了
然后在Detail中监听，在toc组件中触发
最后，为了节约效率，需要防抖
情景：滚轮滚到目录标题后高亮侧栏目录标题
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
| data(){
return {
activeAnchor:"article-md-title-2"
}
},
computed: {
tocwithselect(){
const getToc = (toc = [])=>{
return toc.map((t)=>{
return {
...t,
isSelect:t.anchor===this.activeAnchor,
children:getToc(t.children)
}
})
}
return getToc(this.toc)
}
},
|
情景：评论滑到底部显示加载中效果
情景：回到顶部组件
最后，由于其代码使用率高，所有使用混合minix，
Vuex
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| store/index.js:
import Vuex from 'vuex'
import Vue from 'vue'
Vue.use(Vuex)
const store = new Vuex.Store({
state:{
count:0
},
})
export default store;
|
1
2
3
4
5
6
7
8
9
| main.js:
import store from "./store";
new Vue({
router,
store,
render: (h) => h(App),
}).$mount("#app");
|
文章列表页
图片懒加载(延迟加载，因为图片多，全部缓存需要时间久)
自定义指令实现
1
2
3
4
5
|
import vLazy from "./directives/lazy";
Vue.directive("lazy", vlazy);
|
bug
1
2
3
4
5
| created() {
this.$ref.mainContainer.addEventListener("scroll", handleScroll);
},
|
不能放在 created 中，放在mounted中
不能放在 created 中，放在mounted中
检查事件名称
项目启动：
1
2
3
4
5
6
7
| npm cache clean --force
npm install -g @vue/cli@4.5.0
npm i
npm run serve
|