Проблема с основанием, используемым в компонентах одного файла .vue

Я понял, что существует проблема при использовании классов Zurb Foundation в .vue single file components. Сначала я не мог получить Reveal Modal для работы внутри .vue component, но он работал, когда я использую тот же код в файле blade или html. Затем я заметил шаблон, потому что, когда я пытался использовать Foundation's Orbit внутри компонента, он не сработал, сначала я подумал, что это ошибка, но затем я использовал тот же код в файле blade, и он сработал. Другие классы фундамента, такие как row, grid и buttons, работают отлично.Проблема с основанием, используемым в компонентах одного файла .vue

Кто-нибудь испытал ту же проблему? И как я могу обойти это?

Вот код для модального:

<a data-open="video" class="button warning" href="">WATCH VIDEO</a> 

<div id="video" class="reveal" data-reveal> 
    <div class="lead"> 
     <button class="close-button" data-close aria-label="Close modal" type="button"> 
      <span aria-hidden="true">&times;</span> 
     </button> 
    </div> 
    <div class="flex-video"> 
     <iframe width="1280" height="720" :src="url" frameborder="0" allowfullscreen></iframe> 
    </div> 
</div>

И на орбите я использовал простой пример в документации фундамента для тестирования.

<div class="orbit" role="region" aria-label="Favorite Space Pictures" data-orbit> 
    <ul class="orbit-container"> 
    <button class="orbit-previous"><span class="show-for-sr">Previous Slide</span>&#9664;&#xFE0E;</button> 
    <button class="orbit-next"><span class="show-for-sr">Next Slide</span>&#9654;&#xFE0E;</button> 
    <li class="is-active orbit-slide"> 
     <img class="orbit-image" src="assets/img/orbit/01.jpg" alt="Space"> 
     <figcaption class="orbit-caption">Space, the final frontier.</figcaption> 
    </li> 
    <li class="orbit-slide"> 
     <img class="orbit-image" src="assets/img/orbit/02.jpg" alt="Space"> 
     <figcaption class="orbit-caption">Lets Rocket!</figcaption> 
    </li> 
    <li class="orbit-slide"> 
     <img class="orbit-image" src="assets/img/orbit/03.jpg" alt="Space"> 
     <figcaption class="orbit-caption">Encapsulating</figcaption> 
    </li> 
    <li class="orbit-slide"> 
     <img class="orbit-image" src="assets/img/orbit/04.jpg" alt="Space"> 
     <figcaption class="orbit-caption">Outta This World</figcaption> 
    </li> 
    </ul> 
    <nav class="orbit-bullets"> 
    <button class="is-active" data-slide="0"><span class="show-for-sr">First slide details.</span><span class="show-for-sr">Current Slide</span></button> 
    <button data-slide="1"><span class="show-for-sr">Second slide details.</span></button> 
    <button data-slide="2"><span class="show-for-sr">Third slide details.</span></button> 
    <button data-slide="3"><span class="show-for-sr">Fourth slide details.</span></button> 
    </nav> 
</div>

источник

2016-12-16 Phillis Peters

Можете ли вы создать jsfiddle, вы можете использовать это как [base] (http://jsfiddle.net/7h1pLe9a/) – Saurabh

Я не думаю, что это поможет, потому что проблема не с кодом –

Это будет помощь, люди могут воспроизвести ошибку и выяснить, как ее исправить. – CodinCat

Существует проблема при использовании vue components с foundation js components, и именно поэтому они не показывают, как объяснено here

Поэтому я добавил эту директиву в мой тег сценария:

Vue.directive('f-orbit', { 
    bind: function (el) { 
     new Foundation.Orbit($(el)) 
    }, 
    unbind: function (el) { 
     $(el).foundation.destroy() 
    } 
})

и в моем шаблон Я добавил v-f-orbit вместо значения по умолчанию data-orbit:

<div class="contemporary orbit" role="region" aria-label="Contemporary Pictures" v-f-orbit>

Надеюсь, это поможет кому-то, кто застрял.

источник

2016-12-19 07:52:27

Проблема с основанием, используемым в компонентах одного файла .vue

ответ

Смежные вопросы