javascript - 是否可以在 vue 组件中使用 glidejs？

Question

我想在组件glidejs内部使用vuejs，尽管到目前为止我还不能让它工作。

有可能实现这一目标吗？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>

演示