vue3 emoji表情

已于 2024-03-21 08:29:53 修改
阅读量639 收藏
点赞数 5
分类专栏： vue 文章标签： vue.js
于 2023-09-18 16:46:29 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_59631482/article/details/132985549
版权

表情文件 

{
	"微笑": {
		"cn": "微笑",
		"zb": "Smile",
		"emoji": "🙂"
	},
	"撇嘴": {
		"cn": "撇嘴",
		"zb": "Grimace",
		"emoji": "😦"
	},
	"色": {
		"cn": "色",
		"zb": "Drool",
		"emoji": "😍"
	},
	"发呆": {
		"cn": "发呆",
		"zb": "Scowl",
		"emoji": "😍"
	},
	"得意": {
		"cn": "得意",
		"zb": "CoolGuy",
		"emoji": "😎"
	},
	"流泪": {
		"cn": "流泪",
		"zb": "Sob",
		"emoji": "😭"
	},
	"害羞": {
		"cn": "害羞",
		"zb": "Shy",
		"emoji": "😊"
	},
	"闭嘴": {
		"cn": "闭嘴",
		"zb": "Silent",
		"emoji": "😷"
	},
	"睡": {
		"cn": "睡",
		"zb": "Sleep",
		"emoji": "😴"
	},
	"大哭] ": {
		"cn": "大哭] ",
		"zb": "Cry] ",
		"emoji": "😡"
	},
	"尴尬": {
		"cn": "尴尬",
		"zb": "Awkward",
		"emoji": "😡"
	},
	"发怒": {
		"cn": "发怒",
		"zb": "Angry",
		"emoji": "😛"
	},
	"调皮": {
		"cn": "调皮",
		"zb": "Tongue",
		"emoji": "😀"
	},
	"呲牙": {
		"cn": "呲牙",
		"zb": "Grin",
		"emoji": "😯"
	},
	"惊讶": {
		"cn": "惊讶",
		"zb": "Surprise",
		"emoji": "🙁"
	},
	"难过": {
		"cn": "难过",
		"zb": "Frown",
		"emoji": "😎"
	},
	"酷": {
		"cn": "酷",
		"zb": "Ruthless",
		"emoji": "😨"
	},
	"冷汗": {
		"cn": "冷汗",
		"zb": "Blush",
		"emoji": "😱"
	},
	"抓狂": {
		"cn": "抓狂",
		"zb": "Scream",
		"emoji": "😵"
	},
	"吐] ": {
		"cn": "吐",
		"zb": "Puke",
		"emoji": "😋"
	},
	"愉快": {
		"cn": "愉快",
		"zb": "Joyful",
		"emoji": "🙄"
	},
	"白眼": {
		"cn": "白眼",
		"zb": "Slight",
		"emoji": "🙄"
	},
	"傲慢": {
		"cn": "傲慢",
		"zb": "Smug",
		"emoji": "😋"
	},
	"饥饿": {
		"cn": "饥饿",
		"zb": "Hungry",
		"emoji": "😪"
	},
	"困": {
		"cn": "困",
		"zb": "Drowsy",
		"emoji": "😫"
	},
	"惊恐": {
		"cn": "惊恐",
		"zb": "Panic",
		"emoji": "😓"
	},
	"流汗": {
		"cn": "流汗",
		"zb": "Sweat",
		"emoji": "😃"
	},
	"憨笑": {
		"cn": "憨笑",
		"zb": "Laugh",
		"emoji": "😃"
	},
	"悠闲] ": {
		"cn": "悠闲",
		"zb": "Commando",
		"emoji": "😆"
	},
	"奋斗": {
		"cn": "奋斗",
		"zb": "Determined",
		"emoji": "😆"
	},
	"咒骂": {
		"cn": "咒骂",
		"zb": "Scold",
		"emoji": "😆"
	},
	"疑问": {
		"cn": "疑问",
		"zb": "Shocked",
		"emoji": "😆"
	},
	"嘘": {
		"cn": "嘘",
		"zb": "Shhh",
		"emoji": "😵"
	},
	"晕": {
		"cn": "晕",
		"zb": "Dizzy",
		"emoji": "😆"
	},
	"疯了": {
		"cn": "疯了",
		"zb": "Tormented",
		"emoji": "😆"
	},
	"衰": {
		"cn": "衰",
		"zb": "Toasted",
		"emoji": "😆"
	},
	"骷髅": {
		"cn": "骷髅",
		"zb": "Skull",
		"emoji": "💀"
	},
	"敲打": {
		"cn": "敲打",
		"zb": "Hammer",
		"emoji": "😬"
	},
	"再见] ": {
		"cn": "再见] ",
		"zb": "Wave] ",
		"emoji": "😘"
	},
	"擦汗": {
		"cn": "擦汗",
		"zb": "Speechless",
		"emoji": "😆"
	},
	"抠鼻": {
		"cn": "抠鼻",
		"zb": "NosePick",
		"emoji": "😆"
	},
	"鼓掌": {
		"cn": "鼓掌",
		"zb": "Clap",
		"emoji": "👏"
	},
	"糗大了": {
		"cn": "糗大了",
		"zb": "Shame",
		"emoji": "😆"
	},
	"坏笑": {
		"cn": "坏笑",
		"zb": "Trick",
		"emoji": "😆"
	},
	"左哼哼": {
		"cn": "左哼哼",
		"zb": "Bah！L",
		"emoji": "😆"
	},
	"右哼哼": {
		"cn": "右哼哼",
		"zb": "Bah！R",
		"emoji": "😆"
	},
	"哈欠": {
		"cn": "哈欠",
		"zb": "Yawn",
		"emoji": "😆"
	},
	"鄙视": {
		"cn": "鄙视",
		"zb": "Pooh-pooh",
		"emoji": "😆"
	},
	"委屈] ": {
		"cn": "委屈",
		"zb": "Shrunken",
		"emoji": "😆"
	},
	"快哭了": {
		"cn": "快哭了",
		"zb": "TearingUp",
		"emoji": "😆"
	},
	"阴险": {
		"cn": "阴险",
		"zb": "Sly",
		"emoji": "😆"
	},
	"亲亲": {
		"cn": "亲亲",
		"zb": "Kiss",
		"emoji": "😘"
	},
	"吓": {
		"cn": "吓",
		"zb": "Wrath",
		"emoji": "😓"
	},
	"可怜": {
		"cn": "可怜",
		"zb": "Whimper",
		"emoji": "😆"
	},
	"菜刀": {
		"cn": "菜刀",
		"zb": "Cleaver",
		"emoji": "🔪"
	},
	"西瓜": {
		"cn": "西瓜",
		"zb": "Watermelon",
		"emoji": "🍉"
	},
	"啤酒": {
		"cn": "啤酒",
		"zb": "Beer",
		"emoji": "🍺"
	},
	"篮球": {
		"cn": "篮球",
		"zb": "Basketball",
		"emoji": "🏀"
	},
	"乒乓] ": {
		"cn": "乒乓",
		"zb": "PingPong",
		"emoji": "⚪"
	},
	"咖啡": {
		"cn": "咖啡",
		"zb": "Coffee",
		"emoji": "☕"
	},
	"饭": {
		"cn": "饭",
		"zb": "Rice",
		"emoji": "🍚"
	},
	"猪头": {
		"cn": "猪头",
		"zb": "Pig",
		"emoji": "🐷"
	},
	"玫瑰": {
		"cn": "玫瑰",
		"zb": "Rose",
		"emoji": "🌹"
	},
	"凋谢": {
		"cn": "凋谢",
		"zb": "Wilt",
		"emoji": "🌹"
	},
	"嘴唇": {
		"cn": "嘴唇",
		"zb": "Lips",
		"emoji": "👄"
	},
	"爱心": {
		"cn": "爱心",
		"zb": "Heart",
		"emoji": "💗"
	},
	"心碎": {
		"cn": "心碎",
		"zb": "BrokenHeart",
		"emoji": "💔"
	},
	"蛋糕": {
		"cn": "蛋糕",
		"zb": "Cake",
		"emoji": "🎂"
	},
	"闪电] ": {
		"cn": "闪电] ",
		"zb": "Lightning",
		"emoji": "⚡"
	},
	"炸弹": {
		"cn": "炸弹",
		"zb": "Bomb",
		"emoji": "💣"
	},
	"刀": {
		"cn": "刀",
		"zb": "Dagger",
		"emoji": "🗡"
	},
	"足球": {
		"cn": "足球",
		"zb": "Soccer",
		"emoji": "⚽"
	},
	"瓢虫": {
		"cn": "瓢虫",
		"zb": "Ladybug",
		"emoji": "🐞"
	},
	"便便": {
		"cn": "便便",
		"zb": "Poop",
		"emoji": "💩"
	},
	"月亮": {
		"cn": "月亮",
		"zb": "Moon",
		"emoji": "🌙"
	},
	"太阳": {
		"cn": "太阳",
		"zb": "Sun",
		"emoji": "☀"
	},
	"礼物": {
		"cn": "礼物",
		"zb": "Gift",
		"emoji": "🎁"
	},
	"拥抱": {
		"cn": "拥抱",
		"zb": "Hug",
		"emoji": "🤗"
	},
	"强] ": {
		"cn": "强",
		"zb": "ThumbsUp",
		"emoji": "👍"
	},
	"弱": {
		"cn": "弱",
		"zb": "ThumbsDown",
		"emoji": "👎"
	},
	"握手": {
		"cn": "握手",
		"zb": "Shake",
		"emoji": "👍"
	},
	"胜利": {
		"cn": "胜利",
		"zb": "Peace",
		"emoji": "✌"
	},
	"抱拳": {
		"cn": "抱拳",
		"zb": "Fight",
		"emoji": "✊"
	},
	"勾引": {
		"cn": "勾引",
		"zb": "Beckon",
		"emoji": "✌"
	},
	"拳头": {
		"cn": "拳头",
		"zb": "Fist",
		"emoji": "✊"
	},
	"差劲": {
		"cn": "差劲",
		"zb": "Pinky",
		"emoji": "✌"
	},
	"爱你": {
		"cn": "爱你",
		"zb": "RockOn",
		"emoji": "✌"
	},
	"NO": {
		"cn": "NO",
		"zb": "Nuh-uh",
		"emoji": "✌"
	},
	"OK": {
		"cn": "OK",
		"zb": "OK",
		"emoji": "🙂"
	},
	"嘿哈": {
		"cn": "嘿哈",
		"zb": "Hey",
		"emoji": "🙂"
	},
	"捂脸": {
		"cn": "捂脸",
		"zb": "Facepalm",
		"emoji": "🙂"
	},
	"奸笑": {
		"cn": "奸笑",
		"zb": "Smirk",
		"emoji": "🙂"
	},
	"机智": {
		"cn": "机智",
		"zb": "Smart",
		"emoji": "🙂"
	},
	"皱眉": {
		"cn": "皱眉",
		"zb": "Concerned",
		"emoji": "🙂"
	},
	"耶": {
		"cn": "耶",
		"zb": "Yeah!",
		"emoji": "🙂"
	},
	"吃瓜": {
		"cn": "吃瓜",
		"zb": "Onlooker",
		"emoji": "🙂"
	},
	"加油": {
		"cn": "加油",
		"zb": "GoForIt",
		"emoji": "🙂"
	},
	"汗": {
		"cn": "汗",
		"zb": "Sweats",
		"emoji": "🙂"
	},
	"天啊": {
		"cn": "天啊",
		"zb": "OMG",
		"emoji": "👌"
	},
	"社会社会": {
		"cn": "社会社会",
		"zb": "Respect",
		"emoji": "🙂"
	},
	"旺柴": {
		"cn": "旺柴",
		"zb": "Doge",
		"emoji": "🙂"
	},
	"好的": {
		"cn": "好的",
		"zb": "NoProb",
		"emoji": "🙂"
	},
	"哇": {
		"cn": "哇",
		"zb": "Wow",
		"emoji": "🙂"
	}
}

