vuepress 插件 medium-zoom 在跳转后无法触发了，查询源码后发现竟然是生命周期钩子无法工作。虽然不确定是否存在普遍情况，但还是将解决方案放出，作为记录
今天在为文章寻找一个灯箱组件时，竟然发现官方自带的 medium-zoom 插件就是我想要的。亏我之前一直以为它是一个全屏窗口的插件。但是集成后，事情却没有如愿解决。
[
'@vuepress/medium-zoom', {
selector: '.content__default:not(.custom) img',
// medium-zoom options here
// See: https://github.com/francoischalifour/medium-zoom#options
options: {
margin: 16
}
}
]
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
尝试在插件里增加如上配置，发现入口页确实达到了预期，但是跳转后，却失效了。
在 查阅解决方案时，找到的相同问题图片[1]
下方同时有 尤雨溪 大神亲自给出的解决方案，
简单来说，就是...
升级版本！（希望对你的情况有所帮助）
遗憾的是，我的似乎并没有得到解决。
好在，源码异常的简单。抛去插件注册和样式，寥寥 21 句。
import './style.css'
import zoom from 'medium-zoom'
export default {
data: () => ({ zoom: null }),
mounted () {
this.updateZoom()
},
updated () {
this.updateZoom()
},
methods: {
updateZoom () {
setTimeout(() => {
if (this.zoom) {
this.zoom.detach()
}
this.zoom = zoom(SELECTOR, OPTIONS)
}, 1000)
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
我试着在 updateZoom 方法里打印了一个字符串。果不其然，这个字符串只有在第一次打开页面的时候打印了。之后，无论我怎么跳转都无法再打印出。
问题显而易见： updated() 这个生命周期的钩子不正常工作了！！
问题找到了，但是我一时之间也有些不知所措。那么至少，暂且暴力解决下吧。
以下解决方案仅为临时方案，请大家谨慎使用，如有解决方案，请大家务必告诉笔者！谢谢！
\docs\.vuepress\theme\layouts\Post.vue 中恰当的地方加入如下代码。
import zoom from 'medium-zoom'
data: () => ({ zoom: null }),
mounted () {
setTimeout(() => {
if (this.zoom) {
this.zoom.detach()
}
this.zoom = zoom('.content__default:not(.custom) img',{
margin: 16
})
}, 1000)
this.updateZoom()
},
.medium-zoom-overlay {
z-index: 100;
}
.medium-zoom-overlay ~ img {
z-index: 101;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
另外，记得同时移除掉 config.js 中插件的配置。
这样，就搞定了。