vue 聊天发送 emoji

在开发项目是我们,有时候会遇到聊天发送emoji ,但是原生的emoji在不同的系统上会有不同,但是保持统一的emoji,所以只有采取一下方式展示,就是发送表情用图片的形式呈现

首先需要将用到的图片根据需要生成一个JSON文件

{
    "[微笑]": {
        "code": "[微笑]",
        "name": "微笑",
        "img_url": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAYAAADimHc4AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA4FpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ4IDc5LjE2NDAzNiwgMjAxOS8wOC8xMy0wMTowNjo1NyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo4M2IwMjBhZi02ZGFlLTRkMGMtOWIyZC00MWMxODg2MmMyOTIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NTMzQzAwMkQ1NTY5MTFFQjk5RjhBMEY3OUVGQUE0NUEiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NTMzQzAwMkM1NTY5MTFFQjk5RjhBMEY3OUVGQUE0NUEiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6Njg3NDVhNzYtZTZiNC00ZDY1LTgwMWUtNDYzNjY4YTBkMGQ3IiBzdFJlZjpkb2N1bWVudElEPSJhZG9iZTpkb2NpZDpwaG90b3Nob3A6OTg1NGJjMWMtYzcyZS1iOTRmLTlkMzUtYWM2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"
    },
}

表情包数据,里面有图片有name还有标识,以键值对的形式,[微笑]是相当于一个表情包标识,此处灵感来源于vx
将emoji展示完成后,就需要一个能输入的并且能展示输入内容的地方 在传统 的输入框 input 或者 textarea 都是不能展示图片的,所以采用在div contenteditable=“true”

  <div class="msg">
        <div contenteditable="true"  ref="inputMessage" class="inputMessage" @keydown="handleKeyDown" @paste="handlePaste" ></div>
        <div class="send" @click="sendMessage" >
          <button >发送&ensp;<i>S</i></button>
        </div>
      </div>

在这里插入图片描述
当咱们点击表情的时候执行一下逻辑

emoji

<script setup>
import Emoji from '/public/images/Emoji.json'
import {onMounted,computed,ref} from "vue";

const emits = defineEmits(['clickFather'])
const emoji = ref()

 const getAssetsFile = (url) => {
   return new URL(`${url}`, import.meta.url).href
}
function emoji_btn(e){
    let target =e.target 
    if(target.className ==='emoji_btn'){
      emits('clickFather',target.children[0])
    }else {
      emits('clickFather',target)
    }
}

function EmojiInit(){
  for (let emojiKey in Emoji) {
    let {code,name,img_url} = Emoji[emojiKey]
    let btn = document.createElement('button')
    btn.className='emoji_btn'
    btn.title=name
    btn.innerHTML = `
      <img data-code="${code}" class="emoji-img"  src="${img_url}" alt="${name}" style="margin: 0px 1px;">
    `
    emoji.value.append(btn)
  }
}


onMounted(()=>{
  EmojiInit()
})
</script>

<template>
  <div class="emoji_box">
    <div class="emoji_body" ref="emoji" @click="emoji_btn"></div>
  </div>
 </template>
 <!--
css 此处就不展示了
-->
// 图标内部
function clickFather(params) {
  const node = params.cloneNode()
  inputMessage.value.focus()
  const selection = window.getSelection()
  if(selection.rangeCount > 0){
    const range = selection.getRangeAt(0)
    range.insertNode(node)
    const newRange = document.createRange()    
    newRange.setStartAfter(node)
    newRange.collapse(true)
    selection.removeAllRanges()
    selection.addRange(newRange)

    // 等待 DOM 更新后滚动到底部
    nextTick(() => {
        inputMessage.scrollTop = inputMessage.scrollHeight
    })
  }
}

在这里插入图片描述

相关代码结构

在这里插入图片描述
实现文字与emoji图片在一起的显示逻辑

// 使用alt+enter换行
const handleKeyDown = (event) => {
    if (event.altKey && event.key === 'Enter'){
        event.preventDefault()
        const div = document.createElement('div') 
        div.setAttribute('data-type', 'br')
        const br = document.createElement('br')
        div.appendChild(br)
        const selection = window.getSelection()
        if (selection.rangeCount > 0) {
            const range = selection.getRangeAt(0)
            range.deleteContents() 
            range.insertNode(div)
            range.setStartAfter(div)
            range.collapse(true)
            selection.removeAllRanges()
            selection.addRange(range)
        }
        nextTick(() => {
            inputMessage.scrollTop = inputMessage.scrollHeight
        })
        return

    }
    if (event.key === 'Enter') {
        event.preventDefault() // 阻止默认的回车换行行为
        sendMessage()
    }
}

发送逻辑

const sendMessage = () => {
  const div = document.createElement('div') 
  div.innerHTML = inputMessage.value.innerHTML
  div.innerHTML = replaceNestedDivs(div.innerHTML)
  div.innerHTML = div.innerHTML.replace(/<img\s+data-code="([^"]+)"[^>]*>/g, '$1')
  message.value = div.innerText
  console.log('传输数据:',message.value);
  if (message.value) {
    const obj = {
          id: 2,
          name:'张三',
          content: initMessage(message.value),
          time: getDateTimer(),
          type: 'system_user',
          avatar: 'https://www.wenpblog.com/cdn/static/header/2812.png',
      }
      messageList.value.push(obj)
      message.value = ''
      inputMessage.value.innerHTML = ''
      initScroll()
  } else {
        if (sendTipTimeout) {
            return
        }
        sendTip = true
        message.value = ''
        inputMessage.value.innerHTML = ''
        sendTipTimeout = setTimeout(() => {
            sendTip = false
            sendTipTimeout = null
        }, 1500)
    }
}

function replaceNestedDivs(html) {
    const regex = /<div\s+data-type="br">(.*?)(<img[^>]*>)?/gi
    return html.replace(regex, function (match, p1, p2) {
        const content = p1 ? p1.trim() : '' 
        const imgTag = p2 ? ` ${p2}` : ''
        return `\n${content}${imgTag}`
    })
}
//处理聊天数据
const initMessage = (text) => {
  return replaceWithEmojiImages(text)
}
// 定义一个函数来将特定格式的字符串替换为图片
function replaceWithEmojiImages(text) {
    const regex = /\[(.*?)\]/g
    return  text.replace(regex, (match, p1) =>{
        const imgSrc = `${emojiJSON[match] ? emojiJSON[match].img_url : ''}`
        return imgSrc?`<img data-code="${match}" src="${imgSrc}" class="emoji-img"/>`:`${match}`
    })
}
// 处理粘贴问题
function handlePaste(e){
    e.stopPropagation();
    e.preventDefault();
    let text = '', event = (e.originalEvent || e);
    if (event.clipboardData && event.clipboardData.getData) {
        text = event.clipboardData.getData('text/plain');
    } else if (window.clipboardData && window.clipboardData.getData) {
        text = window.clipboardData.getData('Text');
    }
    if (document.queryCommandSupported('insertText')) {
        document.execCommand('insertText', false, text);
    } else {
        document.execCommand('paste', false, text);
    }
}


传输带数据

在这里插入图片描述

展示效果

在这里插入图片描述

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值