T-miracle / vitepress-plugin-image-viewer

A vitepress image viewer plugin based on viewerjs
https://www.npmjs.com/package/vitepress-plugin-image-viewer
16 stars 1 forks source link

该插件不能实现图片的 prev 和 next 上下页功能 #3

Closed ghost closed 7 months ago

ghost commented 7 months ago

在开启了 viewerjs options -> toolbar -> prevnext 功能,且 markdown 文件中拥有多个图片时,图片并不能实现前后点击切换图片的功能。

2024-04-15_06-03-05

T-miracle commented 7 months ago

已修复,请更新至1.1.4版本 @sbgong

ghost commented 7 months ago

仍然有问题!当我点击第一张图片,插件是起作用的,但点击第二张和第三张图片,此时是没反应的。不知道是我配置的问题吗还是其他……以下是我的测试配置:

文件树结构

docs
│  foo.md
│  index.md
│  
├─.vitepress
│  │  config.mts
│  │          
│  └─theme
│          index.ts
│          style.css
│          
└─public
        image1.svg
        image2.svg
        image3.svg

config.mts 文件:

import { defineConfig } from "vitepress";

export default defineConfig({
  title: "test",
  description: "demo",
  themeConfig: {
    nav: [{ text: "foo", link: "/foo" }],

    sidebar: [
      {
        text: "Examples",
        items: [{ text: "foo Examples", link: "/foo" }],
      },
    ],
  },
});

docs/.vitepress/theme/index.ts 文件

import type { Theme } from "vitepress";
import DefaultTheme from "vitepress/theme";
import { h } from "vue";
import "./style.css";

import "viewerjs/dist/viewer.min.css";
import imageViewer from "vitepress-plugin-image-viewer";
import { useRoute } from "vitepress";

export default {
  extends: DefaultTheme,
  Layout: () => {
    return h(DefaultTheme.Layout, null, {
    });
  },
  enhanceApp({ app, router, siteData }) {},
  setup() {
    const route = useRoute();
    imageViewer(route, ".vp-doc img", {
      title: true,
      navbar: true,
      toolbar: true,
    });
  },
} satisfies Theme;

foo.md 文件:

## foo demo

![image1](/image1.svg)
![image2](/image2.svg)
![image3](/image3.svg)
T-miracle commented 7 months ago

@sbgong 使用方式有更新,请这样使用: image

T-miracle commented 7 months ago

选择器现在不用携带子元素选择器 img

ghost commented 7 months ago

好的,现在 prev 和 next 可以使用了,非常感谢!