Я хочу, чтобы полупрозрачный фон экспонировался как компонент во всем виде в Nuxt. js - PullRequest
Новая
       31

Я хочу, чтобы полупрозрачный фон экспонировался как компонент во всем виде в Nuxt. js

0 голосов
/ 22 января 2020

Nuxt Версия: 2.11.0

Hello.

Я создал загружающий компонент, который отображает полупрозрачный фон и загружает анимацию при загрузке.

Просто загрузите этот компонент на страницы, поэтому фоновое изображение не покрывает области верхнего и нижнего колонтитула, а только область страницы.

Чтобы решить эту проблему в файле макета, я создал устройство в макете для управления загрузочными компонентами.

Однако эта проблема не решена, поскольку v-bind: prop = "" нельзя использовать в теге <nuxt />.

В заключение я хочу отобразить полупрозрачный фон загружаемого компонента на всем протяжении view.

Как мы можем решить эту проблему?

1 Ответ

0 голосов
/ 22 января 2020

Я решил эту проблему.

Сначала мы установили следующую конфигурацию в 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()
        }
    }
}

Когда я запускаю код выше, я вижу, что загрузка выглядит так, как я хочу.

this.$nextTick ссылается на следующую ссылку:

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

Я опубликовал странный вопрос, потому что редко использовал vue. js и nuxt. js.

Извините.

Дополнительная информация

Когда выполняется 'this. $ Nuxt. $ Loading.start ()', вы должны задать небольшую задержку для следующей строки, чтобы загружающий компонент отображался правильно перед запуском Logi c.

Пример)

плагинов / задержка. 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' ]
}

страницы / стр. vue

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

    await this.$delay(50)

    // Code...

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