使用Vue3实现输入emoji 表情包

最近在做项目的时候，需要实现一个在Vue3项目里输入emoji表情包的功能。这过程中可是踩了不少坑，现在把我的经验分享出来，希望能帮到大家，让大家少走弯路。

前期准备

首先，咱得明确要用到的工具。在Vue3里实现emoji输入，有个很不错的库叫 vue-emoji-picker。在开始之前，得先安装这个库，使用npm的话，就执行下面这个命令：

npm install vue-emoji-picker

要是用yarn，那就用这个：

yarn add vue-emoji-picker

## 引入与使用
安装好之后，就要在项目里引入并使用它了。我一般是在组件里这么干的：

```vue
<template>
  <div>
    <!-- 这里是输入框 -->
    <input v-model="inputValue" placeholder="输入内容" />
    <!-- 引入emoji选择器 -->
    <vue-emoji-picker @emoji="addEmojiToInput" />
  </div>
</template>

<script setup>
import { ref } from 'vue';
// 引入emoji选择器组件
import VueEmojiPicker from 'vue-emoji-picker';

// 定义输入框的值
const inputValue = ref('');

// 处理选择emoji的函数
const addEmojiToInput = (emoji) => {
  inputValue.value += emoji;
};
</script>

样式调整

有时候，默认的样式可能不符合项目的需求，这时候就得自己调整样式了。vue-emoji-picker 提供了一些样式类，我们可以根据这些类来修改样式。比如说，要调整emoji选择器的大小，可以这么写：

.vue-emoji-picker {
  width: 300px;
  height: 400px;
}

踩坑与避坑

• 版本兼容性问题：要注意 vue-emoji-picker 和Vue3的版本兼容性。有时候版本不匹配，可能会出现各种奇怪的问题。所以在安装的时候，最好查看一下官方文档，选择合适的版本。
• 样式冲突：要是项目里已经有了一些全局样式，可能会和 vue-emoji-picker 的样式冲突。这时候可以用更具体的选择器或者使用CSS模块化来避免冲突。

通过上面这些步骤，就能在Vue3项目里实现输入emoji表情包的功能啦。希望我的分享能对大家有帮助，要是在使用过程中遇到什么问题，欢迎一起交流！