Tukar indeks tatasusunan untuk menunjukkan slaid seterusnya

Question

<template>
    <div class="karusel">
        
        <slot></slot>
         <butang @klik="index++">Seterusnya</button>
    </div>

</template>
<persediaan skrip>
import { useSlots, onMounted, onUpdated, ref} daripada 'vue';

slot const = useSlots()
indeks const = ref(0)
onMounted(() => {
  const defaultSlotElements = slots.default()
  console.log(`Slot lalai saya mempunyai elemen ${defaultSlotElements.length}.`)
  
}),
onUpdated(() =>{
    console.log(defaultSlotElements[index])
}
)

</script>

Saya cuba mencipta karusel berasaskan slot. Terima kasih kepada lelaki terdahulu di Stack Overflow yang membantu saya memikirkan cara mengekstrak tatasusunan slot. Sekarang, saya sedang menghadapi masalah lain. Untuk mencipta karusel, saya perlu menukar indeks elemen dalam tatasusunan supaya saya boleh beralih ke slaid seterusnya karusel. Saya kemudiannya terpaksa menyuntik ini ke dalam komponen tayangan slaid saya agar V-show memberikan slot semasa yang lalai kepada 0. Tetapi nilai indeks diubah oleh arahan v-on yang mengubah indeks, jadi ia memilih slot seterusnya atau sebelumnya dalam tatasusunan. Saya tahu saya telah memilih tema kompleks dalam vue, tetapi saya tidak mahu menggunakan versi karusel yang lebih ringkas berdasarkan susunan imej, kerana saya tidak boleh menambah komponen lain di dalamnya.

Ternyata saya tidak boleh memilih objek seterusnya dalam tatasusunan hanya dengan menukar indeks arr[index].

Answer 1

Jika anda benar-benar perlu melakukan ini dengan slot, maka anda perlu melakukan ini Menggunakan fungsi Vue render dan 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>

Ini kerjaSFC Playground

Dikemas kini

Fungsi pemaparan boleh digunakan dengan komponen tersuai.

Cuba bina struktur anda di sini.

Taman Permainan SFC

Saya tidak nampak cara lain untuk menggunakan fungsi 默认插槽而不是使用render untuk membina apa yang anda mahukan.