nuxtで画像拡大プレビュー機能を実装する

2022年4月1日#Nuxt #图片214

AI 翻訳

この記事はAIを通じて中国語から日本語に翻訳されました。原文を表示

AI が生成した要約

v-viewerは、Vueベースのプラグインで、画像の拡大、縮小、回転、ドラッグ、プレビューなどの機能を提供します。GitHubで見つけたこのプラグインの使用方法を共有します。 ### インストール ```shell npm install v-viewer ``` ### 用法 1. `plugins`フォルダに`viewer.js`ファイルを作成し、以下のコードを追加します。 ```js import Vue from 'vue'; import Viewer from 'v-viewer'; import 'viewerjs/dist/viewer.css'; Vue.use(Viewer); Viewer.setDefaults({ Options: { 'inline': true, 'button': true, 'navbar': true, 'title': true, 'toolbar': true, 'tooltip': true, 'movable': true, 'zoomable': true, 'rotatable': true, 'scalable': true, 'transition': true, 'fullscreen': true, 'keyboard': true, 'url': 'data-source' } }); ``` 2. `nuxt.config.js`にプラグインを追加します。 ```js plugins: [ { src: '@/plugins/viewer', ssr: false } ], ``` 3. 使用するページで、`class`, `v-viewer`, `v-highlight`の3つのパラメータを引き入れます。

v-viewer は、画像の拡大、縮小、回転、ドラッグ、プレビューなどのさまざまな機能を実現できる Vue ベースのプラグインで、効果は素晴らしいです。これは私が Github で見つけたリポジトリで、非常に役立つと感じたので、使用プロセスを共有します。

Github: https://github.com/mirari/v-viewer

1. インストール#

npm install v-viewer

2. 用法#

plugins に新しい viewer.js ファイルを作成します。

// /plugins/viewer.js

import Vue from 'vue';
import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'
Vue.use(Viewer)
Viewer.setDefaults({
  Options: { 'inline': true, 'button': true, 'navbar': true, 'title': true, 'toolbar': true, 'tooltip': true, 'movable': true, 'zoomable': true, 'rotatable': true, 'scalable': true, 'transition': true, 'fullscreen': true, 'keyboard': true, 'url': 'data-source' }
})

次に nuxt.config.js にインポートします。

// nuxt.config.js

plugins: [
	// ...
	{ src: '@/plugins/viewer', ssr: false }
],

最後に使用するページでインポートします。

<div class="markdown-body-box" v-viewer v-highlight>
<!-- ページ内容 -->
</div>

任意のページでインポートできます。小さなコンポーネントページでも、ルートページでも、どこでこの機能をインポートしたいかによって異なります。class, v-viewer, v-highlight の 3 つのパラメータをインポートするだけで大丈夫です。