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

<template>
  <view class="chat_emoji_bar">
    <scroll-view :scroll-y="true" class="emoji_scroll_view">
      <view class="emoji_row">
        <view
          @click="clickEmoji(emoji)"
          v-for="emoji in emojiList"
          :key="emoji"
          :id="emoji"
          class="emoji_col">
          <text class="emoji_text">{{ emoji }}</text>
        </view>
      </view>
    </scroll-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: 0;
  position: relative;
  height: 550rpx;
  background-color: #f0f2f6;
}

.emoji_scroll_view {
  flex: 1;
  padding: 24rpx 36rpx;
}

.emoji_row {
  flex-direction: row;
  flex-wrap: wrap;
  padding-bottom: 24rpx;
}

.emoji_col {
  width: 113rpx;
  height: 80rpx;
  align-items: center;
  justify-content: center;
}

.emoji_text {
  font-size: 50rpx;
}
</style>