快捷導(dǎo)航

Vue3實(shí)現(xiàn)Emoji表情的四種方案

更新時(shí)間：2025年01月10日 09:45:47 作者：李劍一

聊天工具的項(xiàng)目開發(fā)到了表情功能,由于目前會(huì)話的輸入?yún)^(qū)域使用的是 textarea 而非富文本編輯器,所以表情功能也需要兼顧 textarea 進(jìn)行開發(fā),本文給大家簡(jiǎn)單聊聊幾種表情的實(shí)現(xiàn)方,感興趣的小伙伴一起來(lái)看看吧

使用輸入法輸入表情

Textarea中支持接受輸入法輸入的表情，在 macOs 中直接輸入“微笑”，會(huì)直接打印出??的表情，和文字沒(méi)區(qū)別。

但是這種方案不好的點(diǎn)在于只能手輸，沒(méi)辦法達(dá)到選擇的效果。

使用Unicode編碼輸入表情

在 Unicode 編碼中存在對(duì)應(yīng)表情的編碼區(qū)間，位于基本多語(yǔ)言面（Basic Multilingual Plane，BMP），碼點(diǎn)在 U+1F600 到 U+1F6FF。

因?yàn)槟壳笆褂玫氖?textarea 作為輸入框，所以 Unicode 編碼在輸入框顯示出來(lái)是純文本，這就導(dǎo)致用戶很有可能出現(xiàn)誤修改。

另外會(huì)話信息的展示區(qū)域，現(xiàn)在也是直接使用的模板語(yǔ)法，需要在展示區(qū)使用 v-html 才能正常展示表情，否則也是純文本。

但是基于 Unicode 編碼的這種模式非常輕量，并不需要額外的庫(kù)和特殊操作。

使用自定義內(nèi)容進(jìn)行對(duì)應(yīng)

使用自定義內(nèi)容進(jìn)行對(duì)應(yīng)，這應(yīng)該是QQ的表情方案（雖然我沒(méi)看過(guò)源碼，純猜測(cè)）。

QQ的輸入框在使用 “/” 進(jìn)行輸入的時(shí)候會(huì)彈出相應(yīng)的表情提示，確定以后變成表情。這里面大概率是經(jīng)歷了對(duì)特定編碼的轉(zhuǎn)換。

同理我們也可以用這種方案進(jìn)行轉(zhuǎn)換，可以使用特定的符號(hào)在系統(tǒng)中進(jìn)行解析，生成表情。

比如系統(tǒng)中寫死 “[wx]” 代表是的 ?? ，當(dāng)輸入框通過(guò) input 事件監(jiān)聽到存在 “[wx]” 的時(shí)候，代碼將其自動(dòng)轉(zhuǎn)換為 ??。

插個(gè)眼，后面把 Unicode 編碼通過(guò)這種方式實(shí)現(xiàn)一下。

使用 emoji-mart-vue 插件

使用插件是性價(jià)比最高的方案，這個(gè)插件相當(dāng)于直接把輸入的emoji集成了，無(wú)需改造原本的代碼，插入的emoji表情輸入法輸入的沒(méi)有區(qū)別。

唯一可能存在的瑕疵可能是沒(méi)辦法自定義。

安裝

npm install emoji-mart-vue-fast

使用

<template>
<Picker :data="emojiIndex" :emojiSize="18" :showPreview="false" :infiniteScroll="false" :i18n="emojiI18n"
                set="apple" @select="handlerEmoji" />
</template>

<script>
import data from 'emoji-mart-vue-fast/data/all.json';
import 'emoji-mart-vue-fast/css/emoji-mart.css'
import { Picker, EmojiIndex } from 'emoji-mart-vue-fast/src';
export default {
 components: { Picker, EmojiIndex },
    data() {
        return {
            editorValue: "",
            emojiOpen: false,
            emojiI18n: {
                search: '搜索',
                notfound: 'No Emoji Found',
                categories: {
                    search: '搜索結(jié)果',
                    recent: '經(jīng)常使用',
                    smileys: '表情與情感',
                    people: '人物與身體',
                    nature: '動(dòng)物與自然',
                    foods: '食物與飲料',
                    activity: '活動(dòng)',
                    places: '旅行與地理',
                    objects: '物品',
                    symbols: '符號(hào)標(biāo)志',
                    flags: '旗幟',
                    custom: 'Custom',
                    joy: '哭笑'
                }
            },
        }
    },
 computed: {
        emojiIndex() {
            return new EmojiIndex(data);
        }
    },
 methods: {
  // 選中emoji方法
        handlerEmoji(event) {
            console.log(event);
        },
 }
}
</script>