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)">Dele.........完整代码请登录后点击上方下载按钮下载查看