Question

所以我试图在vue组件中使用slick.js carousel插件。这在没有嵌套的vue组件时有效。但是，在我尝试使用嵌套div为幻灯片用于滑动轨道的div包装的那一刻，但是在重复之外。基本上，专辑只是迭代一个专辑列表，并将所有参数传递给子专辑。一切都是启动，光滑的工作，组件工作，但他们不在滑轨内，这意味着他们没有得到旋转木马治疗。

我研究了做指令，老虎机等等，但没有任何关于此的信息。

这是我的HTML：

<div class="albums-component">
    <div class="albums-container" v-slick>
        <album v-for="album in albums.data"
               :album="album"
               file-types="audio,video,image"
               :fixed-size="fixedSize"
               :show-rotator="showRotator"
               :display-limit="3"
               :columns-lg="columnsLg"
               :columns-md="columnsMd"
               :columns-sm="columnsSm"
               :center-images="centerImages"
               :presenter-enabled="true"
               :manage-enabled="manageEnabled">
        </album>
    </div>
    <button class="left add-button" v-on:click="createAlbum"> + </button>
</div>

这是我的光滑指令：

Vue.directive('slick', {
twoWay: true,
priority: 1000,

params: ['options'],

bind: function () {
    var self = this;
    setTimeout(function(){
        $(self.el).slick({
            slidesToShow: 1,
            slidesToScroll: 1,
            elementsExist: true,
            arrows: false,
            fade: true
        });
    }, 1000);

},
update: function (value)
{

},
unbind: function ()
{

}

}）;

我不会发布专辑组件以保持这篇文章的简短，因为它的安静很长（在道具，方法等方面）。

如果不在VueJS中编写新的轮播组件，我将如何实现这一目标，我们将不胜感激！

我能够通过添加一个500毫秒延迟的setTimeout（）来实现这一点...虽然这看起来不太稳定，是否有一个钩子说明编译立即组件时以及所有子组件？

Answer 1

也许这个例子可以帮助你。

https://jsfiddle.net/ycmnnx9k/2/

HTML

<div id="app">
  <album v-for="(album, index) in albums" :key="index" :album="album"></album>

  <button type="button" @click="addAlbum">
    add album
  </button>
</div>

<script type="text/x-template" id="album">
  <div>
    <div v-for="item in album.items">
        <img v-bind:src="item.url">
    </div>
  </div>
</script>

JS

new Vue({
  el: '#app',
  methods: {
    addAlbum () {
      let newAlbum = Object.assign({}, this.newAlbum)
      this.albums.push(newAlbum)
    }
  },
  data: {
    albums: [],
    newAlbum: {
        items: [
        {name: 1, url: 'https://placeimg.com/200/100/any'},
        {name: 2, url: 'https://placeimg.com/200/100/people'},
        {name: 3, url: 'https://placeimg.com/200/100/tech'},
        {name: 4, url: 'https://placeimg.com/200/100/nature'},
        {name: 5, url: 'https://placeimg.com/200/100/arch'}
      ]
    }
  }
})

Vue.component('album', {
    template: '#album',
    props: ['album'],
    mounted: function () {
      $(this.$el).slick({
        infinite: true,
        slidesToShow: 3,
        slidesToScroll: 3
      })
    }
})

VueJS：在jquery插件中使用嵌套组件

1 个答案: