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

<template>  
 <section class="dialogue-section clearfix" >
      <div class="row clearfix" v-for="(item,index) in msgs" :key = index>
        <img :src="item.uid == myInfo.uid ? myInfo.avatar :otherInfo.avatar" :class="item.uid == myInfo.uid ? 'headerleft' : 'headerright'">
        <p :class="item.uid == myInfo.uid ? 'textleft' : 'textright'" v-html="customEmoji(item.content)"></p>
      </div>
    </section>
     <div id="emoji-list" class="flex-column" v-if="emojiShow"> //首先根據這個來判斷髮送表情彈窗用不用出現
       <div class="flex-cell flex-row" v-for="list in imgs">
        <div class="flex-cell flex-row cell" v-for="item in list" @click="inputEmoji(item)">
         <img :src="'./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="./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"
   width="400"
   trigger="click"
   class="emoBox"
  >
   <div class="emotionList">
    <a
     href="javascript:void(0);" rel="external nofollow" 
     @click="getEmo(index)"
     v-for="(item,index) in faceList"
     :key="index"
     class="emotionItem"
     >{{ item }}</a
    >
   </div>
   <el-button
    class="emotionSelect"
    icon="iconfont icon-biaoqing"
    slot="reference"
   ></el-button>
  </el-popover>
  <el-input
   v-model="textarea"
   class="chatText"
   resize="none"
   type="textarea"
   id="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介面傳送表情的實現程式碼就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。