vue实现的微信机器人聊天功能案例【附源码下载】

时间：2021-05-26

本文实例讲述了vue实现的微信机器人聊天功能。分享给大家供大家参考，具体如下：

先看效果:

实现过程:

<!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: 360px; 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; } 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"> <span style="float: left;">微信聊天界面</span> <span style="float: right;">14:21</span> </div> <ul class="content"> <li v-for="(item, index) in messageList" > <img :src="'./img/'+(item.isSelf?'r.png':'l.png')" :class="'img'+(item.isSelf?'right':'left')"> <span :class="'span'+(item.isSelf?'right':'left')">{{item.message}}</span> </li> </ul> <div class="footer"> <!-- 添加输入内容 --> <input id="text" type="text" placeholder="说点什么吧..." v-model="inputValue" @keyup.enter="chat"> <!-- 给发送也绑定一个事件 --> <span id="btn" @click="chat">发送</span> </div> </div> <!-- 导入vue --> <script src="./lib/vue.js"></script> <!-- 导入jQuery --> <script src="./lib/jquery-1.12.4.min.js"></script> <!-- 开始代码 --> <script> //一: let app = new Vue({ el: "#container", data: { //输入内容,双向数据绑定 inputValue: '', //聊天窗口内容 messageList: [] }, methods: { chat() { // console.log(this.inputValue); // console.log(this); // 二.获取自己输入内容,将内容渲染到页面 this.messageList.push({ message: this.inputValue, isSelf: true }) // 三.获取机器人接口内容,也将内容渲染到页面 $.ajax({ url:'http:///huanggengzhong/jiqiren

还可以点击此处本站下载。

希望本文所述对大家vue.js程序设计有所帮助。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章