gpt4 book ai didi

javascript - 通过单击展开图像(vuetify)

转载 作者:行者123 更新时间:2023-12-02 18:55:53 24 4
gpt4 key购买 nike

我将继续在我的小型个人项目中使用 vuetify 来很好地学习 vue 和 vuetify,我正在使用 v-col 和 v-img 创建一个图片库,我想点击每张图片以查看完整图片屏幕(在样式灯箱中)但似乎 vuetify 没有这种 native 功能,这可能吗?没有似乎很奇怪。谁能建议我一个解决方案?抱歉,这个问题可能很愚蠢,但正如我所说,我是初学者

我附上代码

    <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>

最佳答案

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

关于javascript - 通过单击展开图像(vuetify),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/66195217/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com