vue+elementUI聊天输入框（含表情功能）

效果图如下：

这里用el-popover，这样点击背景可以关闭表情框，直接上源码：

 <el-popover
            placement="bottom"
            title="标题"
            width="500"
            height="700"
            trigger="click"
            v-model="emojiShow"
          >
            <el-button slot="reference">😀</el-button>
            <div class="browBox">
              <ul>
                <li
                  v-for="(item, index) in faceList"
                  :key="index"
                  @click="getBrow(index)"
                >
                  {{ item }}
                </li>
              </ul>
            </div>
  </el-popover>
   <el-button
            class="submit-btn"
            type="primary"
            @click="submitMessage"
            :disabled="content == ''"
            >发送
   </el-button>
   <el-input
            :rows="5"
            type="textarea"
            placeholder="请输入内容"
            @keyup.enter.native="submitMessage"
            v-model="content"
          >
    </el-input>

导入表情包json文件==我的项目是放在/assets/images/中

const appData = require("@/assets/images/emojis.json");

data:

data() {
    return {
       //聊天输入内容
      content: "",
      //表情框是否展示
      emojiShow: false,
      //表情列表
      faceList: [],
      //表情文本
      getBrowString: "",
	}
}

方法：

 created() {
    this.loadEmojis();
    }

methods: {
//加载表情，存放到表情列表中
 loadEmojis() {
      for (let i in appData) {
        this.faceList.push(appData[i].char);
      }
    },
     // 获取用户点击之后的标签 ，存放到输入框内
 getBrow(index) {
      for (let i in this.faceList) {
        if (index == i) {
          this.getBrowString = this.faceList[index];
          this.content += this.getBrowString;
        }
      }
      this.emojiShow = false;
    },
    submitMessage(){
    //提交。。。
    }
   }

样式：

.browBox {
  width: 100%;
  height: 200px;
  background: #e6e6e6;
  position: absolute;
  z-index: 100;
  bottom: 0px;
  overflow: scroll;
  ul {
    display: flex;
    flex-wrap: wrap;
    padding: 10px;
    li {
      cursor: pointer;
      width: 10%;
      font-size: 26px;
      list-style: none;
      text-align: center;
    }
  }
}
.submit-btn {
  margin: 0 15px 10px 0;
  float: right;
}

最后是表情包文件

