Vue.js,旧式旋转木马的例子

时间:2017-06-28 20:10:12

标签: vue.js vuejs2 vue-component

有没有办法在Vue2中实现以下轮播。链接: Image Carousel

// Parent component
<div class="col">
  <slider>
    <slide v-for="intro in compOpts.blockIntro">
      <block-intro :compOpts="{ props: { wrapper: true, bg: false } }">
        <p v-html="intro.title"></p>
        <div slot="content" v-html="intro.content" class="blockIntro__content"></div>
      </block-intro>
    </slide>
  </slider>
</div>

// Slider component
<div class="slider__container">
  <slot></slot>
</div>

// Slide component
<div>
 <slot></slot>
</div>

// BlockIntro component
<div class="col--h100" :class="{ 'bg--darkDark': compOpts.props.bg, 'col': !compOpts.props.wrapper }">
<div class="col col__blockIntro" :class="{ 'col__blockIntro--spaced': compOpts.props.spaced }">
  <div class="col col__blockIntro__introQuote">
    <slot></slot>
  </div>
  <slot name="content"></slot>
</div>

我的幻灯片组件给了我BlockIntro组件模板和div.col - h100是Slider中的第一个/父子元素。现在我正在尝试将一个可见类添加到div.col - 来自Slider组件的h100。我使用$ slots安装了Vnode,但无法更改$ slots中的值。$ elm.className

请帮忙。

0 个答案:

没有答案