使用Vue3实现输入emoji表情

学前端的小朱

已于 2024-05-29 13:45:16 修改

阅读量1.4k

点赞数 38

文章标签： vue.js elementui javascript

于 2024-05-29 13:44:20 首次发布

本文链接：https://blog.csdn.net/qq_45569925/article/details/139291012

版权

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>
  </div>
  <p>要提交的内容为：{{ submitvalue }}</p>
</template>

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

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

<style lang="scss" scoped>
.box,
.input {
  display: flex;
  align-items: center;
}
.input {
  border: 1px solid #f0f0f0;
  border-radius: 5px;
  ::v-deep(.el-input__wrapper) {
    box-shadow: none;
    background: #f0f0f0;
  }
  .V3Emoji-module__emoji-item___aCxWs {
    width: fit-content;
  }
}
.input,
p {
  margin: 50px;
}
</style>

vue3-emoji 配置项

属性

配置名	配置类型	默认值	说明/备注
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	upleft upright upcenter downleft downright downcenter	FixType	可以传入一个值来固定表情框的位置
customSize	Emoji.CustomSize	见类型定义	如果指定了相应的自定义大小，那么会将pollup表情选择框的大小重置，没有指定的将使用相应size的默认值
customTheme	Emoji.CustomTheme	见类型定义	自定义主题颜色，支持五个选项的配置，没有指定的依旧会使用指定的theme的默认值
customIcon	Emoji.CustomIcon	见类型定义	自定义tab切换栏的显示
customTab	Emoji.ObjectItem	见类型定义	你可以传入一个对象来指定一个新的选项卡，这个选项卡内可以放置你需要的emoji
unicodeVersion	number	11	在某些设备上可能不兼容高版本的emojiunicode
skin		none	暂时无法很好的支持

方法

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

事件

事件名	事件类型	说明
clickEmoji	(val: string \| EmojiItem) => void	点击emoji触发的事件，可以通过@clickEmoji来接收选择的emoji
close	void	表情框关闭时触发的事情
changeText	(val: string) => void	用于接受文本框改变时触发的事件

类型定义及默认值

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;
  }
}

//SizeData.json
{
    "small": {
        "V3Emoji-width": "300px",
        "V3Emoji-height": "200px",
        "V3Emoji-fontSize": "14px",
        "V3Emoji-itemSize": "20px"
    },
    "mid": {
        "V3Emoji-width": "500px",
        "V3Emoji-height": "300px",
        "V3Emoji-fontSize": "16px",
        "V3Emoji-itemSize": "30px"
    },
    "big": {
        "V3Emoji-width": "800px",
        "V3Emoji-height": "400px",
        "V3Emoji-fontSize": "20px",
        "V3Emoji-itemSize": "36px"
    }
}
//ThemeData.json
{
    "dark":{
        "V3Emoji-backgroundColor":"#000",
        "V3Emoji-fontColor":"#fff",
        "V3Emoji-hoverColor":"#909090",
        "V3Emoji-activeColor":"#909090",
        "V3Emoji-shadowColor":"rgba(255,255,255,.2)"
    },
    "default":{
        "V3Emoji-backgroundColor":"#fff",
        "V3Emoji-fontColor":"#000",
        "V3Emoji-hoverColor":"#e7e7e7",
        "V3Emoji-activeColor":"#b6b6b6",
        "V3Emoji-shadowColor":"rgba(0,0,0,.4)"
    }
}

更多的使用案例可以去它的npm上去查看 Vue3-emoji NPM | npm.io