Vue - 详细介绍v-emoji-picker、vue3-emoji-picker和vue3-emoji表情包组件

Vue - 详细介绍v-emoji-picker、vue3-emoji-picker和vue3-emoji表情包组件

本篇详细介绍在Vue2.x和Vue3.x中使用（emoji）表情包组件，通过提供直观、易于使用的emoji表情选择功能，增强用户在使用Web应用时的表达力和互动性。

1. v-emoji-picker（vue2）

安装：

npm install v-emoji-picker

yarn add v-emoji-picker

引用（在main.js）：

import Vue from 'vue'
import App from './App.vue'
import VEmojiPicker from 'v-emoji-picker';

Vue.config.productionTip = false

Vue.use(VEmojiPicker);

new Vue({
  render: h => h(App),
}).$mount('#app')

使用：

<template>
  <div id="app">
     <span class="title">v-emoji-picker</span>
     <VEmojiPicker @select="onSelectEmoji" />
     <span class="text">输出：{{text}}</span>
  </div>
</template>

<script>
export default {
  data(){
    return{
      text:''
    }
  },
  methods: {
    onSelectEmoji(emoji) {
      this.text += emoji.data
    },
  }
};
</script>

属性（Props）：

{
  customEmojis: Array<IEmoji>, // 默认：[]，自定义表情符号数组
  customCategories: Array<ICategory>, // 默认：[]，自定义分类数组
  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<ICategory>, // 排除的类别数组，默认：[]
  exceptEmojis: Array<IEmoji>, // 排除的表情符号数组，默认：[]
  i18n: Object, // 国际化对象
}

事件（Events）：

{
  select: '选中表情时触发',
  changeCategory: '切换分类时触发'
}

2. vue3-emoji-picker（vue3）

安装：

重要提示： 如果使用 TypeScript，请在 .d.ts 文件中添加 declare module ‘vue3-emoji-picker’.

npm install vue3-emoji-picker

yarn add vue3-emoji-picker

引用并使用：

<template>
  <div class="Com_view">
    <div class="emoje_1 box_emoje">
      <span>vue3-emoji-picker</span>
      <EmojiPicker :native="true" @select="onVue3EmojiPicker" />
      <span>输出：{{ text_1 }}</span>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import EmojiPicker from "vue3-emoji-picker";
import "vue3-emoji-picker/css";

const text_1 = ref("");

const onVue3EmojiPicker = (emoji) => {
  text_1.value += emoji.i;
  /* 结果示例
  { 
      i: "ernes", // 表情图标
      n: ["kissing face"], 
      r: "1f61a", // 包含肤色
      t: "neutral", // 肤色
      u: "1f61a" // 不带肤色
  }
  */
};
</script>

属性（Props）：

属性	类型	默认值	描述
native	bool	false	是否使用系统原生表情代替图片。
hide-search	bool	true	显示或隐藏搜索输入框。
hide-group-icons	bool	false	显示或隐藏分组图标。
hide-group-names	bool	false	显示或隐藏分组名称。
disable-sticky-group-names	bool	false	禁用分组名称的固定位置显示。
disable-skin-tones	bool	false	禁用肤色选择。
disabled-groups	arr	[]	禁用特定的分组或类别。参见可用分组。
group-names	obj	{}	更改任意分组名称。参见默认分组名称。
static-texts	obj	{}	参考静态文本选项表。
pickerType	str	‘’	选择选择器类型，可能的选项：input、textarea（弹出输入框或文本区域），‘’。
mode	str	‘insert’	选择插入模式，可能的选项：prepend、insert、append。
offset	int	6	设置表情弹窗的偏移量。
additional-groups	obj	{}	添加自定义分组，键为从蛇形命名转换过来的分组名称。
group-order	arr	[]	覆盖分组的排序。
group-icons	obj	{}	通过在键上传递 SVG 来覆盖分组图标。
display-recent	bool	false	显示最近使用的表情。
theme	str	‘light’	可选值：‘light’、‘dark’、‘auto’。

静态文本选项 (props[‘static-texts’])：

属性	类型	默认值	描述
placeholder	字符串	“Search emoji”	更新搜索输入框的占位符文本。
skinTone	字符串	“Skin tone”	底部肤色按钮的文本。

示例： :static-texts=“{ placeholder: ‘搜索单元格’}”

事件与回调：

方法名	示例	描述
@select	<EmojiPicker @select=“onSelectEmoji” />	当选择/点击一个表情时触发此事件，事件回调的第一个参数接收所选的表情。
@update:text	EmojiPicker @update:text=“onChangeText” />	当输入文本发生变化时触发此事件，事件回调的第一个参数接收改变后的文本。

默认分组名称：

{
  "smileys_people": "微笑与人物",
  "animals_nature": "动物与自然",
  "food_drink": "食物与饮料",
  "activities": "活动",
  "travel_places": "旅行与地点",
  "objects": "物体",
  "symbols": "符号",
  "flags": "旗帜"
}

3. vue3-emoji（vue3）

安装：

npm install vue3-emoji

yarn add vue3-emoji

引用并使用：

