V- 망토를 무시하는 Vuetify

Vuetify를 사용할 때 초기 플래시 콘텐츠 문제를 방지 할 수 없습니다. 이전에 UI 라이브러리없이 Vue를 사용할 때 일반적인 v-cloak 솔루션을 사용했지만, Vuetify에서 작동하지 않는 이유가 무엇이든간에 JS로드가 완료되기 전에 아직 스타일없는 컨텐츠의 플래시를 얻고 있습니다.V- 망토를 무시하는 Vuetify

나는 (심지어 인라인 display: none 시도) 그것은이와 초기 index.html 있습니다

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

그리고 초기 app.vue 파일 :

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

어떤 이유로 인라인 display: none 모두 들어 및 복수형 v-cloak이 무시되고 있습니다. 저는 Vuetify가 가정합니다. 로드하는 동안 사용자가 초기 플래시를 가져 오지 않도록이 버그를 해결하려면 어떻게해야합니까?

출처

2017-12-28 user9993

앱이 실제로 DOM을 제어하고 렌더링되면 뷰가/Vuetify 만 덮어 쓸 수 있기 때문에 인라인 것은 매우 이상해 -하는이 있었던 포인트 음, 앱이 이미 렌더링 되었기 때문에 더 이상 FOUG하지 마세요. –

그냥 v-cloak 대신 v-cloak = "true"를 적용하십시오. –

true로 설정하지 않아도 문제가 해결되지 않습니다. 사용자가 플래시를 신경 쓰지 않기를 바랄뿐입니다. – user9993

다소 늦었지만 모든 스타일이 적용되기 전에 렌더링이 시작되는 것 같습니다. 이 문제를 해결하려면, 당신이 할 수 단순히 mount보기 인스턴스 onload :

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

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

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

출처

2018-01-10 14:20:01

답변

관련 문제