javascript - 是否可以在 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() hook ，当组件安装在文档中时运行，从而可以找到提供给 Glide 构造函数的 .glide 选择器:

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

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

demo