小编Dan*_*ina的帖子

单击展开图像 (vuetify)

我继续在我的小型个人项目中使用 vuetify 来很好地研究 vue 和 vuetify,我正在使用 v-col 和 v-img 创建图像库,我想单击每个图像以进入全屏(在style lightbox)但 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: [ …
Run Code Online (Sandbox Code Playgroud)

javascript vue.js vuetify.js

3
推荐指数
1
解决办法
6674
查看次数

如何在每个“v-list-item”之间有“v-divider”组件?

我试图根据我有多少个答案来迭代 v-divider,以便每个答案都有一个分隔符 (4)。从官方文档的一个例子中得到提示,我正在尝试类似的事情,但我无法理解,有人可以向我解释我错在哪里? 在此输入图像描述

这是代码:

<template>
  <div class="dark2">
    <v-card max-width="600" class="mx-auto">
      <v-toolbar extended class="mt-10" color="light-blue" dark>
        <v-toolbar-title class="flex text-center">
          <h2 class="text-center mt-10">Quiz Dark 2</h2>
        </v-toolbar-title>
      </v-toolbar>

      <v-progress-linear :value="progress"></v-progress-linear>

      <v-list subheader two-line v-for="(element, index) in questions.slice(a,b)" :key="index" v-show="quiz">
        <h1 class="text-center my-4">Domanda {{ b }}/{{ questions.length }}</h1>
        <v-list-item class="d-flex justify-center text-center">{{ element.question }}</v-list-item>
        <v-divider class="mt-10"></v-divider>

        <v-list-item-group active-class="pink--text">
          <v-list-item class="d-flex justify-center my-2" v-for="(item, index) in element.suggestions" :key="index">
            {{ item.suggestion }}
          </v-list-item>
          <v-divider v-if="index < questions.length - 1"
                     :key="index"></v-divider>
        </v-list-item-group>
      </v-list>

    </v-card>
  </div> …
Run Code Online (Sandbox Code Playgroud)

javascript vue.js vue-component vuetify.js

2
推荐指数
1
解决办法
6819
查看次数

标签 统计

javascript ×2

vue.js ×2

vuetify.js ×2

vue-component ×1