vuejs實現聊天介面的方法:1、通過執行「npm install」安裝dependencies;2、通過「scrollLoader.vue」實現捲動載入資料;3、修改main.js;4、設定App.vue中的引數即可。
本文操作環境:Windows7系統、vue2.9.6版,DELL G3電腦。
vuejs怎麼實現聊天介面?
Vue.js仿微信聊天視窗展示元件功能
原始碼:https://github.com/doterlin/vue-wxChat
演示地址:https://doterlin.github.io/vue-wxChat/
執行
# install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run build
介紹
function toEmotion(text, isNoGif){ var list = ['微笑', '撇嘴', '色', '發呆', '得意', '流淚', '害羞', '閉嘴', '睡', '大哭', '尷尬', '發怒', '調皮', '呲牙', '驚訝', '難過', '酷', '冷汗', '抓狂', '吐', '偷笑', '愉快', '白眼', '傲慢', '飢餓', '困', '驚恐', '流汗', '憨笑', '大兵', '奮鬥', '咒罵', '疑問', '噓', '暈', '折磨', '衰', '骷髏', '敲打', '再見', '擦汗', '摳鼻', '鼓掌', '糗大了', '壞笑', '左哼哼', '右哼哼', '哈欠', '鄙視', '委屈', '快哭了', '陰險', '親親', '嚇', '可憐', '菜刀', '西瓜', '啤酒', '籃球', '乒乓', '咖啡', '飯', '豬頭', '玫瑰', '凋謝', '示愛', '愛心', '心碎', '蛋糕', '閃電', '炸彈', '刀', '足球', '瓢蟲', '便便', '月亮', '太陽', '禮物', '擁抱', '強', '弱', '握手', '勝利', '抱拳', '勾引', '拳頭', '差勁', '愛你', 'NO', 'OK', '愛情', '飛吻', '跳跳', '發抖', '慪火', '轉圈', '磕頭', '回頭', '跳繩', '揮手', '激動', '街舞', '獻吻', '左太極', '右太極', '嘿哈', '捂臉', '奸笑', '機智', '皺眉', '耶', '紅包', '雞']; if (!text) { return text; } text = text.replace(/\[[\u4E00-\u9FA5]{1,3}\]/gi, function(word){ var newWord = word.replace(/\[|\]/gi,''); var index = list.indexOf(newWord); var backgroundPositionX = -index * 24 var imgHTML = ''; if(index<0){ return word; } if (isNoGif) { if(index>104){ return word; } imgHTML = `<i class="static-emotion" style="background:url(https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/default218877.gif) ${backgroundPositionX}px 0;"></i>` } else { var path = index>104 ? '/img' : 'https://res.wx.qq.com/mpres/htmledition/images/icon'; imgHTML = `![](${path}/emotion/${index}.gif)` } return imgHTML; }); return text; } Vue.directive('emotion', { bind: function (el, binding) { el.innerHTML = toEmotion(binding.value) } });
如何使用?
引數已經在元件中做了說明,並在App.vue
中做了演示:
引數和說明:
微信聊天視覺化元件
依賴scrollLoader元件, 依賴指令v-emotion(實現請檢視main.js)
引數:
width 元件寬度,預設450
wrapBg 外層父元素背景顏色,預設#efefef
maxHeight 展示視窗最高高度, 預設900
contactAvatarUrl 好友頭像url
ownerAvatarUrl 微信主人頭像url
ownerNickname 微信主人暱稱
getUpperData (必需)當捲動到上方時載入資料的方法,返回值要為Promise物件,resolve的結構同data
getUnderData (必需)當捲動到下方時載入資料的方法,返回值同上
data (必需)傳入初始化資料, 結構如下:
[{ direction: 2, //為2表示微信主人發出的訊息,1表示聯絡人 id: 1, //根據這個來排序訊息 type: 1, //1為文字,2為圖片 content: '你好!![呲牙]', //當type為1時這裡是文字訊息,當type2為2時這裡要存放圖片地址;後續會支援語音的顯示 ctime: new Date().toLocaleString() //顯示當前訊息的傳送時間 }, { direction: 1, id: 2, type: 1, content: '你也好。[害羞]', ctime: new Date().toLocaleString() }]
完整的使用範例
效果:https://doterlin.github.io/vue-wxChat/
程式碼:
//主檔案,對wxChat的用法做範例 <template> <wxChat :data="wxChatData" :showShade="false" contactNickname="簡叔" :getUpperData="getUpperData" :getUnderData="getUnderData" :ownerAvatarUrl="ownerAvatarUrl" :contactAvatarUrl="contactAvatarUrl" :width="420"> </wxChat> </template> <script> import wxChat from './components/wxChat.vue' export default { name: 'app', data () { return { upperTimes: 0, underTimes: 0, upperId: 0, underId: 6, ownerAvatarUrl: './src/assets/avatar1.png', contactAvatarUrl: './src/assets/avatar2.png', wxChatData: [{ direction: 2, id: 1, type: 1, content: '你好!![呲牙]', ctime: new Date().toLocaleString() }, { direction: 1, id: 2, type: 1, content: '你也好。[害羞]', ctime: new Date().toLocaleString() }, { direction: 2, id: 3, type: 1, content: '這是我的簡歷頭像:', ctime: new Date().toLocaleString() }, { direction: 2, id: 4, type: 2, content: './src/assets/wyz.jpg', ctime: new Date().toLocaleString() }, { direction: 1, id: 5, type: 1, content: '你開心就好。[微笑]', ctime: new Date().toLocaleString() }] } }, components:{wxChat}, methods:{ //向上捲動載入資料 getUpperData(){ var me = this; // 這裡為模擬非同步載入資料 // 實際上你可能要這麼寫: // return axios.get('xxx').then(function(result){ // return result; //result的格式需要類似下面resolve裡面的陣列 // }) return new Promise(function(resolve){ setTimeout(function(){ //模擬載入完畢 if(me.upperTimes>3){ return resolve([]); } //載入資料 resolve([{ direction: 2, id: me.upperId-1, type: 1, content: '向上捲動載入第 ' + me.upperTimes +' 條!', ctime: new Date().toLocaleString() }, { direction: 1, id: me.upperId-2, type: 1, content: '向上捲動載入第 ' + me.upperTimes +' 條!', ctime: new Date().toLocaleString() }] ) }, 1000); me.upperId= me.upperId+2; me.upperTimes++; }) }, getUnderData(){ var me = this; //意義同getUpperData() return new Promise(function(resolve){ setTimeout(function(){ //模擬載入完畢 if(me.underTimes>3){ return resolve([]); } //載入資料 resolve( [{ direction: 1, id: me.underId+1, type: 1, content: '向下捲動載入第 ' + me.underTimes +' 條!', ctime: new Date().toLocaleString() }, { direction: 2, id: me.underId+2, type: 1, content: '向下捲動載入第 ' + me.underTimes +' 條!', ctime: new Date().toLocaleString() }] ) }, 1000); me.underId = me.underId+2; me.underTimes++; }) } } } </script> <style> *{ margin: 0; padding: 0; } #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } h1, h2 { font-weight: normal; } ul { list-style-type: none; padding: 0; } li { display: inline-block; } </style>
歡迎 start:
https://github.com/doterlin/vue-wxChat
推薦:《》
以上就是vuejs怎麼實現聊天介面的詳細內容,更多請關注TW511.COM其它相關文章!