亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

Bagaimana untuk membuat karusel menggunakan slot?
P粉817354783
P粉817354783 2024-01-10 16:53:13
0
1
593

Orang ramai terus menunjukkan kepada saya cara yang sama untuk membuat karusel menggunakan pelbagai imej. Tetapi pendekatan ini tidak fleksibel kerana saya mahu setiap slaid karusel mengandungi komponen peti cahaya. Dalam kes ini, saya tidak mahu mengatasi kefungsian peti cahaya untuk imej yang saya masukkan ke dalam tatasusunan karusel. Hebat kan? Tulis kurang kod dan jadikan komponen boleh guna semula dalam Vue.js lebih berguna berbanding sebelum ini.

Saya dapati contoh yang sangat baik untuk menggunakan slot. Vue Carousel oleh SSENSE di GitHub. Sebagai pembangun web yang tidak begitu mahir, saya masih tidak faham bagaimana dia mendapat setiap slaid untuk memaparkan slot. Ini adalah templat

<carousel :per-page="1" :navigate-to="someLocalProperty" :mouse-drag="false">
    <slide>
      Slide 1 Content
    </slide>
    <slide>
      Slide 2 Content
    </slide>
  </carousel>

Seperti yang anda lihat, kami mempunyai karusel komponen induk dan tayangan slaid komponen anak. Bahagian yang paling sukar bagi saya ialah memikirkan cara untuk mengekstrak beberapa data daripadanya, seperti indeks, jumlah, dll., untuk mencipta kefungsian karusel. Saya bersetuju bahawa adalah lebih mudah untuk mencipta karusel dengan pelbagai imej, tetapi pendekatan ini tidak membenarkan kami menggunakan komponen lain dalam karusel.

Apa yang saya mahu? Saya entah bagaimana mahu mengekstrak indeks setiap slot yang meluncur dalam kes ini dan kemudian saya boleh mencipta fungsi untuk karusel dengan mudah dengan menukar indeks. Saya rasa terdapat laluan berbeza untuk mencipta karusel dengan slot, tetapi saya masih tidak begitu memahami semua konsep Vue dan JavaScript, jadi bolehkah anda memberitahu saya cara berbeza untuk menyelesaikan masalah ini.

P粉817354783
P粉817354783

membalas semua(1)
P粉402806175

Anda boleh menggunakan setup 函數(shù)的 slots 參數(shù)訪問(wèn)組件中的槽元素(也可與 useSlots() 組件一起使用,它相當(dāng)于 this.$slotsdalam API pilihan).

Kemudian anda boleh tahu berapa banyak unsur yang terkandung di dalamnya.

<script setup>
const slots = useSlots()

onMounted(() => {
  const defaultSlotElements = slots.default()
  console.log(`My default slot has ${defaultSlotsElements.length} elements.`)
})
</script>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan