【发布时间】：2020-04-04 11:41:47
【问题描述】：
所以我是 Vue JS 的新手。我正在创建这个页面，其中有一个按钮，单击它会弹出一个聊天模块。这是我当前的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Query Management</title>
<style>
.headline {
text-align: center;
font-weight: 100;
color: white;
}
.chat-area {
/* border: 1px solid #ccc; */
background: white;
height: 50vh;
padding: 1em;
overflow: auto;
max-width: 350px;
margin: 0 auto 2em auto;
}
.message {
width: 45%;
border-radius: 10px;
padding: .5em;
/* margin-bottom: .5em; */
font-size: .8em;
}
.message-out {
background: #407FFF;
color: white;
margin-left: 50%;
}
.message-in {
background: #F1F0F0;
color: black;
}
.chat-inputs {
display: flex;
justify-content: space-between;
}
#person1-input {
padding: .5em;
}
#person2-input {
padding: .5em;
}
#app {
font-family: Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
.btn {
padding: 8px 16px;
border-radius: 3px;
font-size: 14px;
cursor: pointer;
}
.modal-backdrop {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.3);
display: flex;
justify-content: center;
align-items: center;
}
.modal {
background: #ffffff;
box-shadow: 2px 2px 20px 1px;
overflow-x: auto;
display: flex;
flex-direction: column;
}
.modal-header,
.modal-footer {
padding: 15px;
display: flex;
}
.modal-header {
border-bottom: 1px solid #eeeeee;
color: #415982;
justify-content: space-between;
}
.modal-footer {
border-top: 1px solid #eeeeee;
justify-content: flex-end;
}
.modal-body {
position: relative;
padding: 20px 10px;
}
.btn-close {
border: none;
font-size: 20px;
padding: 20px;
cursor: pointer;
font-weight: bold;
color: #415982;
background: transparent;
}
.btn {
color: white;
background: #415982;
border: 1px solid #415982;
border-radius: 30px;
}
.modal-fade-enter,
.modal-fade-leave-active {
opacity: 0;
}
.modal-fade-enter-active,
.modal-fade-leave-active {
transition: opacity 0.5s ease;
}
</style>
<script>
window.console = window.console || function(t) {};
</script>
<script>
if (document.location.search.match(/type=embed/gi)) {
window.parent.postMessage("resize", "*");
}
</script>
</head>
<body translate="no">
<div id="app">
<button type="button" class="btn" @click="showModal">
?
</button>
<modal v-show="isModalVisible" @close="closeModal" />
</div>
<script type="text/x-template" id="modal">
<transition name="modal-fade">
<div class="modal-backdrop" role="dialog">
<div class="modal" ref="modal">
<header class="modal-header">
<slot name="header">
<h2>
We're thinking of a good title for this box
</h2>
<button type="button" class="btn-close btn-right" @click="close" aria-label="Close modal">
x
</button>
</slot>
</header>
<section class="modal-body">
<slot name="body">
<section ref="chatArea" class="chat-area">
<p v-for="message in $parent.messages" class="message" :class="{ 'message-out': message.author === 'you', 'message-in': message.author !== 'support' }">
{{ message.body }}
</p>
</section>
</slot>
</section>
<footer class="modal-footer">
<slot name="footer">
<button type="button" class="btn btn-green" @click="close" aria-label="Close modal">
Close Chat
</button>
</slot>
</footer>
</div>
</div>
</transition>
</script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.min.js'></script>
<script id="rendered-js">
const Modal = {
name: 'modal',
template: '#modal',
methods: {
close(event) {
this.$emit('close');
} } };
new Vue({
el: '#app',
name: 'app',
components: {
modal: Modal
},
data() {
messages: [
{
body: 'Welcome to the chat, I\'m Bob!',
author: 'bob'
},
{
body: 'Thank you Bob',
author: 'you'
},
{
body: 'You\'re most welcome',
author: 'bob'
}
]
return {
isModalVisible: false
};
},
methods: {
sendMessage(direction) {
if (!this.youMessage && !this.bobMessage) {
return;
}
if (direction === 'out') {
this.messages.push({ body: this.youMessage, author: 'you' });
this.youMessage = '';
} else if (direction === 'in') {
this.messages.push({ body: this.bobMessage, author: 'support' });
this.bobMessage = '';
} else {
alert('There was an error processing the chat... Please try again later!');
}
Vue.nextTick(() => {
let messageDisplay = this.$refs.chatArea;
messageDisplay.scrollTop = messageDisplay.scrollHeight;
});
},
showModal() {
this.isModalVisible = true;
},
closeModal() {
this.isModalVisible = false;
} }
});
</script>
</body>
</html>
这段代码的问题是，当点击按钮时，弹出的框只是一个空框。我无法让聊天出现在框内。有什么想法我哪里出错了吗？
【问题讨论】：
标签： html css vue.js popup vuetify.js