【问题标题】:Vuetify styles being added after initial DOM load在初始 DOM 加载后添加 Vuetify 样式
【发布时间】:2021-06-28 11:11:07
【问题描述】:

我在"nuxt": "2.15.4""@nuxtjs/vuetify": "1.12.1""sass": "1.32.13" 上,并在我的默认布局中添加了一个导航栏组件,该组件使用v-navigation-drawer,并且在页面加载的第一刻有一个闪烁和所有东西(抽屉)溅到屏幕上,然后加载 css。 我已经阅读了nuxt-css-issue 这个并且有点理解这是因为 nuxt 和 vuetify 行为。那么有没有办法解决这个问题??加载应用的时候真的很丑!!

哦,顺便说一句,我使用 nuxt 通用 ssr 并且 vuetify treeShake 是真的

【问题讨论】:

    标签: vuejs2 nuxt.js vuetify.js


    【解决方案1】:

    因此,您要么等待 CSS 与 JS 一起出现(性能更好,但可能会有一些小的闪烁),要么在开始时全局加载所有 CSS,然后是 JS(在速度方面不太好,但没有闪烁)。我是否很好地理解了这个问题?

    不确定这个问题是否有真正的解决方案,除了可能显示隐藏组件,直到他加载了@hook:mounted 钩子和v-show,完成后显示组件。更多信息在这里:https://stackoverflow.com/a/67535239/8816585

    你在 Vuetify 的 github issues 上发现了什么吗?
    不确定是否有可用的东西,请随时发布新问题。


    PS:这里可能有一些恶作剧,在我们到达特定页面或某个钩子时预加载一些 CSS。不确定这如何可行,但了解 JS 生态系统,这种 hack 可能是可行的。

    【讨论】:

    • css 是 vuetify 包的,我没有手动添加任何东西,所以我不知道它是否是全局添加的;但是 vuetify 自己添加了全局。问题在于我的 topnav 添加到默认布局中,所以基本上它是加载的第一件事。由于主要问题是侧边菜单女巫通过 v-model 绑定到数据,我使用 v-if 根本不显示,直到侧边菜单的值为 true。关于 github,已经在 nuxt/vuetify 上发布了一个问题
    • 对不起,如果我不能提供更多帮助。是的,这也是一个问题,了解幕后发生的事情。非常适合 Github!
    • 实际上v-if 解决了我的问题。我通过用我的纯 html/css 代码替换 vuetify 组件来重构我的代码;但是现在如果这需要太多时间,我会用你的技巧来安装钩子和 v-show
    猜你喜欢
    • 1970-01-01
    • 2012-11-24
    • 1970-01-01
    • 1970-01-01
    • 2016-06-27
    • 1970-01-01
    • 1970-01-01
    • 2019-06-04
    • 2022-10-04
    相关资源
    最近更新 更多