cbz-sj/components/chat/inputbar/suit/emoji/emoji.vue

<template>
<swiper :class="show" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
	<block>
		<swiper-item>
			<view class="emoji_item">
				<image v-for="(item, index) in emojiObj.map1" :key="index" :src="'../../../../' + emojiObj.path + item" @tap="sendEmoji" :data-emoji="index"></image>
			</view>
			<view class="emoji_item">
				<image v-for="(item, index) in emojiObj.map2" :key="index" :src="'../../../../' +emojiObj.path + item" @tap="sendEmoji" :data-emoji="index"></image>
			</view>
			<view class="emoji_item">
				<image v-for="(item, index) in emojiObj.map3" :key="index" :src="'../../../../' +emojiObj.path + item" @tap="sendEmoji" :data-emoji="index"></image>
			</view>
		</swiper-item>
	</block>
	<block class="second">
		<swiper-item>
			<view class="emoji_item">
				<image v-for="(item, index) in emojiObj.map4" :key="index" :src="'../../../../' +emojiObj.path + item" @tap="sendEmoji" :data-emoji="index"></image>
			</view>
			<view class="emoji_item">
				<image v-for="(item, index) in emojiObj.map5" :key="index" :src="'../../../../' +emojiObj.path + item" @tap="sendEmoji" :data-emoji="index"></image>
			</view>
			<view class="emoji_item last_item">
				<image v-for="(item, index) in emojiObj.map6" :key="index" :src="'../../../../' +emojiObj.path + item" @tap="sendEmoji" :data-emoji="index"></image>
			</view>
		</swiper-item>
	</block>
</swiper>
</template>

<script>
let WebIM = require("../../../../../utils/WebIM")["default"];
let msgType = require("../../../msgtype");
let EMOJI_STATUS = {
  OPENED: "showEmoji",
  CLOSED: "emoji_list"
};

export default {
  data() {
    return {
      show: EMOJI_STATUS.CLOSED,
      emoji: WebIM.Emoji,
      emojiObj: WebIM.EmojiObj,
      interval: 5000,
      duration: 1000,
      autoplay: false,
      indicatorDots: true // 显示面板指示点

    };
  },

  components: {},
  props: {},
  methods: {
    openEmoji() {
      this.show=EMOJI_STATUS.OPENED
    },

    cancelEmoji() {
      this.show= EMOJI_STATUS.CLOSED
    },

    // 输出 emoji
    sendEmoji(event) {
      var emoji = event.target.dataset.emoji;
      this.$emit("newEmojiStr", {
        msg: emoji,
        type: msgType.EMOJI
      }, {
        bubbles: true,
        composed: true
      });
    }

  }
};
</script>
<style>
@import "./emoji.css";
</style>