https://blog.csdn.net/weixin_43797795/article/details/85799211 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HTML5模拟微信聊天界面</title> <style> /**重置标签默认样式*/ * { margin: 0; padding: 0; list-style: none; font-family: '微软雅黑' } #container { width: 450px; height: 780px; background: #eee; margin: 80px auto 0; position: relative; box-shadow: 20px 20px 55px #777; } .header { background: #000; height: 40px; color: #fff; line-height: 34px; font-size: 20px; padding: 0 10px; } .footer { width: 430px; height: 50px; background: #666; position: absolute; bottom: 0; padding: 10px; } .footer input { width: 275px; height: 45px; outline: none; font-size: 20px; text-indent: 10px; position: absolute; border-radius: 6px; right: 80px; } .footer span { display: inline-block; width: 62px; height: 48px; background: #ccc; font-weight: 900; line-height: 45px; cursor: pointer; text-align: center; position: absolute; right: 10px; border-radius: 6px; } .footer span:hover { color: #fff; background: #999; } #user_face_icon { display: inline-block; background: red; width: 60px; height: 60px; border-radius: 30px; position: absolute; bottom: 6px; left: 14px; cursor: pointer; overflow: hidden; } img { width: 60px; height: 60px; } .content { font-size: 20px; width: 435px; height: 662px; overflow: auto; padding: 5px; } .content li { margin-top: 10px; padding-left: 10px; width: 412px; display: block; clear: both; overflow: hidden; } .content li img { float: left; } .content li span{ background: #7cfc00; padding: 10px; border-radius: 10px; float: left; margin: 6px 10px 0 10px; max-width: 310px; border: 1px solid #ccc; box-shadow: 0 0 3px #ccc; } .content li img.imgleft { float: left; } .content li img.imgright { float: right; } .content li span.spanleft { float: left; background: #fff; } .content li span.spanright { float: right; background: #7cfc00; } </style> </head> <body> <div id="container"> <div class="header"> </div> <ul class="content"> <li v-for="(item, index) in messageList"> <img :src="(item.myself?'http://img.momen.vip/xsfm.jpg':'http://xs.momen.vip/img/bookcover/%E6%88%91%E7%9A%84%E7%89%B9%E7%A7%8D%E7%94%9F%E6%B6%AF.jpg')" :class="'img'+(item.myself?'right':'left')"> <span :class="'span'+(item.myself?'right':'left')">{{item.message}}</span> </li> <!-- <li><img src="./img/l.png" class="imgleft"><span class="spanleft">好诗好诗</span></li> --> </ul> <div class="footer"> <div id="user_face_icon"> <img src="http://img.momen.vip/xsfm.jpg" alt=""> </div> <input id="text" type="text" v-model.trim="inputValue" @keyup.enter='chat' placeholder="说点什么吧..."> <span id="btn" @click="chat">发送</span> </div> </div> </body> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <!-- <script src="./jquery-1.12.4.js"></script> --> <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <script> let app = new Vue({ el: '#container', data: { //输入的内容,事先约定好的 inputValue: '', //聊天的数组内容 messageList: [] }, methods: { //点击回车时候发送信息 chat() { this.messageList.push({ message: this.inputValue, //这个是判断当前是否是自己输入的内容,自己的是true,机器人的是false myself: true }) // console.log(1); // console.log(message) // console.log(this.inputValue); //每次发送信息之后机器人就要回复,所以添加完之后直接调用机器人的接口 $.ajax({ url: 'http://www.tuling123.com/openapi/api', type: 'post', data: { key: 'rc0818b948e24414a6c19d79ef58922c', info: this.inputValue }, success: (data) => { // console.log(data); this.messageList.push({ message: data.text, myself: false }) } }) } }, }) </script> </html> 提示：你可以先修改部分代码再运行。 转载请注明：有爱前端 » Vue结合图灵机器人制作的一个简单的仿微信聊天的自动回复机器人 喜欢 (114)or分享 (0)
