单击图像展开(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组件正是你所需要的。只要把v-img或简单的img与正确的src属性在里面。

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