图片放大预览
MarkDown里的图片放大不了，是不是有点郁闷。之前我也找到过另一种写法，是引用 Element-UI 里的图片预览组件，进行放大，感觉有点麻烦
之前看 Choi Yang 的引入方式，怎么引入都实现不了，今天就又再度折腾了一次，总算是搞定了
安装
请根据自己写法进行安装 pnpm/npm/yarn ...
bash
$ pnpm install medium-zoom主题配置
在 theme/index.ts 路径文件中，进行修改配置
javascript
import Theme from "vitepress/theme";
import { h, onMounted, watch, nextTick } from "vue";
import { useRoute, EnhanceAppContext, inBrowser } from 'vitepress'
import mediumZoom from 'medium-zoom';
import './style/main.css' // 具体代码在下方（细节处理的tag下）
export default {
...Theme,
setup() {
const route = useRoute()
const initZoom = () => {
mediumZoom('.main img', { background: 'var(--vp-c-bg)' })
}
onMounted(() => {
initZoom()
})
watch(
() => route.path,
() => nextTick(() => initZoom())
)
},
};细节处理
按上述文件配置完后，图片是可以点击放大预览，但是好像有点小Bug
所以，请在 theme/style/main.scss 路径文件下，加入以下样式
z-index的值，应该其他值也是可以的。这里参考的是 Choi Yang VitePrss 里设定的值
style
.medium-zoom-image {
z-index: 21;
}
.medium-zoom-overlay {
z-index: 20;
}