时间戳

首页 > 解决方案 > 使用 VUE 在一个页面上创建多个模式

javascript - 使用 VUE 在一个页面上创建多个模式

问题描述

正如标题所暗示的，我想在一页上添加两个模式对话框。我想出了如何创建，但第二个我遇到了麻烦。

HTML：

<body>
  <h1>-projects-</h1>
  <ul id="button-container">
    <li>
      <a id="html-modal-button" @click="showModal = true">
        <img class="htmllogo" src="images/HTMLLogo.png">
        <div class="html-text-block">
          <h2>HTML</h2>
          <p>My web projects</p>
        </div>
      </a>
      <htmlmodal v-if="showModal" @close="showModal = false"></htmlmodal>
    </li>

    <li>
      <a id="cs-modal-button" @click="showModal = true">
        <img class="csharplogo" src="images/CSHARPLogo.png">
        <div class="cs-text-block">
          <h2>C#</h2>
          <p>My windows projects</p>
        </div>
      </a>
      <csmodal v-if="showModal" @close="showModal = false"></csmodal>
    </li>
  </ul>

  <!-- MODAL SECTION -->
  <script type="text/x-template" id="html-modal-template">
    <transition name="html-modal">
      <div class="modal-mask">
        <div class="modal-wrapper">
          <div class="modal-container">
            <div class="modal-header">
              <slot name="header">HTML HEADER</slot>
            </div>
            <div class="modal-body">
              <slot name="body">HTML BODY</slot>
            </div>
            <div class="modal-footer">
              <slot name="footer">HTML FOOTER
                <button class="modal-default-button" @click="$emit('close')">OK</button>
              </slot>
            </div>
          </div>
        </div>
      </div>
    </transition>
  </script>

  <script type="text/x-template" id="cs-modal-template">
    <transition name="cs-modal">
      <div class="modal-mask">
        <div class="modal-wrapper">
          <div class="modal-container">
            <div class="modal-header">
              <slot name="header">CS HEAD</slot>
            </div>
            <div class="modal-body">
              <slot name="body">CS BODY</slot>
            </div>
            <div class="modal-footer">
              <slot name="footer">CS FOOTER
                <button class="modal-default-button" @click="$emit('close')">OK</button>
              </slot>
            </div>
          </div>
        </div>
      </div>
    </transition>
  </script>

</body>

</html>

Vue.JS：

$(window).load(function(){
    // CREATE THE DOM COMPONENT
    Vue.component('htmlmodal', {
        template: '#html-modal-template',
    });

    Vue.component('csmodal', {
        template: '#cs-modal-template',
    });


    // START THE APP
    new Vue({
        el:'#button-container',
        data: {
            showModal: false
        }
    })
});

**小提琴：** https://jsfiddle.net/oz053uzj/

正如你所看到的，我已经分离了模态部分，所以基本上我可以简单地创建和编辑一个模态，创建一个vue.component并引用它。

当我尝试打开模态时出现问题，似乎只为每个按钮打开第二个或最后一个@click="showModal = <>"模态，我认为这两个模态的原因是相同的，但我一无所知..

标签： javascripthtmlvue.js

解决方案

因为它们v-if是基于相同的数据showModal。

如果showModal为真，则两者都会显示。最后一个将在顶部。

那么如何根据字符串而不是 true/false 来区分它们呢？

<a id="html-modal-button" @click="showModal = 'html-modal'">

和

<htmlmodal v-if="showModal === 'html-modal'" ...

?

演示：https ://jsfiddle.net/jacobgoh101/oz053uzj/1/

推荐阅读