vue表情包公共组件（适用于聊天室）

组件内容

<template>
  <div class="emoji-Bigbox">
    <el-scrollbar ref="emojiScroll" class="emojiScroll">
      <div
        class="emoji-box"
        v-for="(item, index) in emoji_icon"
        :key="index"
        @click="pickEmoji(index)"
      >
        {{ item }}
      </div>
    </el-scrollbar>
  </div>
</template>
<script>
export default {
  data() {
    return {
      emoji_icon: [
        "😀",
        "😃",
        "😄",
        "😁",
        "😆",
        "😅",
        "🤣",
        "😂",
        "🙂",
        "🙃",
        "😉",
        "😊",
        "😇",
        "😍",
        "🤩",
        "😘",
        "😗",
        "😚",
        "😙",
        "😋",
        "😛",
        "😜",
        "🤪",
        "😝",
        "🤑",
        "🤗",
        "🤭",
        "🤫",
        "🤔",
        "🤐",
        "🤨",
        "😐",
        "😑",
        "😶",
        "😏",
        "😒",
        "🙄",
        "😬",
        "🤥",
        "😌",
        "😔",
        "😪",
        "🤤",
        "😴",
        "😷",
        "🤒",
        "🤕",
        "🤢",
        "🤮",
        "🤧",
        "😵",
        "🤯",
        "🤠",
        "😎",
        "🤓",
        "🧐",
        "😕",
        "😟",
        "🙁",
        "😮",
        "😯",
        "😲",
        "😳",
        "😦",
        "😧",
        "😨",
        "😰",
        "😥",
        "😢",
        "😭",
        "😱",
        "😖",
        "😣",
        "😞",
        "😓",
        "😩",
        "😫",
        "😤",
        "😡",
        "😠",
        "🤬",
        "😈",
        "👿",
        "💀",
        "💩",
        "🤡",
        "👹",
        "👺",
        "👻",
        "👽",
        "👾",
        "🤖",
        "😺",
        "😸",
        "😹",
        "😻",
        "😼",
        "😽",
        "🙀",
        "😿",
        "😾",
        "💋",
        "👋",
        "🤚",
        "🖐",
        "✋",
        "🖖",
        "👌",
        "🤞",
        "🤟",
        "🤘",
        "🤙",
        "👈",
        "👉",
        "👆",
        "🖕",
        "👇",
        "👍",
        "👎",
        "✊",
        "👊",
        "🤛",
        "🤜",
        "👏",
        "🙌",
        "👐",
        "🤲",
        "🤝",
        "🙏",
        "💅",
        "🤳",
        "💪",
        "👂",
        "👃",
        "🧠",
        "👀",
        "👁",
        "👅",
        "👄",
        "👶",
        "🧒",
        "👦",
        "👧",
        "🧑",
        "👱",
        "👨",
        "🧔",
        "👱‍",
        "👨‍",
        "👨‍",
        "👨‍",
        "👨‍",
        "👩",
        "👱‍",
        "👩‍",
        "👩‍",
        "👩‍",
        "👩‍",
        "🧓",
        "👴",
        "👵",
        "🙍",
        "🙍‍",
        "🙍‍",
        "🙎",
        "🙎‍",
        "🙎‍",
        "🙅",
        "🙅‍",
        "🙅‍",
        "🙆",
        "🙆‍",
        "🙆‍",
        "💁",
        "💁‍",
        "💁‍",
        "🙋",
        "🙋‍",
        "🙋‍",
        "🙇",
        "🙇‍",
        "🙇‍",
        "🤦",
        "🤦‍",
        "🤦‍",
        "🤷",
        "🤷‍",
        "🤷‍",
        "👨‍⚕️",
        "👩‍⚕️",
        "👨‍🎓",
        "👩‍🎓",
        "👨‍🏫",
        "👩‍🏫",
        "👨‍⚖️",
        "👩‍⚖️",
        "👨‍🌾",
        "👩‍🌾",
        "👨‍🍳",
        "👩‍🍳",
        "👨‍🔧",
        "👩‍🔧",
        "👨‍🏭",
        "👩‍🏭",
        "👨‍💼",
        "👩‍💼",
        "👨‍🔬",
        "👩‍🔬",
        "👨‍💻",
        "👩‍💻",
        "👨‍🎤",
        "👩‍🎤",
        "👨‍🎨",
        "👩‍🎨",
        "👨‍✈️",
        "👩‍✈️",
        "👨‍🚀",
        "👩‍🚀",
        "👨‍🚒",
        "👩‍🚒",
        "👮",
        "👮‍♂️",
        "👮‍♀️",
        "🕵",
        "🕵️‍♂️",
        "🕵️‍♀️",
        "💂",
        "💂‍",
        "💂‍",
        "👷",
        "👷‍",
        "👷‍",
        "🤴",
        "👸",
        "👳",
        "👳‍",
        "👳‍",
        "👲",
        "🧕",
        "🤵",
        "👰",
        "🤰",
        "🤱",
        "👼",
        "🎅",
        "🤶",
        "🧙",
        "🧙‍",
        "🧙‍",
        "🧚",
        "🧚‍",
        "🧚‍",
        "🧛",
        "🧛‍",
        "🧛‍",
        "🧜",
        "🧜‍",
        "🧜‍",
        "🧝",
        "🧝‍",
        "🧝‍",
        "🧞",
        "🧞‍",
        "🧞‍",
        "🧟",
        "🧟‍",
        "🧟‍",
        "💆",
        "💆‍",
        "💆‍",
        "💇",
        "💇‍",
        "💇‍",
        "🚶",
        "🚶‍",
        "🚶‍",
        "🏃",
        "🏃‍",
        "🏃‍",
        "💃",
        "🕺",
        "🕴",
        "👯",
        "👯‍",
        "👯‍",
        "🧖",
        "🧖‍",
        "🧖‍",
        "🧘",
        "👭",
        "👫",
        "👬",
        "💏",
        "👨‍",
        "👩‍",
        "💑",
        "👨‍",
        "👩‍",
        "👪",
        "👨‍👩‍👦",
        "👨‍👩‍👧",
        "👨‍👩‍👧‍👦",
        "👨‍👩‍👦‍👦",
        "👨‍👩‍👧‍👧",
        "👨‍👨‍👦",
        "👨‍👨‍👧",
        "👨‍👨‍👧‍👦",
        "👨‍👨‍👦‍👦",
        "👨‍👨‍👧‍👧",
        "👩‍👩‍👦",
        "👩‍👩‍👧",
        "👩‍👩‍👧‍👦",
        "👩‍👩‍👦‍👦",
        "👩‍👩‍👧‍👧",
        "👨‍👦",
        "👨‍👦‍👦",
        "👨‍👧",
        "👨‍👧‍👦",
        "👨‍👧‍👧",
        "👩‍👦",
        "👩‍👦‍👦",
        "👩‍👧",
        "👩‍👧‍👦",
        "👩‍👧‍👧",
        "🗣",
        "👤",
        "👥",
        "👣",
        "🌂",
        "☂",
        "👓",
        "🕶",
        "👔",
        "👕",
        "👖",
        "🧣",
        "🧤",
        "🧥",
        "🧦",
        "👗",
        "👘",
        "👙",
        "👚",
        "👛",
        "👜",
        "👝",
        "🎒",
        "👞",
        "👟",
        "👠",
        "👡",
        "👢",
        "👑",
        "👒",
        "🎩",
        "🎓",
        "🧢",
        "⛑",
        "💄",
        "💍",
        "💼"
      ]
    }
  },
  methods: {
    pickEmoji(idx) {
      return this.$emit("selectEmoji", this.emoji_icon[idx])
    },
  }
}
</script>
<style lang="scss" scoped>

.emoji-Bigbox {
  height: 300px;
  background: #fff;
  border-radius: 10px;
  // display: flex;
  // flex-direction: row;
  // flex-wrap: wrap;
  // overflow-y: scroll;
  .el-scrollbar {
    .el-scrollbar__wrap /deep/{
      overflow-y: hidden !important;
    }
  }
  .emojiScroll{
    height: 310px;
  }
  .emoji-box {
    display: inline-block;
    width: 30px;
    height: 30px;
    font-size: 22px;
    // border: 1px solid red;
    text-align: center;
    transition: all 0.3s;
    cursor: pointer;
    // &:hover {
    //   border-radius: 5px;
    //   // background: rgba(160, 158, 158, 0.39);
    //   transform: scale(1.5);
    // }
  }
}
</style>

调用（引入方式忽略）

 <Popover
     ref="popover5"
     placement="top-start"
     width="360"
     v-model="chatPopover"
   >
     <p>
       <ChatEmoji
         v-on:selectEmoji="selectEmoji"
         :inpMessage="message"
       />
     </p>
   </Popover>
   <div
     v-popover:popover5
     class="chatRoom_input_emoji"
     @click="showEmojiHandle"
   >
     <img src="此处微表情图标" />
   </div>