通过单击来展开图像（vuetify）

Question

我将继续在我的小型个人项目中使用 vuetify 来很好地学习 vue 和 vuetify，我正在使用 v-col 和 v-img 创建一个图片库，我想点击每张图片去完整屏幕（在样式灯箱中）但似乎 vuetify 没有这种本机功能，这可能吗？没有似乎很奇怪。谁能建议我一个解决方案？对不起，也许是个愚蠢的问题，但正如我所说的，我是初学者

我附上代码

    <template>
  <div class="gallery">
    <h1 class="subtitle-1 grey--text pa-2 d-flex justify-center">Galleria</h1>
   <v-divider></v-divider>
   <v-container class="my-5">
       <div>
         <v-row>
    <v-col v-for="item in items" :key="item.id" class="d-flex child-flex" cols="4" >
      <v-img :src="item.src" contain class="grey lighten-2">
        <template v-slot:placeholder>
          <v-row class="fill-height ma-0" align="center" justify="center">
            <v-progress-circular indeterminate color="grey lighten-5"></v-progress-circular>
          </v-row>
        </template>
      </v-img>
    </v-col>
  </v-row>
       </div>
   </v-container>
  </div>
</template>

<script>
// @ is an alias to /src

export default {
  name: 'Gallery',

  data(){
    return {
      items: [
        {id: 1, src: require("../assets/images/img1.jpg")},
        {id: 2, src: require("../assets/images/img2.jpg")},
        {id: 3, src: require("../assets/images/img3.jpg")},
        {id: 4, src: require("../assets/images/img4.jpg")},
        {id: 5, src: require("../assets/images/img5.jpg")},
        {id: 6, src: require("../assets/images/img6.jpg")},
        {id: 7, src: require("../assets/images/img7.jpg")},
        {id: 8, src: require("../assets/images/img8.jpg")},
      ]
    }
  }

}
</script>

Answer 1

我认为v-overlay 组件正是您所需要的。只需将具有正确 src 属性的 v-img 或简单的 img 放入其中即可。

Answer 2

您可以在您的 img 上切换全屏 onClick @click="toggleFullscreen(element)"，但您需要提供元素，例如通过 Ref 或 Id。切换方法示例：

toggleFullscreen(element) {
   if (document.fullscreenElement) { 
     return document.exitFullscreen() // exit fullscreen on next click
   }
   if (element.requestFullscreen) {
     element.requestFullscreen()
   } else if (this.element.webkitRequestFullscreen) {
     element.webkitRequestFullscreen() // Safari
   } else if (this.element.msRequestFullscreen) {
     element.msRequestFullscreen() // IE11
   }
 }

参考：https://www.w3schools.com/jsref/met_element_requestfullscreen.asp、https://developer.mozilla.org/en-US/docs/Web/API/Element/requestFullScreen