0
我已經認識到在.vue single file components使用Zurb Foundation類時是一個問題。起初,我不能讓一個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">×</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>◀︎</button>
<button class="orbit-next"><span class="show-for-sr">Next Slide</span>▶︎</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>
你可以創建一個jsfiddle,你可以使用這個[base](http://jsfiddle.net/7h1pLe9a/) – Saurabh
我認爲這不會有多大幫助,因爲問題不在於代碼 –
它會幫助,人們可以重現錯誤並找出如何解決它。 – CodinCat