卡卡網(wǎng)

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

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)窗口組件，點(diǎn)擊按鈕查看詳細(xì)介紹。</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是一套用于構(gòu)建用戶(hù)界面的漸進(jìn)式框架。</p>
        <p>與其它大型框架不同的是，Vue 被設(shè)計(jì)為可以自底向上逐層應(yīng)用。Vue 的核心庫(kù)只關(guān)注視圖層，不僅易于上手，還便于與第三方庫(kù)或既有項(xiàng)目整合。</p>
      </div>
    </modal>
  </transition>
</div>

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

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

name值為fade的transition標(biāo)簽，是彈窗容器，該容器的子元素modal，有個(gè)v-if屬性，其值為showModal；另外還有一個(gè)屬性@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>

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

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

CSS

該實(shí)例CSS需要引用一個(gè)庫(kù)文件。

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

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

#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);
}

總結(jié)

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

您可能對(duì)以下文章也感興趣

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

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