点击放大图片
点击放大图片
提问于 2022-02-02 13:18:32
我有一个图片库的网站，并试图扩大图像使用全屏幕功能。
<template>
<v-container class="mt-12">
<v-row justify="center" v-if="!$fetchState.pending">
<v-col
cols="4"
v-for="image in service.data.attributes.gallery.data"
:key="image.id"
>
<v-img
class="d-flex child-flex"
:src="`${image.attributes.formats.large.url}`"
:lazy-src="`${image.attributes.formats.thumbnail.url}`"
contain
@click="toggleFullscreen(image.attributes.url)"
>
</v-img>
</v-col>
</v-row>
<v-row v-else>
<LoadSpinner />
</v-row>还有我的图格法
methods: {
toggleFullscreen(elem) {
console.log(elem);
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.msRequestFullscreen) {
elem.msRequestFullscreen();
} else if (elem.mozRequestFullScreen) {
elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) {
elem.webkitRequestFullscreen();
} else {
alert(
"Sorry, your browser is too old and doesn't support fullscreen :-("
);
}
},
},我有和数组来自一个strapi，这个想法是在画廊显示一个低分辨率的图像，当剪裁全屏高分辨率版本。
问题，每次我点击它会触发警报，所以这个方法不能得到正确的信息去工作，可以是image创建一个div并使用de图像作为背景？
谢谢
pd已经尝试了对话框和覆盖，但无法弄清楚如何“攻击”单个元素
回答 1
Stack Overflow用户
发布于 2022-02-08 11:52:28
在尝试了各种库和必须提供vuetify之后，我做了一个普通css的解决方案。
我创建了一个变量，当单击图像传递图像的url时，当该变量不为null时，模板加载一个div，并覆盖屏幕。
在我的模板里
<v-img
v-for="image in service.data.attributes.gallery.data"
:key="image.id"
:src="`${image.attributes.formats.large.url}`"
@click="toggleFullscreen(image.attributes.url)"
/>
<div v-if="selectedImage" class="overlay">
<v-img
class="mt-12"
:src="selectedImage"
alt=""
height="95vh"
contain
dark
@click.stop="selectedImage = null"
>
</v-img>
</div>脚本部分
<script>
...
export default {
data() {
return {
...
selectedImage: null,
};
},
...
methods: {
toggleFullscreen(elem) {
this.selectedImage = elem;
},
},
};
</script>css
.overlay {
position: fixed; /* Sit on top of the page content */
width: 100%; /* Full width (cover the whole page) */
height: 100%; /* Full height (cover the whole page) */
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
cursor: pointer; /* Add a pointer on hover */
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/70956347
复制相关文章
相似问题
腾讯云开发者