{
    "grinning": {
      "keywords": ["face", "smile", "happy", "joy", ":D", "grin"],
      "char": "😀",
      "fitzpatrick_scale": false,
      "category": "people"
    },
    "grin": {
      "keywords": ["face", "happy", "smile", "joy", "kawaii"],
      "char": "😁",
      "fitzpatrick_scale": false,
      "category": "people"
    },
    "smiley": {
      "keywords": ["face", "happy", "joy", "haha", ":D", ":)", "smile", "funny"],
      "char": "😃",
      "fitzpatrick_scale": false,
      "category": "people"
    },
    "smile": {
      "keywords": ["face", "happy", "joy", "funny", "haha", "laugh", "like", ":D", ":)"],
      "char": "😄",
      "fitzpatrick_scale": false,
      "category": "people"
    },
    "sweat_smile": {
      "keywords": ["face", "hot", "happy", "laugh", "sweat", "smile", "relief"],
      "char": "😅",
      "fitzpatrick_scale": false,
      "category": "people"
    },
    "laughing": {
      "keywords": ["happy", "joy", "lol", "satisfied", "haha", "face", "glad", "XD", "laugh"],
      "char": "😆",
      "fitzpatrick_scale": false,
      "category": "people"
    },
    "innocent": {
      "keywords": ["face", "angel", "heaven", "halo"],
      "char": "😇",
      "fitzpatrick_scale": false,
      "category": "people"
    },
    "wink": {
      "keywords": ["face", "happy", "mischievous", "secret", ";)", "smile", "eye"],
      "char": "😉",
      "fitzpatrick_scale": false,
      "category": "people"
    },
    "blush": {
      "keywords": ["face", "smile", "happy", "flushed", "crush", "embarrassed", "shy", "joy"],
      "char": "😊",
      "fitzpatrick_scale": false,
      "category": "people"
    },
    "slightly_smiling_face": {
      "keywords": ["face", "smile"],
      "char": "🙂",
      "fitzpatrick_scale": false,
      "category": "people"
    },
    "yum": {
      "keywords": ["happy", "joy", "tongue", "smile", "face", "silly", "yummy", "nom", "delicious", "savouring"],
      "char": "😋",
      "fitzpatrick_scale": false,
      "category": "people"
    },
    "heart_eyes": {
      "keywords": ["face", "love", "like", "affection", "valentines", "infatuation", "crush", "heart"],
      "char": "😍",
      "fitzpatrick_scale": false,
      "category": "people"
    },
    "kissing_heart": {
      "keywords": ["face", "love", "like", "affection", "valentines", "infatuation", "kiss"],
      "char": "😘",
      "fitzpatrick_scale": false,
      "category": "people"
    },
    "kissing": {
      "keywords": ["love", "like", "face", "3", "valentines", "infatuation", "kiss"],
      "char": "😗",
      "fitzpatrick_scale": false,
      "category": "people"
    },
    "kissing_smiling_eyes": {
      "keywords": ["face", "affection", "valentines", "infatuation", "kiss"],
      "char": "😙",
      "fitzpatrick_scale": false,
      "category": "people"
    },
    "kissing_closed_eyes": {
      "keywords": ["face", "love", "like", "affection", "valentines", "infatuation", "kiss"],
      "char": "😚",
      "fitzpatrick_scale": false,
      "category": "people"
    },
    "stuck_out_tongue_winking_eye": {
      "keywords": ["face", "prank", "childish", "playful", "mischievous", "smile", "wink", "tongue"],
      "char": "😜",
      "fitzpatrick_scale": false,
      "category": "people"
    },
    "stuck_out_tongue_closed_eyes": {
      "keywords": ["face", "prank", "playful", "mischievous", "smile", "tongue"],
      "char": "😝",
      "fitzpatrick_scale": false,
      "category": "people"
    },
    "stuck_out_tongue": {
      "keywords": ["face", "prank", "childish", "playful", "mischievous", "smile", "tongue"],
      "char": "😛",
      "fitzpatrick_scale": false,
      "category": "people"
    },
    "sunglasses": {
      "keywords": ["face", "cool", "smile", "summer", "beach", "sunglass"],
      "char": "😎",
      "fitzpatrick_scale": false,
      "category": "people"
    },
    "roll_eyes": {
      "keywords": ["face", "eyeroll", "frustrated"],
      "char": "🙄",
      "fitzpatrick_scale": false,
      "category": "people"
    },
    "flushed": {
      "keywords": ["face", "blush", "shy", "flattered"],
      "char": "😳",
      "fitzpatrick_scale": false,
      "category": "people"
    },
    "rage": {
      "keywords": ["angry", "mad", "hate", "despise"],
      "char": "😡",
      "fitzpatrick_scale": false,
      "category": "people"
    },
    "confused": {
      "keywords": ["face", "indifference", "huh", "weird", "hmmm", ":/"],
      "char": "😕",
      "fitzpatrick_scale": false,
      "category": "people"
    },
    "tired_face": {
      "keywords": ["sick", "whine", "upset", "frustrated"],
      "char": "😫",
      "fitzpatrick_scale": false,
      "category": "people"
    },
    "triumph": {
      "keywords": ["face", "gas", "phew", "proud", "pride"],
      "char": "😤",
      "fitzpatrick_scale": false,
      "category": "people"
    },
    "fearful": {
      "keywords": ["face", "scared", "terrified", "nervous", "oops", "huh"],
      "char": "😨",
      "fitzpatrick_scale": false,
      "category": "people"
    },
    "disappointed_relieved": {
      "keywords": ["face", "phew", "sweat", "nervous"],
      "char": "😥",
      "fitzpatrick_scale": false,
      "category": "people"
    },
    "sleepy": {
      "keywords": ["face", "tired", "rest", "nap"],
      "char": "😪",
      "fitzpatrick_scale": false,
      "category": "people"
    },
    "sweat": {
      "keywords": ["face", "hot", "sad", "tired", "exercise"],
      "char": "😓",
      "fitzpatrick_scale": false,
      "category": "people"
    },
  
    "dizzy_face": {
      "keywords": ["spent", "unconscious", "xox", "dizzy"],
      "char": "😵",
      "fitzpatrick_scale": false,
      "category": "people"
    },
    "astonished": {
      "keywords": ["face", "xox", "surprised", "poisoned"],
      "char": "😲",
      "fitzpatrick_scale": false,
      "category": "people"
    },
    "sneezing_face": {
      "keywords": ["face", "gesundheit", "sneeze", "sick", "allergy"],
      "char": "🤧",
      "fitzpatrick_scale": false,
      "category": "people"
    },
    "mask": {
      "keywords": ["face", "sick", "ill", "disease"],
      "char": "😷",
      "fitzpatrick_scale": false,
      "category": "people"
    },
    "face_with_thermometer": {
      "keywords": ["sick", "temperature", "thermometer", "cold", "fever"],
      "char": "🤒",
      "fitzpatrick_scale": false,
      "category": "people"
    },
    "face_with_head_bandage": {
      "keywords": ["injured", "clumsy", "bandage", "hurt"],
      "char": "🤕",
      "fitzpatrick_scale": false,
      "category": "people"
    },
    "sleeping": {
      "keywords": ["face", "tired", "sleepy", "night", "zzz"],
      "char": "😴",
      "fitzpatrick_scale": false,
      "category": "people"
    },
    "zzz": {
      "keywords": ["sleepy", "tired", "dream"],
      "char": "💤",
      "fitzpatrick_scale": false,
      "category": "people"
    },
    "clap": {
      "keywords": ["hands", "praise", "applause", "congrats", "yay"],
      "char": "👏",
      "fitzpatrick_scale": true,
      "category": "people"
    },
    "call_me_hand": {
      "keywords": ["hands", "gesture"],
      "char": "🤙",
      "fitzpatrick_scale": true,
      "category": "people"
    },
    "+1": {
      "keywords": ["thumbsup", "yes", "awesome", "good", "agree", "accept", "cool", "hand", "like"],
      "char": "👍",
      "fitzpatrick_scale": true,
      "category": "people"
    },
    "-1": {
      "keywords": ["thumbsdown", "no", "dislike", "hand"],
      "char": "👎",
      "fitzpatrick_scale": true,
      "category": "people"
    },
    "facepunch": {
      "keywords": ["angry", "violence", "fist", "hit", "attack", "hand"],
      "char": "👊",
      "fitzpatrick_scale": true,
      "category": "people"
    },
    "fist": {
      "keywords": ["fingers", "hand", "grasp"],
      "char": "✊",
      "fitzpatrick_scale": true,
      "category": "people"
    },
    "v": {
      "keywords": ["fingers", "ohyeah", "hand", "peace", "victory", "two"],
      "char": "✌",
      "fitzpatrick_scale": true,
      "category": "people"
    },
    "ok_hand": {
      "keywords": ["fingers", "limbs", "perfect", "ok", "okay"],
      "char": "👌",
      "fitzpatrick_scale": true,
      "category": "people"
    },
    "raised_hand": {
      "keywords": ["fingers", "stop", "highfive", "palm", "ban"],
      "char": "✋",
      "fitzpatrick_scale": true,
      "category": "people"
    },
    "raised_back_of_hand": {
      "keywords": ["fingers", "raised", "backhand"],
      "char": "🤚",
      "fitzpatrick_scale": true,
      "category": "people"
    },
    "muscle": {
      "keywords": ["arm", "flex", "hand", "summer", "strong", "biceps"],
      "char": "💪",
      "fitzpatrick_scale": true,
      "category": "people"
    },
    "handshake": {
      "keywords": ["agreement", "shake"],
      "char": "🤝",
      "fitzpatrick_scale": false,
      "category": "people"
    },
    "point_left": {
      "keywords": ["direction", "fingers", "hand", "left"],
      "char": "👈",
      "fitzpatrick_scale": true,
      "category": "people"
    },
    "point_right": {
      "keywords": ["fingers", "hand", "direction", "right"],
      "char": "👉",
      "fitzpatrick_scale": true,
      "category": "people"
    },
    "fu": {
      "keywords": ["hand", "fingers", "rude", "middle", "flipping"],
      "char": "🖕",
      "fitzpatrick_scale": true,
      "category": "people"
    },
    "raised_hand_with_fingers_splayed": {
      "keywords": ["hand", "fingers", "palm"],
      "char": "🖐",
      "fitzpatrick_scale": true,
      "category": "people"
    },
    "lips": {
      "keywords": ["mouth", "kiss"],
      "char": "👄",
      "fitzpatrick_scale": false,
      "category": "people"
    },
    "ear": {
      "keywords": ["face", "hear", "sound", "listen"],
      "char": "👂",
      "fitzpatrick_scale": true,
      "category": "people"
    },
  
    "eyes": {
      "keywords": ["look", "watch", "stalk", "peek", "see"],
      "char": "👀",
      "fitzpatrick_scale": false,
      "category": "people"
    },
    
    "santa": {
      "keywords": ["festival", "man", "male", "xmas", "father christmas"],
      "char": "🎅",
      "fitzpatrick_scale": true,
      "category": "people"
    },
   
    "sun_with_face": {
      "keywords": ["nature", "morning", "sky"],
      "char": "🌞",
      "fitzpatrick_scale": false,
      "category": "animals_and_nature"
    },
    "crescent_moon": {
      "keywords": ["night", "sleep", "sky", "evening", "magic"],
      "char": "🌙",
      "fitzpatrick_scale": false,
      "category": "animals_and_nature"
    },
    "star": {
      "keywords": ["night", "yellow"],
      "char": "⭐",
      "fitzpatrick_scale": false,
      "category": "animals_and_nature"
    },
  
    "zap": {
      "keywords": ["thunder", "weather", "lightning bolt", "fast"],
      "char": "⚡",
      "fitzpatrick_scale": false,
      "category": "animals_and_nature"
    },
    "fire": {
      "keywords": ["hot", "cook", "flame"],
      "char": "🔥",
      "fitzpatrick_scale": false,
      "category": "animals_and_nature"
    },
  
    "snowflake": {
      "keywords": ["winter", "season", "cold", "weather", "christmas", "xmas"],
      "char": "❄️",
      "fitzpatrick_scale": false,
      "category": "animals_and_nature"
    },
  
    "soccer": {
      "keywords": ["sports", "football"],
      "char": "⚽",
      "fitzpatrick_scale": false,
      "category": "activity"
    },
    "basketball": {
      "keywords": ["sports", "balls", "NBA"],
      "char": "🏀",
      "fitzpatrick_scale": false,
      "category": "activity"
    },
    "football": {
      "keywords": ["sports", "balls", "NFL"],
      "char": "🏈",
      "fitzpatrick_scale": false,
      "category": "activity"
    },
    "baseball": {
      "keywords": ["sports", "balls"],
      "char": "⚾",
      "fitzpatrick_scale": false,
      "category": "activity"
    },
    "gift": {
      "keywords": ["present", "birthday", "christmas", "xmas"],
      "char": "🎁",
      "fitzpatrick_scale": false,
      "category": "objects"
    },
  
    "tada": {
      "keywords": ["party", "congratulations", "birthday", "magic", "circus", "celebration"],
      "char": "🎉",
      "fitzpatrick_scale": false,
      "category": "objects"
    },
  
    "black_nib": {
      "keywords": ["pen", "stationery", "writing", "write"],
      "char": "✒️",
      "fitzpatrick_scale": false,
      "category": "objects"
    },
    "memo": {
      "keywords": ["write", "documents", "stationery", "pencil", "paper", "writing", "legal", "exam", "quiz", "test", "study", "compose"],
      "char": "📝",
      "fitzpatrick_scale": false,
      "category": "objects"
    },
    "heart": {
      "keywords": ["love", "like", "valentines"],
      "char": "❤️",
      "fitzpatrick_scale": false,
      "category": "symbols"
    },
    "yellow_heart": {
      "keywords": ["love", "like", "affection", "valentines"],
      "char": "💛",
      "fitzpatrick_scale": false,
      "category": "symbols"
    },
    "green_heart": {
      "keywords": ["love", "like", "affection", "valentines"],
      "char": "💚",
      "fitzpatrick_scale": false,
      "category": "symbols"
    },
    "vs": {
      "keywords": ["words", "orange-square"],
      "char": "🆚",
      "fitzpatrick_scale": false,
      "category": "symbols"
    },
    "speech_balloon": {
      "keywords": ["bubble", "words", "message", "talk", "chatting"],
      "char": "💬",
      "fitzpatrick_scale": false,
      "category": "symbols"
    },
  
    "clock1": {
      "keywords": ["time", "late", "early", "schedule"],
      "char": "🕐",
      "fitzpatrick_scale": false,
      "category": "symbols"
    }
  }

到此为止，觉得有用的就收藏起来吧！！