yijianbao_user_uniapp/pages_im/pages/conversation/chating/components/ChatingFooter/ChatingEmojiBar.vue

<template>
  <view class="chat_emoji_bar">
    <view class="emoji_row">
      <view
        @click="clickEmoji(emoji)"
        v-for="emoji in emojiList"
        :key="emoji"
        style="display: flex;justify-content: center;align-items: center;width: 10%;">
        <text style="font-size: 20px;margin-bottom: 6px;">{{ emoji }}</text>
      </view>
    </view>
  </view>
</template>

<script>
import emojis from "../../../../../common/emojis.js";
export default {
  components: {},
  data() {
    return {};
  },
  computed: {
    emojiList() {
      return emojis;
    },
  },
  mounted() {},
  methods: {
    clickEmoji(emoji) {
      this.$emit("insertEmoji", emoji);
    },
    backspace() {
      this.$emit("backspace");
    },
  },
};
</script>

<style lang="scss" scoped>
.chat_emoji_bar {
  padding: 24rpx 36rpx;
  position: relative;

  .emoji_row {
	display: flex;
	align-items: center;
	justify-content: flex-start;
    flex-wrap: wrap;
    margin-bottom: 12rpx;
  }
}
</style>