是否可以使用Vuetify/VueJS为轮播设置默认图像,而不是第一个图像?

egdjgwm8  于 2023-03-03  发布在  Vue.js
关注(0)|答案(1)|浏览(192)

目前我必须使用VuetiFy和VueJS实现一个carousel,但是我需要将默认图像设置为不同于数组的第一个元素,这取决于某些条件。
特别是,我有一个Comment模型与幻灯片模型的一个元素相关的(某条信息)(包含图像的模型)。此幻灯片还通过其他元素与其他幻灯片相关联。因此,当我需要查看某个注解时,我必须显示其对应的幻灯片以及该幻灯片的所有父级幻灯片顺序,但是将直接相关的一个显示为默认(或初始幻灯片)。
例如,注解N与12张幻灯片的数组中的第7张幻灯片相关,因此,在轮播中,应该呈现12张幻灯片,但开头的焦点应该在第7张幻灯片上。
在组件中,我有这样的内容:

<script setup lang="ts">
import { isNullOrUndefined } from '@core/utils/index'
import API_MEDIA_URL from '@/plugins/media_url'
import api from '@axios'
...
const props = defineProps(['comments', 'evalmode'])

const openedPanels = ref<number[]>([])
const slides = ref()

onMounted(() => {
  openedPanels.value = [0]

  api.get(`comment/slides/${props.comments[0].id}`).then(response => {
    slides.value = response.data
  })
})

watch(props, (newQ) => {
  openedPanels.value = [0]
})
</script>

<template>
...
<VExpansionPanels
  v-if="!isNullOrUndefined(slides) && 
    !isNullOrUndefined(props.comments)"
  multiple 
  v-model="openedPanels"
  >
  <VExpansionPanel
    v-for="comment in props.comments"
    :key="comment.id"
    v-model="openedPanels"
    >
      <v-row>
        <v-col>
          <v-card-actions class="justify-center">
            <v-carousel hide-delimiters :progress="true">
              <v-carousel-item
                v-for="(slide,i) in slides"
                  :key="i"
                  :src="API_MEDIA_URL+slide.src"
                  cover
                  ></v-carousel-item>
            </v-carousel>
          </v-card-actions>
        </v-col>
      </v-row>
  </VExpansionPanel>
</VExpansionPanels>
...
</template>
kjthegm6

kjthegm61#

v-model属性应该符合您的需要。如果您希望第7张幻灯片关注初始值,则可以设置值activeIndex = 6

<v-carousel v-model="activeIndex">    
      <v-carousel-item
          v-for="image in images"
          :key="image.path"
          :src="image.signedUrl"
          class="overflow-auto"
          contain
        ></v-carousel-item>
</v-carousel>

相关问题