是否可以在 vue 組件中使用 glidejs？

Question

我想在vuejs組件中使用glidejs ，盡管到目前為止我還不能讓它工作。

有可能實現這一目標嗎？ vuejs支持這樣的東西嗎？

我的代碼：

<template>
    <div>
        <div class="glide">
            <div class="glide__track" data-glide-el="track">
                <ul class="glide__slides">
                    <li class="glide__slide">0</li>
                    <li class="glide__slide">1</li>
                    <li class="glide__slide">2</li>
                </ul>
            </div>
            <div class="glide__arrows" data-glide-el="controls">
                <button class="glide__arrow glide__arrow--left" data-glide-dir="<">prev</button>
                <button class="glide__arrow glide__arrow--right" data-glide-dir=">">next</button>
            </div>
        </div>
    </div>
</template>

<script>
import Glide from '@glidejs/glide'
new Glide('.glide').mount() // this is probably wrong
    export default {
        name: 'Carousel',
    }
</script>

<style scoped>
    @import '../assets/styles/glide/glide.core.min.css';
</style>

Answer 1

代碼中需要的主要修復是將Glide初始化移動到mounted()鈎子，該鈎子在組件已掛載到文檔中時運行，從而能夠找到提供給Glide構造函數的.glide選擇器：

<script>
import Glide from '@glidejs/glide'

export default {
  mounted() {
    new Glide('.glide').mount()
  },
}
</script>

演示