Four solutions for Vue3 to implement Emoji expressions

Use input method to enter expression

Textarea supports emoticons that accept input method. Enter "smile" directly in macOs, and the expression of 😊 will be printed directly, which is no different from the text.

However, the bad thing about this solution is that you can only lose by hand and cannot achieve the effect of choice.

Enter emoticons using Unicode encoding

There is a coding interval for the corresponding expression in Unicode encoding, located in the Basic Multilingual Plane (BMP), and the code points are between U+1F600 and U+1F6FF.

Because textarea is currently used as the input box, Unicode encoding is displayed in plain text in the input box, which leads to users being likely to make mistakes.

In addition, the display area of ​​the session information is now also a template syntax that is used directly. You need to use v-html in the display area to display the expression normally, otherwise it will be plain text.

But this pattern based on Unicode encoding is very lightweight and does not require additional libraries and special operations.

Use custom content to correspond

Use custom content to correspond to it, this should be the emoticon solution of QQ (although I have never read the source code, it is purely guess).

When the input box of QQ is entered using "/", the corresponding emoticon prompt will pop up, and it will become an emoticon after confirmation. This is likely to have undergone a conversion to a specific encoding.

Similarly, we can also use this scheme to convert, and we can use specific symbols to parse them in the system to generate expressions.

For example, if you write "[wx]" in the system, it means yes 😊 . When the input box hears that "[wx]" exists through the input event, the code will automatically convert it to 😊.

Insert a look and then implement Unicode encoding in this way.

Use the emoji-mart-vue plugin

Using plug-ins is the most cost-effective solution. This plug-in is equivalent to directly integrating the input emoji without modifying the original code. There is no difference in the input of the inserted emoji emoji input method.

The only possible flaw may be that it is impossible to customize it.

Install

npm install emoji-mart-vue-fast

use

<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/';
import 'emoji-mart-vue-fast/css/'
import { Picker, EmojiIndex } from 'emoji-mart-vue-fast/src';
export default {
 components: { Picker, EmojiIndex },
    data() {
        return {
            editorValue: "",
            emojiOpen: false,
            emojiI18n: {
                search: 'search',
                notfound: 'No Emoji Found',
                categories: {
                    search: 'Search results',
                    recent: 'Frequently used',
                    smileys: 'Expressions and emotions',
                    people: 'People and Body',
                    nature: 'Animals and Nature',
                    foods: 'Food and Drink',
                    activity: 'Activity',
                    places: 'Travel and Geography',
                    objects: 'thing',
                    symbols: 'Symbol logo',
                    flags: 'banner',
                    custom: 'Custom',
                    joy: 'Hidden and cry'
                }
            },
        }
    },
 computed: {
        emojiIndex() {
            return new EmojiIndex(data);
        }
    },
 methods: {
  // Select the emoji method        handlerEmoji(event) {
            (event);
        },
 }
}
</script>

in conclusion

If you want to customize, you can try the third solution, the ready-made fourth solution.

This is the end of this article about the four solutions for Vue3 to implement Emoji emoticons. For more related content on Vue3 to implement Emoji emoticons, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!