卡卡網(wǎng)

前面曾介紹過使用JS或純CSS來實現(xiàn)的模態(tài)彈窗，比如10款純CSS模態(tài)彈窗/模式窗口(modal popup)，4款響應式模態(tài)彈窗(modal popup)，實現(xiàn)彈窗的設計并不難也不復雜，不過如果使用第三方組件Vue.js，則可以讓模態(tài)窗口(彈窗)的設計變得更加容易，編寫代碼更少，并且效果更佳。

demodownload

HTML

<div id="app">
  <div class="content">
    <p class="subtitle"><strong>Vue.js</strong> 組件</p>
    <h1 class="title">模態(tài)窗口</h1>
    <hr/>
    <p>使用模態(tài)窗口組件，點擊按鈕查看詳細介紹。</p>
    <button class="button is-primary" @click="showModal = true">產(chǎn)品描述</button>
  </div>
  <transition name="fade">
    <modal v-if="showModal" @close="showModal = false">
      <template slot="header">產(chǎn)品描述</template>
      <div class="content">
        <p>Vue是一套用于構建用戶界面的漸進式框架。</p>
        <p>與其它大型框架不同的是，Vue 被設計為可以自底向上逐層應用。Vue 的核心庫只關注視圖層，不僅易于上手，還便于與第三方庫或既有項目整合。</p>
      </div>
    </modal>
  </transition>
</div>

id為app的div，是vue.js組件監(jiān)控的元素，id值app需與實例里的jquery編程代碼el: '#app'一致。

class值為content的div，是存放網(wǎng)頁內(nèi)容的元素標簽。里面的按鈕使用button元素，其class值是button，另外其有一個@click屬性，值為showModal = true。

name值為fade的transition標簽，是彈窗容器，該容器的子元素modal，有個v-if屬性，其值為showModal；另外還有一個屬性@close，其值為showModal = false。

JS

<script src='jquery-3.2.1.min.js'></script>
<script src='vue.min.js'></script>
<script>
Vue.component('modal', {
  template: `
    <div class="modal is-active">
      <div class="modal-background"></div>
        <div class="modal-card">
          <header class="modal-card-head">
            <p class="modal-card-title">
              <slot name="header"></slot>
            </p>
            <button class="delete" aria-label="close" @click="$emit('close')"></button>
          </header>
          <section class="modal-card-body">
            <slot></slot>
          </section>
          <footer class="modal-card-foot">
            <slot name="footer">
              <button class="button is-success" @click="$emit('close')">OK</button>
              <button class="button" @click="$emit('close')">Cancel</button>
            </slot>
          </footer>
        </div>
    </div>
  ` });


new Vue({
  el: '#app',

  data: {
    showModal: false } });
</script>

本實例用到JQuery編程，所以首先需要加載jquery.js庫文件。此外，還需加載vue.min.js庫文件。

彈窗里的OK和Cancel按鈕文字在JQuery程序里設置。

CSS

該實例CSS需要引用一個庫文件。

<link rel='stylesheet' href='bulma.min.css'>

 另外的CSS樣式主要是網(wǎng)頁內(nèi)容布局、位置、文字、按鈕、彈窗過度效果等樣式的個性化設計。

#app {
  margin: 3.75em auto;
  padding: 0.75em;
  max-width: 37.5em;
}

.container {
  margin-bottom: 1.5em;
}

.btn-action-delete {
  color: #cc4b37;
  cursor: pointer;
}

.tasks {
  list-style: none;
  margin-left: 0;
}

.task label {
  margin: 0 0.125em;
}

.completed label {
  text-decoration: line-through;
  color: #cacaca;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.2s ease-out;
}
.fade-enter-active .modal-card,
.fade-leave-active .modal-card {
  transition: transform 0.2s ease-out;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}
.fade-enter .modal-card,
.fade-leave-to .modal-card {
  transform: scale(0.9);
}

總結

本實例介紹了如何用vue.js組件來實現(xiàn)模態(tài)彈窗的設計，相比純JS/CSS實現(xiàn)的彈窗方法，該方法多引用了幾個文件(js、css)，不過該方法實現(xiàn)的效果更佳，代碼更少，用戶使用體驗會更好。

您可能對以下文章也感興趣

• 10款純CSS模態(tài)彈窗/模式窗口(modal popup)
• 4款響應式模態(tài)彈窗(modal popup)
• 響應式彈出DIV層常見效果/模式窗口設計
• Bootstrap 3 & AngularJS 模態(tài)對話窗口設計實例
• 純CSS3實現(xiàn)模態(tài)彈出窗口
• CSS實現(xiàn)模式窗口(modal window)覆蓋層的3種方法

標簽: vue.js  模態(tài)窗口  彈窗