Nuxt 添加图片预览，画廊

1.使用 fancyapps 库 给文章添加预览。画廊

# Usage with NPM
npm install --save @fancyapps/ui

# and with Yarn
yarn add @fancyapps/ui

2.在nuxt plugins目录下新建 fancyapps.js

import { Fancybox } from "@fancyapps/ui";
import "@fancyapps/ui/dist/fancybox/fancybox.css";
export default defineNuxtPlugin(() => {

    useRouter().beforeEach(() => {
        Fancybox.bind('[data-fancybox]', {
            // Your custom options
            hideScrollbar: false,
        });
    });
    useRouter().afterEach(() => {
        Fancybox.close();
    })

})

3. 在 nuxt.config.ts 中启用插件

export default defineNuxtConfig({
     plugins: [
        {
            src: '~/plugins/fancyapps.js', mode: 'client'
        }
    ],
})

4.启用图片

<a data-fancybox="gallery" href="https://lipsum.app/id/63/1600x1200">
    <img src="https://lipsum.app/id/63/200x150" width="200" height="150" />
</a>

fancybox文档地址