使用Vue3实现输入emoji表情

Vue 3 Emoji 介绍

一款简单的 ，还算好看的，基于Vue3编写的表情选择组件。

Vue 3 Emoji 功能

• 集成文本框 你可以利用双向绑定来获取数据
• 支持自定义配置 可以自定义表情框的大小
• 支持了emoji全量数据以及部分数据的选择
• 支持两种不同的主题
• 支持最近使用表情选项卡
• 支持keep模式 可以不重复渲染
• 支持自定义选项卡 你可以挑选自己喜欢的emoji并放入选项卡
• 支持自定义size 你可以不使用我定义的尺寸，按照自己所需进行尺寸的调整
• 支持自定义主题 你可以通过传入自定义的样式来设置相应的颜色和风格

效果描述

页面当中有一个输入框，一个表情按钮，和一个确认按钮。

点击表情按钮会弹出表情选择框，然后可以点击想要的表情进行选择，选择后会将内容添加到输入框中，点击确认按钮之后会将内容，显示在下方【要提交的内容为】所展示的地方的后面。

效果展示

代码实现

第一步：安装 vue3-emoji

yarn add vue3-emoji

# 或者

npm install vue3-emoji

第二步：在所需要使用的页面进行引入并使用 

<template>
  <div class="box">
    <div class="input">
      <el-input v-model="value" style="width: 240px" placeholder="请输入内容" />
      <!-- 表情选择器，支持点击添加表情 -->
      <V3Emoji
        @click-emoji="clickEmoji"
        :recent="true"
        size="small"
        :options-name="optionsName"
      ></V3Emoji>
    </div>
    <el-button type="primary" @click="submit">确认</el-button>
  </di