【WebSocket】实现Vue发送表情

最新推荐文章于 2024-06-13 09:58:25 发布

CodeBoyWLC

最新推荐文章于 2024-06-13 09:58:25 发布

阅读量1.1k

点赞数 1

本文链接：https://blog.csdn.net/wlc19981111/article/details/128520671

版权

SpringBoot 同时被 3 个专栏收录

6 篇文章 0 订阅

订阅专栏

Vue

2 篇文章 0 订阅

订阅专栏

WebSocket

1 篇文章 0 订阅

订阅专栏

实现效果：
在这里插入图片描述

在这里插入图片描述

代码：
emojiArr.js：JSON文件，业务中可到数据库查找动态生成

var emojiArr = [
  {
    name: '热门',
    iconArr: [{
      className: 'bg-1f4b0',
      icon: '💰'

    },
      {
        className: 'bg-1f604',
        icon: '😄'

      },
      {
        className: 'bg-1f60d',
        icon: '😍'

      },
      {
        className: 'bg-1f631',
        icon: '😱'

      },
      {
        className: 'bg-1f602',
        icon: '😂'

      },
      {
        className: 'bg-1f353',
        icon: '🍓'

      },
      {
        className: 'bg-1f37a',
        icon: '🍺'

      },
      {
        className: 'bg-f2615',
        icon: '☕'

      },
      {
        className: 'bg-1f340',
        icon: '🍀'

      },
      {
        className: 'bg-1f331',
        icon: '🌱'

      },
      {
        className: 'bg-f2728',
        icon: '✨'

      },
      {
        className: 'bg-f26a1',
        icon: '⚡'

      },
      {
        className: 'bg-1f4ab',
        icon: '💫'

      },
      {
        className: 'bg-1f4a5',
        icon: '💥'

      },
      {
        className: 'bg-1f3b5',
        icon: '🎵'

      },
      {
        className: 'bg-1f44f',
        icon: '👏'

      },
      {
        className: 'bg-1f4aa',
        icon: '💪'

      },
      {
        className: 'bg-1f44d',
        icon: '👍'

      },
      {
        className: 'bg-1f449',
        icon: '👉'

      },
      {
        className: 'bg-1f448',
        icon: '👈'

      },
      {
        className: 'bg-1f447',
        icon: '👇'

      },
      {
        className: 'bg-1f446',
        icon: '👆'

      },
      {
        className: 'bg-1f44a',
        icon: '👊'

      },
      {
        className: 'bg-1f48b',
        icon: '💋'

      },
      {
        className: 'bg-1f48d',
        icon: '💍'

      },
      {
        className: 'bg-1f451',
        icon: '👑'

      },
      {
        className: 'bg-1f4a5',
        icon: '💥'

      },
      {
        className: 'bg-1f495',
        icon: '💕'

      },
      {
        className: 'bg-1f496',
        icon: '💖'

      },
      {
        className: 'bg-1f389',
        icon: '🎉'

      },
      {
        className: 'bg-1f47b',
        icon: '👻'

      },
      {
        className: 'bg-f3299',
        icon: '㊙'

      },
      {
        className: 'bg-1f51e',
        icon: '🔞'

      },

      {
        className: 'bg-f2705',
        icon: '✅'

      },
      {
        className: 'bg-f2b07',
        icon: '⬇'

      },
      {
        className: 'bg-f27a1',
        icon: '➡'

      },
      {
        className: 'bg-1f4af',
        icon: '💯'

      },
      {
        className: 'bg-f2714',
        icon: '✔'

      },
      {
        className: 'bg-f2611',
        icon: '☑'

      },
      {
        className: 'bg-f2757',
        icon: '❗'

      },
      {
        className: 'bg-f2753',
        icon: '❓'

      },
      {
        className: 'bg-f2b55',
        icon: '⭕'

      },
      {
        className: 'bg-1f680',
        icon: '🚀'

      },
      {
        className: 'bg-f2708',
        icon: '✈'

      },
      {
        className: 'bg-1f697',
        icon: '🚗'

      },
      {
        className: 'bg-f26a0',
        icon: '⚠'

      },
      {
        className: 'bg-f2693',
        icon: '⚓'

      },
      {
        className: 'bg-1f4e2',
        icon: '📢'

      },
      {
        className: 'bg-1f514',
        icon: '🔔'

      },
      {
        className: 'bg-1f381',
        icon: '🎁'

      },
      {
        className: 'bg-1f384',
        icon: '🎄'

      },
      {
        className: 'bg-1f49b',
        icon: '💛'

      },
      {
        className: 'bg-1f525',
        icon: '🔥'

      },
      {
        className: 'bg-1f485',
        icon: '💅'

      },

      {
        className: 'bg-1f64b',
        icon: '🙋'

      },
      {
        className: 'bg-1f004',
        icon: '🀄'

      },
      {
        className: 'bg-1f33b',
        icon: '🌻'

      },
      {
        className: 'bg-1f37b',
        icon: '🍻'

      },
      {
        className: 'bg-1f648',
        icon: '🙈'

      },
      {
        className: 'bg-1f618',
        icon: '😘'

      },
      {
        className: 'bg-f3030',
        icon: '〰'

      }

    ]
  }
]
export {
  emojiArr
}

聊天室vue文件的发送消息处：获得选中表情的对象，后把对象填充到聊天室的输入框处即可

    <div class="line">
      <div @click="bqb">表情</div>
        <div id="emoji" slot="content" v-show="show" style="z-index: 9999">
          <el-tabs @tab-click="tabClick">
            <el-tab-pane
              :label="item.name"
              v-for="(item, index) in faceList"
              :key="index"
            >
              <div class="img-div" style="overflow: auto; height: 530px">
                <i
                  class="emoji"
                  v-for="(item1, index1) in faceList[tabIndex].iconArr"
                  :key="index1"
                  @click="clickEmoji(item1.icon)"
                  style="cursor: pointer"
                >
                  {{ item1.icon }}
                </i>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
    </div>
methos:{
    // 点击表情包
    clickEmoji(val) {
      // debugger;
      // 获取textarea输入框元素节点
      let ele = document.querySelector("#textarea");

      // 获取光标
      let cursor = ele.selectionStart;
      // 设置文本内容
      ele.setRangeText(val);
      // 移动光标并聚焦
      ele.selectionStart = cursor + 2;
      ele.focus();
      // 使文本输入框的内容等于当前的值
      this.msg = ele.value;
      this.show = false;
    },
    // 点击标签页
    tabClick(tab) {
      this.tabIndex = tab.index - 0;
    },
    bqb() {
      if (this.show == true) {
        this.show = false;
      } else {
        this.show = true;
      }
    },
}