Vue.js Загрузка и скрытие асинхронного компонента - PullRequest
Новая
       8

Vue.js Загрузка и скрытие асинхронного компонента

0 голосов
/ 07 октября 2019

Я создаю чат-бота в vue.js, и мне нужна ваша помощь. Я создал 2 компонента Vue:

  • ChatLoader.vue - первые компоненты, отображающие кнопку для открытия фактического окна веб-чата

  • Webchat.vue - асинхронный компонент, который загружается только тогда, когда я
    Нажмите на кнопку, чтобы открыть окно чата.

Так что мой ChatLoader.vue выполняет настройку параметра chatInitialized = true при нажатии кнопки. Тогда окно чата открывается.

В моем Webchat.vue У меня есть кнопка закрытия, которая при щелчке скрывает только окно чата (не удаляется из DOM), устанавливая showWindow = false;

Теперь, когда окно чата скрыто, я снова вижу кнопку, чтобы открыть чат (который был там все время, только невидимым, потому что перекрывается chatwindow), но когда я нажимаю на кнопку сейчас, я хочу установить showWindow = trueв компоненте Webchat.vue вместо предыдущего поведения, поэтому окно веб-чата отображается снова.

ChatLoading.vue: 

    <template>
    <div>
        <span class="open-chat" v-on:click="showChat">
            <i class="icon ficon-live-chat"></i>
            Virtual assistant
        </span>
        <Webchat v-if="chatInitialized"></Webchat>
    </div>
</template>

<script>
    import ChatLoading from "./ChatLoading.vue";

    const Webchat = () => ({
        component: import('./Webchat.vue'),
        loading: ChatLoading
    });

    export default {
        data() {
            return {
                chatInitialized: false
            }
        },
        components: {
            Webchat
        },
        methods: {
            showChat() {
                this.chatInitialized = true;
            }
        }
    }
</script>

Webchat.vue: 

<template>
    <div class="chat-window" v-show="showWindow">
        <button type="button" class="cancel icon ficon-close" v-on:click="minimize"></button>
        <WebchatPlugin
        >
        </<WebchatPlugin>
    </div>
</template>

<script>
    import <WebchatPlugin{
        createDirectLine,
        createStore
    } from "botframework-webchat/lib/index";
    import {DirectLine} from "botframework-directlinejs";

    export default {
        data() {
            return {
                showWindow : true
            }
        },
        components: <WebchatPlugin
        methods: {
            minimize() {
                this.showWindow = false
            }
        },
</script>

Как я могу это сделать? Спасибо

1 Ответ

1 голос
/ 07 октября 2019

Если вы хотите переключить состояние дочернего компонента (<Webchat>) showWindow из родительского компонента-потребителя, вам придется создать метод в дочернем компоненте, который может вызываться родительским элементом.

Прежде всего, в вашем Webchat компоненте создайте новый метод, скажем maximize, который изменит this.showWindow на true: 

methods: {
    minimize() {
        this.showWindow = false;
    },
    maximize() {
        this.showWindow = true;
    }
},

Затем взатем вы можете:

  1. Создать ссылку на ваш Webchat компонент
  2. . Использовать this.$ref для доступа к компоненту и его внутренним методам и вызвать * 1020. * метод, который вы только что создали:

Пример: 

<template>
    <div>
        <span class="open-chat" v-on:click="showChat">
            <i class="icon ficon-live-chat"></i>
            Virtual assistant
        </span>

        <!-- Use `ref` attribute to create a reference to component -->
        <Webchat ref="webchat" v-if="chatInitialized"></Webchat>
    </div>
</template>

<script>
    import ChatLoading from "./ChatLoading.vue";

    const Webchat = () => ({
        component: import('./Webchat.vue'),
        loading: ChatLoading
    });

    export default {
        data() {
            return {
                chatInitialized: false
            }
        },
        components: {
            Webchat
        },
        methods: {
            showChat() {
                this.chatInitialized = true;

                // Access Webchat component's inner method
                // Do this inside `this.$nextTick` to ensure it is accessible
                this.$nextTick(() => {
                    this.$refs.webchat.maximize();
                });
            }
        }
    }
</script>
...