class.exe

blog.netaka.net

nuxt/contentとVuetifyで画像をオーバーレイ表示するコンポーネント

4/15/2021

この記事を書いてから2年が経っています。内容が古いかもしれません。

画像をクリックするとオリジナルサイズで拡大してオーバーレイ表示するコンポーネントを作ってみました。

Vuetifyのv-imgコンポーネントを利用したVueコンポーネントは下記のとおりです。

<template>
<div>
  <figure>
    <v-img
      @click="overlay = true"
      :src="src"
    ></v-img>
    <figcaption>{{img.caption}}</figcaption>
  </figure>
  <v-overlay
    :value="overlay"
    opacity="0.6"
  >
    <v-img
      @click="overlay = false"
      :src="src"
      width="100vw"
    ></v-img>
  </v-overlay>
</div>
</template>

<script>
export default {
  data() {
    return {
      src: require('~/static' + this.img.src),
      overlay: false
    }
  },
  props: ['img']
}
</script>

Markdownファイルには上記のVueコンポーネントをケバブケースで参照します。

<overlay-img :img="{'src':'/click.png', 'caption':'画像をクリックするとオリジナルサイズで拡大してオーバーレイ表示します'}"></overlay-img>

リファレンス