完全照搬不一定能寫出來 只是讓看個思想

<template> <section > <div v-for='(item,index) in msgs' :key = index><img :src='http://www.gepszalag.com/bcjs/item.uid == myInfo.uid ? myInfo.avatar :otherInfo.avatar' :class='item.uid == myInfo.uid ? ’headerleft’ : ’headerright’'><p : v-html='customEmoji(item.content)'></p> </div> </section> <div v-if='emojiShow'> //首先根據這個來判斷發送表情彈窗用不用出現 <div v-for='list in imgs'><div v-for='item in list' @click='inputEmoji(item)'> <img :src='http://www.gepszalag.com/bcjs/’./emoji/’+ item + ’.png’'></div> </div> </div></template><script>import { sendMsg } from '@/ws'; //是一個長連接import _ from 'lodash';//這個是js一個很強大的庫 import eventBus from ’@/eventBus’//這是一個子父傳遞的公共文件console.log(emoji)export default { data() { this.imgs = _.chunk(emoji, 6) //這個是調用lodash庫的chunk方法 把 六個元素分成一個數組只不過是emoji這個數組中的二維數組 return { emojiShow: false //剛開始默認不顯示 點擊按鈕顯示 點擊的按鈕上可以寫@click=’emojiShow=emojiShow’這種寫法 }; }, methods: { customEmoji(text) { //這個函數就是服務器端把傳過來的名稱轉化為圖片的 return text.replace(/[([A-Za-z0-9_]+)]/g, ’<img src='http://www.gepszalag.com/bcjs/emoji/$1.png' style='width:30px; height:30px;'>’) }, inputEmoji(pic) { this.content += `[${pic}]`//傳過來的名字轉為圖片 }};</script><style scoped>@import ’../../assets/css/dialogue.css’;#emoji-list { height: 230px; background: #fff;}#emoji-list .cell { line-height: 13vh; border-right: 1rpx solid #ddd; border-bottom: 1rpx solid #ddd;}.flex-row { display: flex; flex-direction: row; justify-content: center; align-items: center;}.flex-column { display: flex; flex-direction: column; justify-content: center; align-items: stretch;}.flex-cell { flex: 1;}.cell img { width: 35px; height: 35px;}</style>

補充知識：vue+element-ui實現聊天表情包

我是用的本地json數據實現的，表情不是很多，首先創建個json文件，代碼如下：

