是否可以在 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

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

Is it possible to use glidejs inside a vue component?

javascript

vue.js

glidejs