リロードページがvueコンポーネントのスロットの内容を点滅しています

Question

modalのコンポーネントで、slotというHTMLを受け取るコンポーネントですが、ページを更新すると点滅します。私のアプリはルータを使用していないので、完全なSPAではありません。

gifを参照してください。ここで

コードです。

.body { 
 
\t \t \t padding: 2em; 
 
\t \t \t text-align: center; 
 
\t \t \t display: table-cell; 
 
\t \t \t vertical-align: middle; 
 
\t \t } 
 

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

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

 
\t \t .modal-container { 
 
\t \t width: 70%; 
 
\t \t margin: 1em auto; 
 
\t \t padding: 20px 30px; 
 
\t \t background-color: #fff; 
 
\t \t border-radius: 2px; 
 
\t \t box-shadow: 0 2px 8px rgba(0, 0, 0, .33); 
 
\t \t transition: all .3s ease; 
 
\t \t font-family: Helvetica, Arial, sans-serif; 
 
\t \t } 
 

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

 
\t \t .modal-body { 
 
\t \t margin: 20px 0; 
 
\t \t } 
 

 
\t \t .modal-default-button { 
 
\t \t float: right; 
 
\t \t } 
 

 

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

 
\t \t .modal-enter { 
 
\t \t opacity: 0; 
 
\t \t } 
 

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

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

<!-- template for the modal component --> 
 
<script type="text/x-template" id="modal-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> 
 
      <button class="modal-default-button" @click="$emit('close')">Close</button> 
 
      </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> 
 
</script> 
 

 
<!-- app --> 
 
<div id="app"> 
 
    <button id="show-modal" @click="showModal = true">Show Modal</button> 
 
    <!-- use the modal component, pass in the prop --> 
 
    <modal v-if="showModal" @close="showModal = false"> 
 
    <!-- 
 
     you can use custom content here to overwrite 
 
     default content 
 
    --> 
 
    <div slot="body"> 
 
     <div class="modal-body"> 
 
     <h4>Text in a modal</h4> 
 
     <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p> 
 
     <h4>Popover in a modal</h4> 
 
     <p>This <a href="#" class="btn btn-default popover-test" role="button" title="" data-content="And here's some amazing content. It's very engaging. right?" data-original-title="A Title">button</a> should trigger a popover on click.</p> 
 
     <h4>Tooltips in a modal</h4> 
 
     <p><a href="#" class="tooltip-test" title="" data-original-title="Tooltip">This link</a> and <a href="#" class="tooltip-test" title="" data-original-title="Tooltip">that link</a> should have tooltips on hover.</p> 
 
     <hr> 
 
     <h4>Overflowing text to show scroll behavior</h4> 
 
     <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p> 
 
     <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p> 
 
     <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p> 
 
     <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p> 
 
     <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p> 
 
     <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p> 
 
     <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p> 
 
     <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p> 
 
     <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p> 
 
     </div> 
 
    </div> 
 
    <h3 slot="header">custom header</h3> 
 
    </modal> 
 
</div> 
 

 
<script src="https://unpkg.com/vue@latest/dist/vue.js"></script> 
 

 
<script> 
 
\t // register modal component 
 
\t Vue.component('modal', { 
 
\t template: '#modal-template' 
 
\t }) 
 

 
\t // start app 
 
\t new Vue({ 
 
\t el: '#app', 
 
\t data: { 
 
\t  showModal: false 
 
\t } 
 
\t }) 
 
</script>

Answer 1

ほとんどの通常これはあなたのvue.jsが、あなたがやりたいことができるようになるまでロードするために必要とする事実によるものです。

基本的に表示されるhtmlコンテンツを基本的に読み込みます。

htmlの後にvueを読み込むと、v-ifまたはv-showステートメントのためにvueによってコンテンツが非表示になります。このようなことを保証する最も簡単な方法は、v-cloakディレクティブとcssの少しの使用です。

この例で与えられるように、非常に高いレベルで行われ、それを

<div id="app"><!-- vue mounted at this div --> 
    <div v-cloak> 

     <!-- your actual code/content --> 

    </div> 
</div> 

およびCSS

[v-cloak] { display: none; } 

V-マント性とすぐVUEをローディングして行われるように除去されます。したがって、読み込みが完了するまではすべてが隠されています。これにより、コンテンツが点滅しないようにする必要があります。