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

Nuxt版本：2.11.0

你好

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

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

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

但是，由于

标记中不能使用

v-bind:prop=“”

，因此未解决此问题

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

我们如何解决这个问题？

我解决了这个问题

首先，我们在

numxt.config.js

中设置以下配置

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

load.vue

相当于使用以下链接的自定义加载组件

部分中的代码


接下来，我在
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()
        }
    }
}

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

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


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

对不起


更多信息
执行'this.$numxt.$loading.start（）'时，应稍微延迟下一行，以便在启动逻辑之前正确显示加载组件

（示例）
插件/delay.js
nuxt.config.js
pages/Page.vue
import Vue from "vue";

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

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

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

    await this.$delay(50)

    // Code...

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