时间戳

首页 > 解决方案 > 我想在 Nuxt.js 的整个视图中显示一个半透明背景作为组件公开

javascript - 我想在 Nuxt.js 的整个视图中显示一个半透明背景作为组件公开

问题描述

Nuxt 版本：2.11.0

你好。

我创建了一个加载组件，它在加载时显示半透明背景和加载动画。

只需在页面上加载这个组件，这样背景图像就不会覆盖页眉和页脚区域，只覆盖页面区域。

为了解决布局文件中的这个问题，我在布局中创建了一个设备来控制加载组件。

但是，此问题未得到解决，因为v-bind: prop = ""无法在<nuxt />标签中使用。

总之，我想在整个视图中显示加载组件的半透明背景。

我们如何解决这个问题？

标签： javascriptvue.jsnuxt.js

解决方案

我解决了这个问题。

首先，我们在nuxt.config.js.

export default {
    loading: '~/components/Loading.vue',
}

Loading.vue等效于Using a Custom Loading Component以下链接部分中的代码。

https://nuxtjs.org/api/configuration-loading/#using-a-custom-loading-component

接下来，我在pages/Page.vue.

export default {
    mounted() {
        // this.$nextTick: Wait for the DOM to be updated.
        this.$nextTick(() => {
            this.$nuxt.$loading.start()

            setTimeout(() => this.$nuxt.$loading.finish(), 3000)
        })
    },
    methods: {
        // It is executed when the button which calls this function is pressed.
        whenClicked() {
            this.$nuxt.$loading.start()

            // Code...

            this.$nuxt.$loading.finish()
        }
    }
}

当我运行上面的代码时，我可以看到 Loading 看起来像我想要的那样。

this.$nextTick引用了以下链接：

https://vuejs.org/v2/api/index.html?#vm-nextTick

我发布了一个奇怪的问题，因为我很少使用 vue.js 和 nuxt.js。

对不起。

更多信息

当执行'this.$nuxt.$loading.start()'时，你应该稍微延迟下一行，以便在启动Logic之前正确显示加载组件。

例子）

插件/delay.js

import Vue from "vue";

Vue.prototype.$delay = (ms) => new Promise(resolve => setTimeout(resolve, ms))

nuxt.config.js

export default {
    plugins: [ '~/plugins/v-scroll-lock', '~/plugins/delay' ]
}

页面/Page.vue

async whenClicked() {
    this.$nuxt.$loading.start()

    await this.$delay(50)

    // Code...

    this.$nuxt.$loading.finish()
}

推荐阅读