Modifier l'index du tableau pour afficher la diapositive suivante

Question

<template>
    <div class="carrousel">
        
        <emplacement></emplacement>
         <bouton @click="index++">Suivant</bouton>
    </div>

</modèle>
<configuration du script>
importer { useSlots, onMounted, onUpdated, ref} depuis 'vue' ;

const emplacements = useSlots()
indice const = réf (0)
onMounted(() => {
  const defaultSlotElements = slots.default()
  console.log(`Mon emplacement par défaut contient des éléments ${defaultSlotElements.length}.`)
  
}),
onUpdated(() =>{
    console.log(defaultSlotElements[index])
}
)

</script>

J'essaie de créer un carrousel basé sur des emplacements. Merci au gars précédent sur Stack Overflow qui m'a aidé à comprendre comment extraire le tableau des emplacements. Maintenant, je suis confronté à un autre problème. Afin de créer le carrousel, je dois en quelque sorte modifier l'index des éléments du tableau afin de pouvoir passer à la diapositive suivante du carrousel. Plus tard, j'ai dû l'injecter dans mon composant diaporama pour que V-show restitue l'emplacement actuel qui est par défaut 0. Mais la valeur de l'index est modifiée par l'instruction v-on qui modifie l'index, elle sélectionne donc l'emplacement suivant ou précédent dans le tableau. Je sais que j'ai choisi un thème complexe dans vue, mais je ne souhaite pas utiliser une version plus simple d'un carrousel basé sur un tableau d'images, car je ne peux pas y ajouter un autre composant.

Il s'avère que je ne peux pas sélectionner l'objet suivant dans le tableau simplement en modifiant l'index arr[index].

Answer 1

Si vous avez vraiment besoin de faire cela avec une machine à sous, alors vous devez le faire Utilisation des fonctions Vue render et JSX

<script setup>
import { useSlots, onMounted, onUpdated, ref, h} from 'vue';

const slots = useSlots()
const index = ref(0)
const current = ref(null)
onMounted(() => {
  const defaultSlotElements = slots.default()
  current.value = defaultSlotElements[0]
}),
onUpdated(() =>{
    console.log(defaultSlotElements[index])
    }
)  
const render = () => {
    return h('div', { class: 'carousel'}, [
    h('p', `My default slot has ${slots.default().length} elements.`),
    h('div', slots.default()[index.value]),
    h('p', `Picture ${ index.value + 1 }`),
    h('button', { onClick: () => { 
      index.value = index.value + 1 == slots.default().length ? 0 : index.value + 1
    } }, 'Next')
  ]);
};
</script>

<template>
    <render />
</template>

C'est du travailSFC Playground

Mise à jour

Les fonctions de rendu peuvent être utilisées avec des composants personnalisés.

Essayez de construire votre structure ici.

Aire de jeux SFC

Je ne vois pas d'autre moyen d'utiliser la fonction 默认插槽而不是使用render pour créer ce que vous voulez.