vuepress插件medium-zoom在跳转后无法触发的问题

vuepress插件medium-zoom在跳转后无法触发的问题

最后修改时间:4 months ago

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

尝试在插件里增加如上配置,发现入口页确实达到了预期,但是跳转后,却失效了。

52558245-c03a5d80-2e2c-11e9-9b3d-7281b0d7dda9

在 查阅解决方案时,找到的相同问题图片[1]

下方同时有 尤雨溪 大神亲自给出的解决方案,

image-20210330185343779

简单来说,就是...

升级版本!(希望对你的情况有所帮助)

遗憾的是,我的似乎并没有得到解决。

好在,源码异常的简单。抛去插件注册和样式,寥寥 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

我试着在 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

另外,记得同时移除掉 config.js 中插件的配置。

这样,就搞定了。


  1. vuepress issues/1276 ↩︎

- 全文完 -

留下一条留言?
默认颜色

主题颜色

标准颜色

更多颜色...