[英]Vue.js Loading and hiding async component
I am making a chatbot in vue.js and I need your help.我正在 vue.js 中制作一个聊天机器人,我需要你的帮助。 I created 2 Vue components:我创建了 2 个 Vue 组件:
ChatLoader.vue - first components that render a button to open actual webchat window ChatLoader.vue - 渲染按钮以打开实际网络聊天的第一个组件 window
Webchat.vue - the async component that only loads when I Webchat.vue - 只有当我加载的异步组件
Click on a button to open the chat window.单击按钮打开聊天 window。
So what my ChatLoader.vue is doing is setting parameter chatInitialized = true on button click.所以我的ChatLoader.vue正在做的是在按钮单击时设置参数chatInitialized = true 。 Then the chat window is opened.然后打开聊天 window。
In my Webchat.vue I have a close button which on click only hides the chat window (not removed from DOM) by setting showWindow = false;在我的Webchat.vue 中,我有一个关闭按钮,单击该按钮仅通过设置showWindow = false; 隐藏聊天 window(未从 DOM 中删除);
Now when the chat window is hidden I again see the button to open the chat (which was there all the time only not visible because overlapped by chatwindow) but when I click on the button now I want to set showWindow = true in Webchat.vue component instead of the previous behavior, so the webchat window is shown again.现在,当聊天 window 被隐藏时,我再次看到打开聊天的按钮(它一直存在,只是因为被聊天窗口重叠而不可见)但是当我现在单击按钮时,我想在 Webchat.vue 中设置 showWindow = true组件而不是以前的行为,因此再次显示网络聊天 window。
ChatLoading.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:网络聊天.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>
How can I accomplish that?我怎样才能做到这一点? Thank you谢谢
If you want to toggle the child component's ( <Webchat>
) state showWindow
from a consuming parent component, then you will have to create a method in the child component that can be invoked by the parent element.如果您想从消费父组件切换子组件的 ( <Webchat>
) state showWindow
,那么您必须在子组件中创建一个可由父元素调用的方法。
First of all, in your Webchat
component, create a new method, say maximize
, that will change this.showWindow
to true
:首先,在您的Webchat
组件中,创建一个新方法,比如this.showWindow
maximize
为true
:
methods: {
minimize() {
this.showWindow = false;
},
maximize() {
this.showWindow = true;
}
},
Then, in your parent component, you can then:然后,在您的父组件中,您可以:
Webchat
component创建对您的Webchat
组件的引用this.$ref
to access the component and its inner methods, and call the maximize()
method you've just created:使用this.$ref
访问组件及其内部方法,并调用您刚刚创建的maximize()
方法:Example:例子:
<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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.