v-viewer
は、画像閲覧に使用される Vue コンポーネントであり、viewer.js をベースとして、回転、拡大縮小、反転などの操作をサポートしています。
中国語ドキュメント: Vue 画像閲覧コンポーネント v-viewer、回転、拡大縮小、反転などの操作をサポート | Mirari のブログ
コード例: https://mirari.cc/v-viewer/
v-viewer プラグインを使用して、Vue.js 2 で画像プレビュー機能を実装するのは比較的簡単です。v-viewerは、画像の拡大・縮小・スライドプレビューなどの機能を簡単に実現できるVue.js画像プレビュープラグインです。実装手順は次のとおりです。
v-viewer プラグインをインストールする:
npm または Yarn を使用して、v-viewer プラグインをプロジェクト ディレクトリにインストールします。
npm install v-viewer --save
npm i -S viewerjs
# 或
yarn add v-viewer
yarn add viewerjs
main.js ファイルに v-viewer プラグインを導入して構成します。
这行放在:import App from './App.vue'; 之前
import Viewer from 'v-viewer';
import 'viewerjs/dist/viewer.css';
Vue.use(Viewer);
或者
Vue.use(Viewer, {
defaultOptions: {
zIndex: 9999, // 设置图片预览组件的层级,确保能在其他组件之上
},
});
画像をプレビューする必要があるコンポーネントで v-viewer ディレクティブを使用します。
<template>
<div>
<!-- 点击图片触发预览 -->
<img v-for="(image, index) in imageList" :key="index" :src="image" v-viewer />
</div>
</template>
<script>
export default {
data() {
return {
imageList: [
'https://example.com/image1.jpg',
'https://example.com/image2.jpg',
// 添加更多图片链接
],
};
},
};
</script
次の方法も使用できます
<template>
<div>
<button type="button" class="button" @click="previewURL">URL Array</button>
</div>
</template>
<script>
export default {
data() {
sourceImageURLs: [
'https://picsum.photos/200/200?random=1',
'https://picsum.photos/200/200?random=2',
],
},
methods: {
previewURL () {
// 如果使用`app.use`进行全局安装, 你就可以像这样直接调用`this.$viewerApi`
const $viewer = this.$viewerApi({
images: this.sourceImageURLs
});
},
},
};
</script>
上記のコードでは、v-viewer ディレクティブを img タグに適用して、画像をクリックしたときにプレビュー効果がトリガーされるようにします。