vitepress添加图片放大功能

安装依赖

npm i -D medium-zoom

自定义主题

• 添加样式文件

./.vitepress/theme/medium-zoom.css

/* 侧边栏 z-index: 25; 默认放大图片的覆盖层会被侧边栏遮挡，需要设置放大图片覆盖层 z-index 大于25 */
.medium-zoom-overlay {z-index: 26;
}.medium-zoom-image {z-index: 27;
}

• 扩展默认样式，为img元素添加点击放大功能

./.vitepress/theme/index.ts

import {nextTick, watch} from 'vue';
import {useRoute} from 'vitepress';
import DefaultTheme from 'vitepress/theme';
import mediumZoom from 'medium-zoom';
// 引入样式文件
import './medium-zoom.css';export default {...DefaultTheme,setup() {// 为img元素添加点击放大功能const route = useRoute();watch(() => route.path,() => nextTick(() => mediumZoom('.main img',{background: 'var(--vp-c-bg)'})),{immediate: true})},
};