Vuetify Ignorieren von v-cover

Ich kann das anfängliche Flash-Problem bei der Verwendung von Vuetify nicht verhindern. Ich habe das bisher mit der üblichen v-cloak Lösung erreicht, wenn ich Vue ohne UI-Bibliotheken verwende, aber aus welchen Gründen auch immer funktioniert das nicht mit Vuetify und ich bekomme immer noch den Flash von unsterilisiertem Inhalt, bevor das JS fertig geladen ist.Vuetify Ignorieren von v-cover

Ich habe die anfänglichen index.html mit diesem in ihm (auch Inline-display: none versucht):

<head> 
    <style> 
     [v-cloak] { 
      display: none; 
     } 
    </style> 
</head> 
<body> 
<div id="app" v-cloak style="display: none;"></div> 
    ... 
</body>

Und dann in dem Anfang app.vue Datei:

<template> 
    <div id="app" v-cloak> 
     <v-app v-cloak> 
     ... 
<style> 
    [v-cloak] { 
     display: none; 
    }

Aus irgendeinem Grunde sowohl die Inline-display: none und die multiple v-cloak 's werden überschrieben ich gehe von Vuetify aus. Wie kann ich diesen Fehler umgehen, damit der Benutzer beim Laden nicht den ersten Flash erhält?

Quelle

2017-12-28 user9993

Die Inline-Sache ist sehr seltsam, weil Vue/Vuetify nur überschrieben werden könnte, sobald die App tatsächlich die DOM-Steuerung und erbracht - an welcher Stelle es könnte Sei kein FOUG mehr, weil die App ja schon gerendert hat. –

Versuchen Sie, v-cover = "true" anstatt nur v-cloat anzuwenden –

Wenn Sie es auf "true" setzen, wird es nicht repariert. Ich muss nur hoffen, dass der Benutzer nichts gegen den Blitz will. – user9993

Dies ist ein wenig spät, aber das Problem scheint zu sein, dass die Seite beginnt zu rendern, bevor alle Stile angewendet wurden. Um dies zu lösen, können Sie einfach mount Ihre Ansicht Instanz onload:

import App from './components/App.vue' 

const vm = new Vue({ 
    render: h => h(App) 
}) 

window.onload = function() { 
    vm.$mount('#app'); 
}

Quelle

2018-01-10 14:20:01

Vuetify Ignorieren von v-cover

Antwort

Verwandte Themen