<template>
  <div class="Com_view">
    <div class="emoje_2 box_emoje">
      <span>vue3-emoji</span>
      <V3Emoji
        @click-emoji="onVue3Emoje"
        :recent="true"
      ></V3Emoji>
      <span>输出：{{ text_2 }}</span>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import V3Emoji from "vue3-emoji";
import "vue3-emoji/dist/style.css";

const text_2 = ref("");

const onVue3Emoje = (val) => {
  text_2.value += val;
};
</script>

报错：Cannot read properties of undefined (reading ‘el’) Cannot set properties of null (setting ‘__vnode’)
解决方法：最新版本3.0.0无该问题，该错误属于2.1.8版本BUG，但能用；您可以更新到最新版本或回退到2.0.0版本即可：npm install vue3-emoji@2.0.0

属性（Props）:

配置名	类型	默认值	描述
v-model	string	‘’	可以进行数据的双向绑定（需要开启textArea）
size	‘mid’、‘small’、‘big’、	mid	用于调整整体大小
theme	‘dark’、‘default’	default	主题切换 支持亮色和暗黑主题
manualClose	boolean	false	设置为true可以手动控制弹出框的关闭
optionsName	-	{}	翻译原有板块名字
disableGroup	string	[]	禁用某些板块
defaultSelect	string	‘Smileys & Emotion’	默认选中板块，注意：如果指定了新名字，需要传入新名字
recent	boolean	false	开启最近使用emoji功能
fulldata	boolean	false	如果指定为true 那么clickEmoji事件将会传出一个EmojiItem类型的对象
keep	boolean	false	如果指定为true 那么表情框关闭将不会销毁组件
textArea	boolean	false	开启文本框功能选项
textAreaOption	Emoji.TextAreaOptions	见类型定义	你可以定义textarea的一些选项
fixPos	六个值	FixType	可以传入一个值来固定表情框的位置
customSize	Emoji.CustomSize	见类型定义	如果指定了相应的自定义大小，那么会将pollup表情选择框的大小重置，没有指定的将使用相应size的默认值
customTheme	Emoji.CustomTheme	见类型定义	自定义主题颜色，支持五个选项的配置，没有指定的依旧会使用指定的theme的默认值
customIcon	Emoji.CustomIcon	见类型定义	自定义tab切换栏的显示
customTab	Emoji.ObjectItem	见类型定义	你可以传入一个对象来指定一个新的选项卡，这个选项卡内可以放置你需要的emoji
unicodeVersion	number	11	在某些设备上可能不能兼容高版本的emojiunicode
skin	-	none	暂时无法很好的支持

fixPos = ‘upleft’ | ‘upright’ | ‘upcenter’ | ‘downleft’ | ‘downright’ | ‘downcenter’; //控制表情弹出框的位置

可自定义按钮：

  <V3Emoji
        @click-emoji="onVue3Emoje"
        :recent="true">	
        <div class="my-btn">
           <button>表情包按钮</button>
        </div>
   </V3Emoji>

不同弹窗尺寸（big、small、mid）：

<template>
  <div>
      <V3Emoji size="big" />
      <V3Emoji size="small" />
      <V3Emoji size="mid" />
  </div>
</template>

支持了暗黑主题：

<template>
  <div>
      <V3Emoji theme="dark" />
  </div>
</template>

支持了最近常用表情：

<template>
  <div>
      <V3Emoji :recent="true" />
  </div>
</template>

通过default-select指定默认的选项卡：

<template>
  <div>
  	  <!--默认tab-->
      <V3Emoji default-select="Animals & Nature" />
      <!--设为默认tab （tab名） -->
      <V3Emoji default-select="Activities" :recent="true" />
  </div>
</template>

fulldata
你可以通过指定fulldata来接受完整的emojiItem

<V3Emoji
         :disable-group="disableGroup"
         @click-emoji="appendText"
         :options-name="optionsName"
         :recent="true"
         :fulldata="true"
         />
//会接受到该参数
{ "emoji": "🧨", "skin_tone_support": false, "name": "firecracker", "slug": "firecracker", "unicode_version": "11.0", "emoji_version": "11.0" }

optionsName
你可以通过传入optionsName来自定义各个板块的名字

<script setup>
const optionsName = {
 'Smileys & Emotion': '笑脸&表情',
 'Food & Drink': '食物&饮料',
 'Animals & Nature': '动物&自然',
 'Travel & Places': '旅行&地点',
 'People & Body': '人物&身体',
 Objects: '物品',
 Symbols: '符号',
 Flags: '旗帜',
 Activities: '活动'
};
</script>
<template>
	<V3Emoji :options-name="optionsName"/>
</template>

disableGroup
同时，你也可以传入disableGroup来禁用相应的板块

<script setup lang="ts">
import V3Emoji from './components/V3Emoji.vue';
const inputText = ref('');
const appendText = (val: string) => {
  inputText.value += val;
};
const optionsName = {
  'Smileys & Emotion': '笑脸&表情',
  'Food & Drink': '食物&饮料'
};
const disableGroup = ['食物&饮料'];
//禁用了食物&饮料的选项卡
</script>

