vue.js – Vue 2.0 Component – 无法在模板中渲染所有s

2023年12月11日 337次阅读

在学习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'
})

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

《vue.js – Vue 2.0 Component – 无法在模板中渲染所有s》

《vue.js – Vue 2.0 Component – 无法在模板中渲染所有s》

谁能解释一下这个问题？谢谢！

更新：

来自snippets.欢迎在HTML中评论/评论第11行/第26行以查看差异.

更新：

事实证明,Vue组件可以具有不超过一个根元素,并且< transition> tag只能有一个元素,这意味着我之前做的错误.

因此我调整了一些代码,现在在控制台中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.问题是什么？

最佳答案 对于转换问题,您应该将过渡标记放在模板的根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..

因为当你将它用于组件my-modal时,v-show将应用于根div

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