Question

使用Vuetify时，我无法阻止初始内容闪现问题。我之前使用通常的v-cloak解决方案在没有任何UI库的情况下使用Vue实现了这一点，但无论出于何种原因，这都不适用于Vuetify，我仍然在JS加载完成之前获得了无格式内容的闪存。

我的初始index.html包含此内容（甚至尝试了内联display: none）：

<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。我应该如何解决这个错误，以便用户在加载时不会获得初始闪存？

Answer 1

这有点晚了，但问题似乎是页面在应用所有样式之前开始渲染。要解决此问题，您只需mount您的视图实例onload：

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

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

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

Vuetify无视v-cloak

1 个答案: