Question

当我学习VueJS时，我正在创作一个模态组件。模态组件基本上由两个主要元素组成：包含所有内容的实际框和叠加层。

现在我遇到的问题是覆盖元素根本没有渲染。但是如果我将叠加从组件模板移动到父作用域，一切都会好的。

以下是父范围的代码：

<my-modal v-show="show" v-on:hide="show = false"></my-modal>
<!-- Overlay will be rendered properly if I put overlay here. -->
<!-- <div class="my-modal-overlay" v-show="show" @click="show = false"></div>  -->

组件模板的代码：

<template id="tpl-my-modal">
    <transition name="modal-fade" enter-active-class="animated zoomIn" leave-active-class="animated zoomOut">
            <div class="my-modal-box">
                <div class="my-modal-content">
                    <div class="my-modal-header"><h1>Title</h1></div>
                    <div class="my-modal-body">Body</div>
                    <div class="my-modal-footer"><button class="btn btn-danger" @click="$emit('hide')">Close</button></div>
                </div>
            </div>
            <!-- Overlay is not rendered at all if I put it here. -->
            <div class="my-modal-overlay" @click="show = false"></div>
        </transition>
    </template>

Javascript：

Vue.component('my-modal', {
    template: '#tpl-my-modal'
})

两个截图。灰色图层是覆盖所有视口的叠加元素。

有人能解释一下这个问题吗？谢谢！

更新

snippets来了。随意评论/评论HTML中的第11行/第26行，以查看差异。

更新

事实证明，Vue组件只能有一个根元素，<transition>标签只能有一个元素，这意味着我之前所做的错误。

因此我调整了一下代码，现在在控制台中Vue不再抱怨了。并且渲染了模态框和叠加层。

<template id="tpl-my-modal">
    <div>
      <transition name="modal-fade" enter-active-class="animated zoomIn" leave-active-class="animated zoomOut">
        <div class="my-modal-box">
          <div class="my-modal-content">
            <div class="my-modal-header">
              <h1>{{ program.title }}</h1></div>
            <div class="my-modal-body"> {{ program.intro }}</div>
            <div class="my-modal-footer">
              <button class="btn btn-danger" @click="$emit('hide')">Close</button>
            </div>
          </div>
        </div>
      </transition>
      <div class="my-modal-overlay" @click="show = false"></div>
    </div>
  </template>

但是有一个问题尚未解决：所有过渡都消失了。这是snippets。有什么问题？

Answer 1

对于转换问题，您应该将transition标记放在模板的根div之后，如下所示..

<template id="tpl-my-modal">
<transition name="modal-fade" enter-active-class="animated zoomIn" leave-active-class="animated zoomOut">
    <div>
    //the rest of your code..

因为当您将<{1}}用于组v-show

时，div将应用于根my-modal

<my-modal v-show="show" v-on:hide="show = false" v-bind:program="activeProgram"></my-modal>

Answer 2

检查这个小提琴https://jsfiddle.net/cihkem/0rmt28y2/

Vue.component('my-modal', {
  template: '#tpl-my-modal',
  props: ['program', 'show']
})

new Vue({
  el: '#app',
  data: {
    show: false,
    activeProgram: {},
    programs: [{
      title: 'Westworld',
      intro: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi cum incidunt ipsum impedit nostrum, repellendus illum, officia labore neque ea quam ad maiores corporis deserunt quos odio distinctio similique in.'
    }, {
      title: 'Game of Thrones',
      intro: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet perspiciatis eos aperiam, veritatis, voluptate eius similique saepe libero consectetur suscipit dolorem molestiae animi nostrum voluptatem quidem sapiente? Fugit, hic, fugiat!'
    }, {
      title: 'X Files',
      intro: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit nobis, nisi ex exercitationem magnam nemo repudiandae dolor maxime odio reprehenderit animi ducimus a consequatur, saepe suscipit dolorem ratione tempore perferendis.'
    }]
  },
  methods: {
    showDetails: function(program) {
      this.show = true;
      this.activeProgram = program;
    }
  }
})

.my-modal-overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1040;
  background-color: #000;
  opacity: .3;
}

.my-modal-box {
  opacity: 1;
  position: relative;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1050;
}

.my-modal-content {
  background-color: #fff;
  position: relative;
  height: auto;
  width: 600px;
  margin: 30px auto;
  padding: 10px;
  z-index: 1050;
}

.my-modal-header {
  text-align: center;
}

.my-modal-body,
.my-modal-footer {
  padding: 10px 0;
}

.my-modal-header,
.my-modal-body {
  border-bottom: 1px solid #d0d0d0;
}

.my-modal-footer {
  text-align: right;
}

.program-list-item {
  padding: 3px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
<body>
  <div class="container">
    <div id="app">
      <ol>
        <li v-for="program in programs" class="program-list-item">
          {{ program.title}}
          <button class="btn btn-primary btn-sm" @click="showDetails(program)">Details</button>
        </li>
      </ol>
      <my-modal :show="show" v-on:hide="show = false" v-bind:program="activeProgram"></my-modal>
      <!--  <div class="my-modal-overlay" v-show="show" @click="show = false"></div> -->
    </div>
  </div>
  <template id="tpl-my-modal">
    <div>
      <transition enter-active-class="animated zoomIn" leave-active-class="animated zoomOut">
        <div v-show="show" class="my-modal-box" key="modal">
          <div class="my-modal-content">
            <div class="my-modal-header">
              <h1>{{ program.title }}</h1></div>
            <div class="my-modal-body"> {{ program.intro }}</div>
            <div class="my-modal-footer">
              <button class="btn btn-danger" @click="$emit('hide')">Close</button>
            </div>
          </div>
        </div>         
      </transition>     
      <div v-show="show" class="my-modal-overlay" @click="show = false" key="overlay"></div>
    </div>
  </template>
</body>

这是你需要的吗？

Vue 2.0组件 - 无法在模板中呈现所有<div>

2 个答案: