https://github.com/T-miracle/vitepress-plugin-image-viewer

A vitepress image viewer plugin based on viewerjs
https://github.com/T-miracle/vitepress-plugin-image-viewer

viewerjs vitepress vitepress-plugin

Last synced: about 1 month ago
JSON representation

A vitepress image viewer plugin based on viewerjs

• Host: GitHub
• URL: https://github.com/T-miracle/vitepress-plugin-image-viewer
• Owner: T-miracle
• Created: 2023-03-31T15:13:37.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2024-01-23T03:38:05.000Z (11 months ago)
• Last Synced: 2024-04-07T02:10:39.006Z (8 months ago)
• Topics: viewerjs, vitepress, vitepress-plugin
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/vitepress-plugin-image-viewer
• Size: 19.9 MB
• Stars: 7
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-vitepress-v1 - View Image - Image viewer base on [Viewer.js](https://github.com/fengyuanchen/viewerjs) (:electric_plug: Plugins / Community Plugins)

README

        
# vitepress-plugin-image-viewer

[![npm](https://img.shields.io/npm/v/vitepress-plugin-image-viewer?color=green)](https://www.npmjs.com/package/vitepress-plugin-image-viewer)

EN | [中文文档](README_zh.md)

![](./demo.webp)

> A vitepress image viewer plugin based on viewerjs

## Install

```shell

// npm 

npm i vitepress-plugin-image-viewer

// yarn

yarn add vitepress-plugin-image-viewer

// pnpm

pnpm add vitepress-plugin-image-viewer

// Tip: If you use pnpm to install, you need to install viewerjs additionally.

pnpm add viewerjs

```

## Usage

In `.vitepress/theme/index`

```js

import DefaultTheme from 'vitepress/theme';

import 'viewerjs/dist/viewer.min.css';

import imageViewer from 'vitepress-plugin-image-viewer';

import vImageViewer from 'vitepress-plugin-image-viewer/lib/vImageViewer.vue';

import { useRoute } from 'vitepress';

export default {

    ...DefaultTheme,

    enhanceApp(ctx) {

        DefaultTheme.enhanceApp(ctx);

        // Register global components, if you don't want to use it, you don't need to add it

        ctx.app.component('vImageViewer', vImageViewer);

        // ...

    },

    setup() {

        // Get route

        const route = useRoute();

        // Using

        imageViewer(route);

    }

};

```

`imageViewer()` takes three parameters：

- route

    route (this is required)

- el

  

    CSS selector (Default `.vp-doc`, can be empty, this is not required)

- option

    Configuration options 

    (For detailed configuration, please refer to [viewerjs option](https://github.com/fengyuanchen/viewerjs#toolbar), there is already a default configuration, which is not required)

## Component

`vImageViewer` component can be compiled into a button, click this button to pop up the picture, use as follows:

```vue

 

```

`inline` is set to `true`, it will become an inline element, it is not required, default `false`

## more vitepress plugins

You may be interested in these plugins：

[Click me to view more vitepress plugins](https://github.com/T-miracle/vitepress-plugins)