在vue项目如何使用Emoji表情

文章目录

1、直接使用html的 Emoji 字符集

2、 font-awesome 图标

3、v-emoji-picker

4、vue3-emoji-picker

5、vue-emoji

主要介绍了在vue项目中，如何使用emoji表情，包括：font-awesome 图标、v-emoji-picker、vue-emoji等emoji表情库。

1、直接使用html的 Emoji 字符集

使用：

效果：

更多参考：https://www.runoob.com/charsets/ref-emoji.html

2、 font-awesome 图标

安装：npm i font-awesome

在项目主入口引入样式文件（例：vue3项目main.ts）：

import 'font-awesome/css/font-awesome.css';

使用示例：

更多参看：https://www.runoob.com/font-awesome/fontawesome-icons-webapp.html

3、v-emoji-picker

安装: npm i v-emoji-picker

事件

@select - 选中表情时触发

@changeCategory - 切换分类时触发

属性

customEmojis: Array, // 默认：[]，自定义表情符号数组

customCategories: Array, // 默认：[]，自定义分类数组

limitFrequently: number, // 默认：15，频繁使用的表情限制数量

emojisByRow: number, // 默认：5，每行的表情数

continuousList: boolean, // 默认：false，是否连续滚动列表

emojiSize: number, // 默认：32，表情大小

emojiWithBorder: boolean, // 默认：true，表情是否有边框

showSearch: boolean, // 默认：true，是否显示搜索功能

showCategories: boolean, // 默认：true，是否显示分类选项

dark: boolean, // 默认：false，暗黑模式

initialCategory: string, // 默认："Peoples"，初始类别

exceptCategories: Array, // 排除的类别数组，默认：[]

exceptEmojis: Array