[{ 'codes': '1F600', 'char': '😀', 'name': 'grinning face' }, { 'codes': '1F603', 'char': '😃', 'name': 'grinning face with big eyes' }, { 'codes': '1F604', 'char': '😄', 'name': 'grinning face with smiling eyes' }, { 'codes': '1F601', 'char': '😁', 'name': 'beaming face with smiling eyes' }, { 'codes': '1F606', 'char': '😆', 'name': 'grinning squinting face' }, { 'codes': '1F605', 'char': '😅', 'name': 'grinning face with sweat' }, { 'codes': '1F923', 'char': '🤣', 'name': 'rolling on the floor laughing' }, { 'codes': '1F602', 'char': '😂', 'name': 'face with tears of joy' }, { 'codes': '1F642', 'char': '🙂', 'name': 'slightly smiling face' }, { 'codes': '1F643', 'char': '🙃', 'name': 'upside-down face' }, { 'codes': '1F609', 'char': '😉', 'name': 'winking face' }, { 'codes': '1F60A', 'char': '😊', 'name': 'smiling face with smiling eyes' }, { 'codes': '1F607', 'char': '😇', 'name': 'smiling face with halo' }, { 'codes': '1F970', 'char': '🥰', 'name': 'smiling face with hearts' }, { 'codes': '1F60D', 'char': '😍', 'name': 'smiling face with heart-eyes' }, { 'codes': '1F929', 'char': '🤩', 'name': 'star-struck' }, { 'codes': '1F618', 'char': '😘', 'name': 'face blowing a kiss' }, { 'codes': '1F617', 'char': '😗', 'name': 'kissing face' }, { 'codes': '1F61A', 'char': '😚', 'name': 'kissing face with closed eyes' }, { 'codes': '1F619', 'char': '😙', 'name': 'kissing face with smiling eyes' }, { 'codes': '1F44B', 'char': '👋', 'name': 'waving hand' }, { 'codes': '1F91A', 'char': '🤚', 'name': 'raised back of hand' }, { 'codes': '1F590', 'char': '🖐', 'name': 'hand with fingers splayed' }, { 'codes': '270B', 'char': '✋', 'name': 'raised hand' }, { 'codes': '1F596', 'char': '🖖', 'name': 'vulcan salute' }, { 'codes': '1F44C', 'char': '👌', 'name': 'OK hand' }, { 'codes': '1F90F', 'char': '🤏', 'name': 'pinching hand' }, { 'codes': '270C', 'char': '✌', 'name': 'victory hand' }, { 'codes': '1F91E', 'char': '🤞', 'name': 'crossed fingers' }, { 'codes': '1F91F', 'char': '🤟', 'name': 'love-you gesture' }, { 'codes': '1F918', 'char': '🤘', 'name': 'sign of the horns' }, { 'codes': '1F919', 'char': '🤙', 'name': 'call me hand' }, { 'codes': '1F448', 'char': '👈', 'name': 'backhand index pointing left' }, { 'codes': '1F449', 'char': '👉', 'name': 'backhand index pointing right' }, { 'codes': '1F446', 'char': '👆', 'name': 'backhand index pointing up' }, { 'codes': '1F595', 'char': '🖕', 'name': 'middle finger' }, { 'codes': '1F447', 'char': '👇', 'name': 'backhand index pointing down' }, { 'codes': '261D FE0F', 'char': '☝️', 'name': 'index pointing up' }, { 'codes': '1F44D', 'char': '👍', 'name': 'thumbs up' }, { 'codes': '1F44E', 'char': '👎', 'name': 'thumbs down' }, { 'codes': '270A', 'char': '✊', 'name': 'raised fist' }, { 'codes': '1F44A', 'char': '👊', 'name': 'oncoming fist' }, { 'codes': '1F91B', 'char': '🤛', 'name': 'left-facing fist' }, { 'codes': '1F91C', 'char': '🤜', 'name': 'right-facing fist' }]

vue組件中代碼直接貼出來，廢話不多說：

<template> <div class='chatIcon'> <el-popover placement='top-start' trigger='click' > <div class='emotionList'> <a href='javascript:void(0);' rel='external nofollow' @click='getEmo(index)' v-for='(item, index) in faceList' :key='index' >{{ item }}</a > </div> <el-button icon='iconfont icon-biaoqing' slot='reference' ></el-button> </el-popover> <el-input v-model='textarea' resize='none' type='textarea' rows='5' @keyup.enter.native='sendInfo' ></el-input> </div></template><script>const appData = require('@/utils/emoji.json');export default { mounted() { for (let i in appData) { this.faceList.push(appData[i].char); } }, data() { return { faceList: [], textarea: '' }; }, methods: { getEmo(index) { var textArea = document.getElementById('textarea'); function changeSelectedText(obj, str) { if (window.getSelection) { // 非IE瀏覽器 textArea.setRangeText(str); // 在未選中文本的情況下，重新設置光標位置 textArea.selectionStart += str.length; textArea.focus(); } else if (document.selection) { // IE瀏覽器 obj.focus(); var sel = document.selection.createRange(); sel.text = str; } } changeSelectedText(textArea, this.faceList[index]); this.textarea = textArea.value; // 要同步data中的數據 // console.log(this.faceList[index]); return; } }};</script><style lang='scss'>/* el-popover是和app同級的，所以scoped的局部屬性設置了無效 *//* 需要設置全局style */.el-popover { height: 200px; width: 400px; overflow: scroll; overflow-x: auto;}</style><style scoped>.chatIcon { padding: 0 10px; font-size: 25px;}.emotionList { display: flex; flex-wrap: wrap; padding: 5px;}.emotionItem { width: 10%; font-size: 20px; text-align: center;}/*包含以下四種的鏈接*/.emotionItem { text-decoration: none;}/*正常的未被訪問過的鏈接*/.emotionItem:link { text-decoration: none;}/*已經訪問過的鏈接*/.emotionItem:visited { text-decoration: none;}/*鼠標劃過(停留)的鏈接*/.emotionItem:hover { text-decoration: none;}/* 正在點擊的鏈接*/.emotionItem:active { text-decoration: none;}</style>

以上這篇vue界面發送表情的實現代碼就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持好吧啦網。