javascript - 通过单击来展开图像(vuetify)
问题描述
我将继续在我的小型个人项目中使用 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>
解决方案
我认为 v-overlay组件正是您所需要的。只需将具有正确 src 属性的 v-img 或简单的 img 放入其中即可。
推荐阅读
- jmeter - Jmeter分布式测试大师作为2个客户端
- javascript - 如何使用nestjs 配置winston 服务?
- sql - SQL中的查询优化
- haskell - 如何为这种类型编写可折叠实例?
- linux - 如何在 Assembly (x64/Linux) 中使用动态分配的内存?
- javascript - 使用javascript隐藏弹出窗口
- angular - 单个选择不适用于 p 表中的复选框
- postgresql - PostgreSQL 将自动增量添加到空 ID 列
- jupyter-lab - 如何在 Jupyterlab 中安装 sudo 命令以及用户 jovyan 的密码是什么?
- javascript - 如何获得离子内容的最大滚动高度?