[英]Is it possible to use glidejs inside a vue component?
我想在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>
代码中需要的主要修复是将Glide
初始化移动到mounted()
钩子,该钩子在组件已挂载到文档中时运行,从而能够找到提供给Glide
构造函数的.glide
选择器:
<script>
import Glide from '@glidejs/glide'
export default {
mounted() {
new Glide('.glide').mount()
},
}
</script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.