vue3实现自定义聊天输入框(可输入表情包)

2024-07-01 12:00| 来源: 网络整理| 查看: 265

第一步：先完成布局

第二步：自定义输入框

第三步：点击emoji，展示在自定义输入框中

第四步：记录最近使用的emoji

第五步：获取到输入框的内容

实现qq、微信聊天输入框，可输入表情包，存储最近使用过的emoji，对输入框复制来的内容进行格式处理。

要在输入框内将表情包图片进行输入，使用原生的input的标签是很难实现的，如果要想实现上面的功能，只有使用自定义输入框，也就是给div添加 contenteditable="true" 属性，把div变成可输入的。下面来看代码示例：

第一步：先完成布局

输入框组件：

import Emoji from './components/Emoji.vue' .container { width: 100%; flex: 1; display: flex; flex-direction: column; position: relative; padding: 10px; box-sizing: border-box; } .send-message-btn { position: absolute; right: 5px; bottom: 5px; color: #fff; } .top-icon { width: 100%; display: flex; .icon-box { margin-right: 10px; cursor: pointer; } } #message-input { width: 100%; flex: 1; margin-top: 5px; box-sizing: border-box; resize: none; overflow: auto; &::placeholder { font-size: 15px; } }

emoji组件

最近使用小黄脸表情包 import { ref } from 'vue' const historyEmojiList = ref([]) .emoji-container { width: 100%; height: 350px; padding: 5px 10px 15px; box-sizing: border-box; overflow: auto; &::-webkit-scrollbar { display: none; } } .emoji-title { font-size: 12px; margin: 10px 0 5px; } .recently-use-emoji, .all-emoji { width: 100%; display: flex; flex-wrap: wrap; .emoji-item { width: 30px; height: 30px; margin: 5px 10px; cursor: pointer; img { width: 100%; height: 100%; } } } 第二步：自定义输入框

做到这一步，你的div已经可以像正常的input那样输入文本了，不过这里比起原生的input标签有点不足之处在于，如果你是复制的文本到输入框内，会自带css样式：

像上图那样肯定不是我们想要的，就需要对复制的文本进行处理。

我们需要对div添加 paste 事件(复制事件)

import Emoji from './components/Emoji.vue' // 清除复制的文本样式 import { handlePaste } from './utils/textFormat'

将 handlePaste 方法写到了utils中

// 输入框复制文本事件回调(将复制带样式的文本样式清空, 只保留纯文本) export const handlePaste = (e) => { e.preventDefault() let text let clp = (e.originalEvent || e).clipboardData if (clp === undefined || clp === null) { text = window.clipboardData.getData("text") || "" if (text !== "") { if (window.getSelection) { var newNode = document.createElement("span") newNode.innerHTML = text; window.getSelection().getRangeAt(0).insertNode(newNode) } else { document.selection.createRange().pasteHTML(text) } } } else { text = clp.getData('text/plain') || "" if (text !== "") { document.execCommand('insertText', false, text) } } }

这样就把复制的带样式的文本变为纯文本了

第三步：点击emoji，展示在自定义输入框中

我的emoji是一个一个的gif图，放在public目录下的

需要对每个图片添加点击事件，并把具体点击的哪个emoji传回父组件中

仅展示关键代码

const emit = defineEmits(['selectEmoji']) // 点击emoji, 输入框插入emoji回调 const appendEmoji = (i) => { emit('selectEmoji', i) }

在父组件中给emoji组件绑定自定义事件

// 自定义输入框dom 绑定ref const messageInputDom = ref() // 选择的emoji const selectEmoji = (index) => { // 没有焦点就获取输入框焦点 if (document.activeElement != messageInputDom.value) { messageInputDom.value.focus() } let emojiImg = `

` document.execCommand('insertHTML', false, emojiImg) // 保存最近使用的emoji recentlyUseEmoji(index) }

这样就实现了输入框能发送emoji图片了

在代码的后面也有个记录最近使用的emoji图片的功能 recentlyUseEmoji 方法

第四步：记录最近使用的emoji

就只是把最主要是 recentlyUseEmoji 方法，其余的就是在 mounted 从本地存储中拿到数据，传递给子组件就好

// 最近使用的emoji列表 const historyEmojiList = ref([]) onMounted(() => { historyEmojiList.value = localStorage.getItem('emojiHistory') ? JSON.parse(localStorage.getItem('emojiHistory') as string) : [] }) // 保存最近使用的emoji const recentlyUseEmoji = (index: number) => { let idx = historyEmojiList.value.indexOf(index) if (idx < 0) { historyEmojiList.value.unshift(index) } else { historyEmojiList.value.unshift(historyEmojiList.value.splice(idx, 1)[0]) } // 只要两行emoji(16个) historyEmojiList.value = historyEmojiList.value.splice(0, 16) // 保存记录 localStorage.setItem('emojiHistory', JSON.stringify(historyEmojiList.value)) }

子组件：

const props = defineProps(['historyEmojiList']) const historyEmojiList = ref([]) watch(() => props.historyEmojiList, (val) => { historyEmojiList.value = val }, { deep: true }) 第五步：获取到输入框的内容

自定义输入框通过v-model获取到内容是行不通的，需要使用 input 事件，给自定义输入框添加input事件 @input="messageInput" ，通过事件对象e获取内容

let message = ref('') const messageInput = (e) => { message.value = e.target.innerHTML // (e.target as HTMLInputElement).innerHTML ts类型 }

message渲染出来的内容：

这里就需要使用 v-html 来渲染

这样就实现了输入框能输入emoji图片的功能了

【本文地址】

公司简介

联系我们