使用 

<template>
  <div>
    <div v-for="item in emoji">
      <!-- {{item.emoji}} -->
      <!-- <span style='font-size:100px;'>&#128512;</span> -->
      <span style='font-size:100px;'>&#128515;</span>
    </div>
  </div>
</template>

<script setup>
  import emoji from "@/assets/emoji.json"
  console.log(emoji);
  //表情转码  
  let emojis= "😃".codePointAt(0).toString(10)
  console.log(emojis);
</script>

浪漫九州
关注
  • 5
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue - 超详细实现 emoji 表情，安装并使用 v-emoji-picker 表情插件及各种功能，可在光标处插入表情和文字混排（提供了存入后端数据库的转码和解码方案，轻松将文字和表情发送给接口）
王佳斌
07-23 7265
vue emoji，vue通用emoji表情库，vue网页怎么在输入框中选表情，vue项目实现表情包，vue如何实现input框输入emoji表情，vue好用的表情插件库，vue聊天框输入emoji表情，vue显示emoji表情emoji微信表情，vue仿微信emoji表情包，vue表情符插件emoji表情符 表情输入框 类似微信qq的表情，vue使用v-emoji-picker，在vue中使用v-emoji-picker详细使用教程，v-emoji-picker插件怎么将修改search提示变成中文，v-
emoji表情
AaronDroid的博客
02-28 139
/完美解决输入框中不能输入的非法字符。
vue-chat-emoji：vuejs的简单聊天表情符号
02-05
Vue聊天表情符号 vuejs的简单聊天表情符号集成！ 表情符号选择器 输入转换（ hello :birthday_cake:! => hello :birthday_cake: ！） 预习 安装 npm install vue-chat-emoji 用法 使用内部组件 < template> < div xss=removed> < Emoji> </ div> </ template> < script > import { VueChatEmoji , emojis } from ' vue-chat-emoji ' require ( " vue-chat-emoji/dist
emoji-vue：将emoji表情键盘添加到您的vuejs项目
02-04
表情符号 :grinning_face: :beaming_face_with_smiling_eyes: :face_with_tears_of_joy: :rolling_on_the_floor_laughing: :grinning_face_with_big_eyes: :grinning_face_with_smiling_eyes: :grinning_face_with_sweat: :grinning_squinting_face: :winking_face: :smiling_face_with_smiling_eyes: :face_savoring_food: 一个Vue.js项目，实现了一个输入字段插件，允许通过下拉菜单添加表情符号。 安装 :gear_selector: npm i emoji-vue --save 利用 :smiling_face_with_sunglasses: :OK_hand_light_skin_tone: import VueEmoji from 'emoji-vue' //in component
Vue3 使用emoji表情包 emoji-mart-vue-fast
最新发布
weixin_46607967的博客
07-15 451
示例使用了框架的 ipt 和 弹出层 实现聊天框输入的效果非常简单 代码直接照抄即可。
通用emoji表情包与JSON
12-31
通用emoji表情包与JSON
Vue表情输入组件 微信face表情组件
10-17
主要为大家详细介绍了Vue表情输入组件，微信face表情组件，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Vue使用Emoji表情
m0_46627730的博客
12-17 5660
前言 最近做一个简单的聊天网页，既然是聊天了，自然不可避免需要用到表情包啦，其他那些好看的图片表情包我没时间去弄，所以就先弄个emoji的来玩玩。 准备表情包资源 可点击表情包网页去找自己喜欢的表情包来用 这次我用的是下面红色框住的那个表情包 使用表情包 初始化表情列表数据 const emojis = [ '????', '????', '????', '????', '????', '????', '????', '????', '????', '????', '????', '????'
vue 使用emoji表情包
豪先生的博客
08-15 2787
emoji表情包
用vue做一个简单的emoji表情组件
sfyjknvcx的博客
08-13 4102
大家好，我是南宫。最近在项目里，发文字的时候有配上表情的需求，这个需求令我一头雾水，后来通过查资料和参考别人的代码，我做了一个表情组件，下面来分享一下我的思路和过程。 效果大概是这样的。 一、想要显示表情图标，就需要表情素材 这个非常重要，有了素材才有东西展示嘛，我找到的这个素材是json格式的文件，里面的内容大概长这个样子: [ { "codes": "1F600", "char": "????", "name": "grinnin
Vue使用emoji表情包
热门推荐
西洲
07-30 1万+
1.资料库 vue组件库，有多个emoji相关的组件，根据需要选择一个。 vue组件库地址： https://vuejsexamples.com/tag/emoji/ 我选择的是vue-twemoji-picker vue组件地址： https://vuejsexamples.com/a-fast-plug-n-play-twitter-emoji-picker-for-vue/ github地址： https://github.com/kevinfaveri/vue-twemoji-pic
vueemoji基于Vue好用的emoji插件
08-14
vue-emoji基于Vue好用的emoji插件
vue-emoji：vue2.0的emoji组件
02-05
Vue表情符号 基于Vue2.0的emoji插件 安装 yarn add rui-vue-emoji 使用示例 < link rel =" stylesheet " type =" text/css " href =" ./node_modules/vue-emoji-component/dist/vue-emoji.css " > < script...
vue-emoji-box：vue-emoji-box表情选择器
02-05
Vue表情符号盒 目录 示例 代码框 本地运行 git clone https://github.com/ZhanPhty/vue-emoji-box.git cd vue-emoji-box yarn 或 npm install yarn serve 或 npm run serve 插件安装 yarn add vue-emoji-box 使用...
vue中使用微信聊天表情
锦瑟年华的博客
03-26 8934
vue中使用微信聊天表情 1、先准备好表情数据,新建emjoydata.js文件。 export const emojisAmap = { "微笑": "emojis_0", "撇嘴": "emojis_1", "色": "emojis_2", "发呆": "emojis_3", "得意": "emojis_4", "流泪":...
表情包组件 封装使用(vue 3)
weixin_47996469的博客
11-12 2647
表情文件 const appData = [ { "codes": "1F600", "char": "????", "name": "grinning face" }, { "codes": "1F603", "char": "????", "name": "grinning face with big eyes" }, { "codes": "1F6
vue3-emoji使用
jjj1134的博客
04-17 1173
recentbooleanfalse开启最近使用emoji功能fulldatabooleanfalse如果指定为true 那么clickEmoji事件将会传出一个EmojiItem类型的对象textAreabooleanfalse开启文本框功能选项见类型定义自定义主题颜色，支持五个选项的配置，没有指定的依旧会使用指定的theme的默认值customIcon见类型定义自定义tab切换栏的显示customSize见类型定义。
vue3实现自定义聊天输入框(可输入表情包)
m0_65519288的博客
10-22 4574
div 的 contenteditable="true" div变为inputspellcheck 取消字母错误提示autofocus 自动聚焦-->做到这一步，你的div已经可以像正常的input那样输入文本了，不过这里比起原生的input标签有点不足之处在于，如果你是复制的文本到输入框内，会自带css样式：像上图那样肯定不是我们想要的，就需要对复制的文本进行处理。我们需要对div添加paste事件(复制事件)// 清除复制的文本样式将 handlePaste 方法写到了utils中。
vue 引入emoji表情包
04-04
可以通过以下步骤引入emoji表情包： 1. 安装emoji-mart库 在命令行中运行以下命令： ``` npm install emoji-mart --save ``` 2. 在组件中引入emoji-mart库 在需要使用emoji表情的组件中，引入emoji-mart库： ```javascript import { Picker } from 'emoji-mart' import 'emoji-mart/css/emoji-mart.css' ``` 3. 使用Picker组件 在需要使用emoji表情的地方，使用Picker组件即可： ```html <template> <div> <input v-model="message" /> <Picker @emoji-click="addEmoji" /> </div> </template> <script> import { Picker } from 'emoji-mart' import 'emoji-mart/css/emoji-mart.css' export default { components: { Picker }, data() { return { message: '' } }, methods: { addEmoji(emoji) { this.message += emoji.native } } } </script> ``` 在上面的例子中，当用户点击一个emoji表情时，addEmoji方法会将该表情添加到message数据中。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值