Question

我很难在VueJS中为我的应用制作模态组件。我希望能够将它放在自己的组件中以实现可重用性，能够传递自定义内容并拥有多个模态。

我制作了组件，它看起来像是来自VueJS文档：

Modal.vue

<template>
  <div ref="modal">
    <script type="text/x-template" id="modal">
      <transition name="modal">
        <div class="modal-mask">
          <div class="modal-wrapper">
            <div class="modal-container">

              <div class="modal-header">
                <slot name="header">
                  Header
                </slot>
              </div>

              <div class="modal-body">
                <slot name="body">
                  Body
                </slot>
              </div>

              <div class="modal-footer">
                <slot name="footer">
                  Footer
                </slot>
                <button class="btn btn-primary" @click="$emit('close')">
                  Button
                </button>
              </div>
            </div>
          </div>
        </div>
      </transition>
    </script>
  </div>
</template>


<script>

  export default {
    components: { },
    props: ['header', 'footer', 'body', 'button'],
    data: () => ({
      showModal: false
    }),
    methods: {
      open () {
        console.log('Opening modal')
        this.showModal = true
      }
    }
  }
</script>

<style>

  #modal {
    /*color: #000;*/
  }

  .modal-mask {
    position: fixed;
    z-index: 9998;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .5);
    display: table;
    transition: opacity .3s ease;
  }

  .modal-wrapper {
    display: table-cell;
    vertical-align: middle;
  }

  .modal-container {
    width: 300px;
    margin: 0px auto;
    /*padding: 20px 30px;*/
    background-color: #25262D;
    color: #FEFEFE;
    border-radius: 3px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .33);
    transition: all .3s ease;
    font-size: 1.2em;
  }

  .modal-header {
    border-radius: 3px;
    background-color: #202128;
    border: none;
  }

  .modal-header h3 {
    margin-top: 0;
    color: #42b983;
  }

  .modal-body {
    margin: 20px 0;
    /*background-color: #202128;*/
    border: none;
  }

  .modal-footer {
    text-align: center;
    border: none;
  }

  .modal-footer .btn {
    font-size: 1.0em;
  }

  /*
   * The following styles are auto-applied to elements with
   * transition="modal" when their visibility is toggled
   * by Vue.js.
   *
   * You can easily play with the modal transition by editing
   * these styles.
   */

  .modal-enter {
    opacity: 0;
  }

  .modal-leave-active {
    opacity: 0;
  }

  .modal-enter .modal-container,
  .modal-leave-active .modal-container {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }

</style>

我在App.vue中添加了一个模态：

<button @click="openUpdatedModal()" type="button" class="btn btn-default" data-toggle="modal" data-target="#modal">
          Launch Updated Modal
      </button>

      <modal ref="updatedModal" v-if="showModal" @close="showModal = false">
        <!--
          you can use custom content here to overwrite
          default content
        -->
        <div slot="header">custom header</div>
      </modal>

<script>

import Modal from './components/Modal'

export default {
    components: { Modal },
    data: () => ({
        showModal: false
    }),
    methods: {
        openUpdatedModal () {
            this.$refs.updatedModal.open()
        }
    }
}
</script>

当我点击按钮时，我会在控制台中获得文字＆＃34;打开模态＆＃34;但没有任何反应。

如果我拥有App.vue中的所有代码

，我可以召唤它并且它可以工作

我错过了什么？

Answer 1

我通过创建 ModalComponent.vue 并删除评论中Phil建议的脚本标记，使其成功。这是代码。

ModalComponent.vue：

<template>
 <transition name="modal">
    <div class="modal-mask">
    <div class="modal-wrapper">
        <div class="modal-container">

        <div class="modal-header">
            <slot name="header">
            default header
            </slot>
        </div>

        <div class="modal-body">
            <slot name="body">
            default body
            </slot>
        </div>

        <div class="modal-footer">
            <slot name="footer">
            default footer
            <button class="modal-default-button" @click="$emit('close')">
                OK
            </button>
            </slot>
        </div>
        </div>
    </div>
    </div>
 </transition>
</template>
<script>
  export default{

  }
</script>

以下是我如何定义我的组件：

Vue.component('modal', ModalComponent);

标记中的模态按钮：

<button id="show-modal" @click="showModal = true">Show Modal</button>

在页面上调用模态组件：

    <modal v-if="showModal" @close="showModal = false">
        <!--
        you can use custom content here to overwrite
        default content
        -->
        <h3 slot="header">custom header</h3>
    </modal>

值得注意的是，无论我在哪里使用模态，我都必须声明 showModal 属性。

Vuejs模态组件传递数据

1 个答案: