鼠标点击图片缩放的功能

官方版本并不支持此效果，通过github维护者回复的issues #854 获得这个方法

效果预览：

安装插件

npm i medium-zoom

1、全局模式

/docs/.vitepress/theme/ 文件目录下增加 index.js 和 index.css

// .vitepress/theme/index.js
import DefaultTheme from 'vitepress/theme';
import { onMounted, watch, nextTick } from 'vue';
import { useRoute } from 'vitepress';
import mediumZoom from 'medium-zoom';

import './index.css';

export default {
  ...DefaultTheme,

  setup() {
    const route = useRoute();
    const initZoom = () => {
      // mediumZoom('[data-zoomable]', { background: 'var(--vp-c-bg)' });  // 非全局模式，需要在图片后面加{data-zoomable}才可以实现效果
      mediumZoom('.main img', { background: 'var(--vp-c-bg)' });  // 全局模式
    };
    onMounted(() => {
      initZoom();
    });
    watch(
      () => route.path,
      () => nextTick(() => initZoom())
    );
  },
};

/* .vitepress/theme/index.css */

.medium-zoom-overlay {
  z-index: 20;
}

.medium-zoom-image {
  z-index: 9999 !important;/* 给的值是21，但是实测盖不住，直接999 */
}

2、非全局模式

需要在图片后面加{data-zoomable}才可以实现效果

修改index.js内容

// .vitepress/theme/index.js

...
mediumZoom('.main img', { background: 'var(--vp-c-bg)' });
...

在markdown文章图片链接后面增加{data-zoomable}

// docs/index.md

![demo](https://pss.bdstatic.com/static/superman/img/logo/bd_logo1-66368c33f8.png){data-zoomable}