【Vue.js & Element Plus】ダイアログ機能を使った、画像や動画をクリックで拡大表示する方法

投稿：2025/06/12｜ 更新： 2025/06/15 ｜ 3132文字

今回はjavascriptフレームワークVue.jsと、そのUIライブラリ Element Plusを使って、jqueryのlightboxのように、サムネイルクリックで拡大表示の機能を作ってみます。ダイアログは特定情報の伝達という用途に使われるので、画像のalt情報もついでに渡して表示してみます。さっそくコードや表示例を確認していきましょう。

1 Vue.js & Element Plusのダイアログ機能について
2 Vue.js & Element Plusのダイアログ機能で、画像や動画をクリックで拡大表示するコードとポイント
- 2.1 コード例
- 2.2 コードのポイント
3 Vue.js & Element Plusダイアログ、画像や動画クリックで拡大～表示例
4 あとがき・まとめ

Vue.js & Element Plusのダイアログ機能について

ダイアログ自体はHTML　dialog要素とjavascriptでサクッと実装できますが、Vue＆Element Plusを使った場合は、Element PlusのCSSがつかえるので、少しリッチな感じのデザインで使うことができます。ちょっとトランジションが効いているのも良い感じ。

また、『fullscreen(フルスクリーン)，draggable(ドラッグ可能に)といった各種属性』、『open/closeなどのイベント』もあるので、状況に応じてカスタマイズもできそうです。詳しくは公式ドキュメントも見てみてください。

Dialog(element-plus)
https://element-plus.org/en-US/component/dialog.html

Vue.js & Element Plusのダイアログ機能で、画像や動画をクリックで拡大表示するコードとポイント

コード例

上記の感じでコード書いてみました。下の段落にある動作例のコードで、一部のCSSやhtml要素は省略しています。また、いつものようにcdn.jsdelivr.netから、『element-plusのCSS』『element-plusのjavascript』『vue.jsの本体(バージョン3)』を読み込みしています。

マウントするid要素がappDialogで、クラスphoto-listやvideo-wrapのhtml要素は、ページロード時最初から表示されています。el-dialogの要素は最初は非表示で、クリックイベントで表示します。youtubeにも対応するようにしたので、iframeからwww.youtube.com/embed/〇〇を呼び出す形にしました(単純に動画urlでは動かない)。

コードのポイント

まずはCSS部分から見ていきます。

.mv{width:calc(100% + 15px);}
～
.el-dialog{max-width: 1000px;}

クラスel-dialogのように、el-〇〇のようなelement-plus由来クラスは、あとからCSSを上書きすることで、対応できることもあります。mvは横100%にしていたけど、ダイアログ表示時にcalc(100% – 15px)部分の隙間ができるようなので、こちらも上書きしました。

html要素です。imgタグのほか、最初非表示のtemplate要素とか。@click=〇〇がクリックイベントみたいな機能になります。

<img alt="画像01altですよー。画像01altですよー。" src="./images/01.jpg"
@click="openDialog(‘image’, ‘./images/01.jpg’, $event.target.alt)" />

～一部省略～

<el-dialog v-model="dialogVisible" :title="mediaType === ‘image’ ? ‘画像の表示’ : ‘動画の表示’">
<template v-if="mediaType === ‘image’">
  <span>{{ mediaAlt }}
  <img :src="mediaSrc" :alt="mediaAlt" class="img-dialog" />
</template>
<template v-else-if="mediaType === ‘youtube’">
  <span>{{ mediaAlt }}
  <iframe :src="mediaSrc" width="100%" height="500" frameborder="0">
</template>
</el-dialog>

二重中括弧を使ったマスタッシュ構文っていうのがあるんですけど、ここにaltタグの内容をバインドするようにしました。mediaAltとかmediaSrc、mediaTypeなどは、あとから出てくるjavascriptで定義しています（忘れると表示しない）。

そのあとjavasccriptの部分で、const setup内に上記のmediaAltなどを定義して、クリックしたとき実行されるopenDialogファンクションでそれぞれvalueをセット、値をreturnという流れになります。表示自体はdialogVisible.value = trueかfalseだけなんですけど、urlやaltも入っているので少しだけややこしい感じでしょうか。