<template>
	<V3Emoji :disable-group="disableGroup" :options-name="optionsName" />
</template>

keep
如果你需要在使用完表情框后保持原本打开的状态，可以指定keep来开启保持状态

<V3Emoji :keep="true"/>

fixPos
通过fixpos 可以固定表情弹出框的位置，默认情况下表情弹出框会随着滚动条和屏幕上下移动而变化

<V3Emoji fix-pos="upright" // or 'upcenter'| 'upleft' |'downright' |'downcenter'|'downleft' />

customSize
利用customSize 你可以自定义表情框的大小

<script setup lang="ts">
const customSize= {
  'V3Emoji-width': '300px',
  'V3Emoji-height': '20rem',
  'V3Emoji-fontSize': '1rem',
  'V3Emoji-itemSize': '50px'
};
</script>
<template>
<div class="test">
    <V3Emoji size="big" :custom-size="customSize" />
    <p>customSize</p>
</div>
</template>

customTab
如果你需要自己自定义一些emoji并且将其放到新的板块中，你可以这么做

<script setup lang="ts">
const customTab= {
  我的自定义板块: [
    {
      emoji: '🍔',
      name: '汉堡包'
    },
    {
      emoji: '🍟',
      name: '薯条'
    }
  ]
};
</script>
<template>
<div class="test">
    <V3Emoji  :customTab="customTab" default-select="我的自定义板块" />
    <p>customTab</p>
</div>
</template>

customIcon
本组件会默认读取数据中的第一个emoji作为默认的icon 你可以通过customIcon来定义下方选择的Icon

<script setup lang="ts">
const customIcon = {
  'Smileys & Emotion': '😚',
  'Food & Drink': '🍔',
  'Animals & Nature': '🐶',
  Activities: '🎉',
  'Travel & Places': '🚗',
  Objects: '💰'
};
</script>
<template>
<div class="test">
    <V3Emoji  :customIcon="customIcon"  />
    <p>customIcon</p>
</div>
</template>

customTheme
本组件提供了自定义的主题功能，你可以自定义主题色

<script setup lang="ts">
const customTheme= {
  'V3Emoji-hoverColor': '#ff5500',
  'V3Emoji-activeColor': '#99ff77',
  'V3Emoji-shadowColor': 'rgba(255,255,0,0.5)',
  'V3Emoji-backgroundColor': '#000000',
  'V3Emoji-fontColor': '#ffffff'
};
</script>
<template>
<div class="test">
    <V3Emoji size="mid" :custom-theme="customTheme" />
    <p>customTheme</p>
</div>
</template>

方法（Function）:

方法名	类型	说明
closePop	()=>void	关闭表情弹出框

事件（Events）

事件名	事件类型	说明
clickEmoji	(val:string	EmojiItem)=>void
close	void	表情框关闭时触发的事件
changeText	(val:string)=>void	用于接受文本框改变时触发的事件

类型定义以及默认值（@types）

declare namespace Emoji {
  interface EmojiItem {
    emoji: string;
    name: string;
    skin_tone_support?: boolean;
    unicode_version?: string;
    emoji_version?: string;
    skin_tone_support_unicode_version?: string;
  }
  interface ObjectItem {
    [key: string]: EmojiItem[];
  }
  interface CustomItem {
    src: string;
    name: string;
  }
  interface JsonData {
    [key: string]: any;
  }
  interface TextAreaOptions {
    placeholder?: string;
    rows?: number;
    cols?: number;
    resize?: StyleValue;
  }
  interface CustomSize {
    [key: string]: string;
    'V3Emoji-width': string; // emoji的宽度
    'V3Emoji-height': string; // height is optional
    'V3Emoji-fontSize': string; //emoji的大小
    'V3Emoji-itemSize': string; //每一项的大小
  }
  interface CustomIcon {
    [key: string]: string;
  }
   type FixType = 'upleft' | 'upright' | 'upcenter' | 'downleft' | 'downright' | 'downcenter';
  interface CustomTheme {
    [key: string]: string;
    'V3Emoji-backgroundColor': string;
    'V3Emoji-hoverColor': string;
    'V3Emoji-activeColor': string;
    'V3Emoji-shadowColor': string;
  }
}

参考设置/example options
通过以下设置将所有选项卡变成中文

<script>
    const optionsName = {
        'Smileys & Emotion': '笑脸&表情',
        'Food & Drink': '食物&饮料',
        'Animals & Nature': '动物&自然',
        'Travel & Places': '旅行&地点',
        'People & Body': '人物&身体',
        Objects: '物品',
        Symbols: '符号',
        Flags: '旗帜',
        Activities: '活动'
    };
</script>

<template>
	<V3Emoji :options-name="optionsName"/>
</template>

上面介绍三个Vue的emoji表情包组件自定义比较高，可根据项目需求去修改，且安装使用流程简单明了，有需要的小伙伴们可以点点赞收藏一下！

V-Emoji-Picker：V-Emoji-Picker 项目地址
vue3-emoji-picker：vue3-emoji-picker 项目地址
vue3-emoji：vue3-emoji 项目地址