vue实现类似chatgpt聊天对话效果代码-html代码-BFW代码库

vue实现类似chatgpt聊天对话效果代码

代码语言：html

代码描述：vue实现类似chatgpt聊天对话效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=0" />

    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue@2.6.1-dev.js"></script>
    <style>
        .chat-list {
      float: left;
      width: 30%;
      height: 500px;
      overflow-y: scroll;
    
    }
    
    .chat-list ul {
      list-style: none;
      margin: 0;
      padding: 0;
    }
    
    .chat-list li {
      padding: 10px;
      cursor: pointer;
      border-bottom: 1px solid #ccc;
    }
    
    .chat-list li.active {
      background-color: #eee;
    }
    
    .chat-window {
      float: left;
      width: 70%;
      height: 500px;
    }
    
    .chat-header {
      padding: 10px;
      background-color: #f0f0f0;
      font-weight: bold;
    }
    
    .chat-body {
      padding: 10px;
      height: 400px;
      overflow-y: scroll;
    }
    
    .chat-body ul {
      list-style: none;
      margin: 0;
      padding: 0;
    }
    
    .chat-body li {
      margin-bottom: 10px;
    }
    
    .message-sender {
      font-weight: bold;
    }
    
    .chat-input {
      padding: 10px;
      background-color: #f0f0f0;
    }
    
    .chat-input input {
      width: 80%;
      padding: 5px;
      margin-right: 10px;
    }
    
    .chat-input button {
      padding: 5px 10px;
      background-color: #4CAF50;
      color: white;
      border: none;
      cursor: pointer;
    }
    </style>
</head>

<body>
    <div id="app">
        <div class="chat-list">
            <ul>
                <li @click="newchat">添加</li>
                <li v-if="contacts.length>0" v-for="contact in reversedContacts" :class="{ active: currentContact!=null && contact.id === currentContact.id }" @click="setCurrentContact(contact)">
                    {{ contact.name }}
                     <button @click.stop="renameContact(contact)">Rename</button>
        <button @click.stop="deleteContact(contact)">Delete</button>
                </li>
            </ul>
        </div>
        <div class="chat-window" v-if="currentContact!=null">
            <div class="chat-header">{{ currentContact.name }}</div>
            <div class="chat-body" ref="chatBody">
                <ul>
                    <li v-for="message in currentContact.messages">
                        <span class="message-sender">{{ message.sender }}:</span>
                        <span class="message-text">{{ message.text }}</span>
                    </li>
                </ul>
            </div>
            <div class="chat-input">
                <input type="text" v-model="newMessage" @keyup.enter="sendMessage">
                <button @click="sendMessage">Send</button>
            </div>
        </div>
    </div>
    <script>
        var app = new Vue({
      el: '#app',
      dat.........完整代码请登录后点击上方下载按钮下载查看