vue3-emoji使用

vue3-emoji支持很多功能

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

如何使用：

1：使用/Usage

使用npm

npm install vue3-emoji

使用yarn：

yarn add vue3-emoji

 2：基本使用

<script setup>
import V3Emoji from 'vue3-emoji'
import 'vue3-emoji/dist/style.css'
</script>

<template>
  <div>
    <V3Emoji />
  </div>
</template>

在main.js中

import V3Emoji from 'vue3-emoji'
app.use(V3Emoji)

3:添加入指定的输入框中

let textarea = ref("")
.....
const clickEmoji = (val) => {
  textarea.value += val;
};
....
<V3Emoji
                  @click-emoji="clickEmoji"
                  :options-name="customIcon"
                  :recent="true"
                  :custom-size="customSize"
              >

 效果图

4:属性介绍

recent	boolean	false	开启最近使用emoji功能
fulldata	boolean	false	如果指定为true 那么clickEmoji事件将会传出一个EmojiItem类型的对象
textArea	boolean	false	开启文本框功能选项
customTheme	Emoji.CustomTheme	见类型定义	自定义主题颜色，支持五个选项的配置，没有指定的依旧会使用指定的theme的默认值
customIcon	Emoji.CustomIcon	见类型定义	自定义tab切换栏的显示
customSize	Emoji.CustomSize	见类型定义	如果指定了相应的自定义大小，那么会将pollup表情选择框的大小重置，没有指定的将使用相应size的默认值

//官网 Vue3-emoji NPM | npm.io  很简单可以自己去看看