热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

vue界面发送表情的实现代码

这篇文章主要介绍了vue界面发送表情的实现代码,具有很好的参考价值,希望对大家有所帮助。一

vue界面发送表情的实现代码

完全照搬不一定能写出来 只是让看个思想




补充知识:vue+element-ui实现聊天表情包

我是用的本地json数据实现的,表情不是很多,首先创建个json文件,代码如下:

[{
  "codes": "1F600",
  "char": "😀",
  "name": "grinning face"
 },
 {
  "codes": "1F603",
  "char": "😃",
  "name": "grinning face with big eyes"
 },
 {
  "codes": "1F604",
  "char": "😄",
  "name": "grinning face with smiling eyes"
 },
 {
  "codes": "1F601",
  "char": "😁",
  "name": "beaming face with smiling eyes"
 },
 {
  "codes": "1F606",
  "char": "😆",
  "name": "grinning squinting face"
 },
 {
  "codes": "1F605",
  "char": "😅",
  "name": "grinning face with sweat"
 },
 {
  "codes": "1F923",
  "char": "🤣",
  "name": "rolling on the floor laughing"
 },
 {
  "codes": "1F602",
  "char": "😂",
  "name": "face with tears of joy"
 },
 {
  "codes": "1F642",
  "char": "🙂",
  "name": "slightly smiling face"
 },
 {
  "codes": "1F643",
  "char": "🙃",
  "name": "upside-down face"
 },
 {
  "codes": "1F609",
  "char": "😉",
  "name": "winking face"
 },
 {
  "codes": "1F60A",
  "char": "😊",
  "name": "smiling face with smiling eyes"
 },
 {
  "codes": "1F607",
  "char": "😇",
  "name": "smiling face with halo"
 },
 {
  "codes": "1F970",
  "char": "🥰",
  "name": "smiling face with hearts"
 },
 {
  "codes": "1F60D",
  "char": "😍",
  "name": "smiling face with heart-eyes"
 },
 {
  "codes": "1F929",
  "char": "🤩",
  "name": "star-struck"
 },
 {
  "codes": "1F618",
  "char": "😘",
  "name": "face blowing a kiss"
 },
 {
  "codes": "1F617",
  "char": "😗",
  "name": "kissing face"
 },
 {
  "codes": "1F61A",
  "char": "😚",
  "name": "kissing face with closed eyes"
 },
 {
  "codes": "1F619",
  "char": "😙",
  "name": "kissing face with smiling eyes"
 },
 {
  "codes": "1F44B",
  "char": "👋",
  "name": "waving hand"
 },
 {
  "codes": "1F91A",
  "char": "🤚",
  "name": "raised back of hand"
 },
 {
  "codes": "1F590",
  "char": "🖐",
  "name": "hand with fingers splayed"
 },
 {
  "codes": "270B",
  "char": "✋",
  "name": "raised hand"
 },
 {
  "codes": "1F596",
  "char": "🖖",
  "name": "vulcan salute"
 },
 {
  "codes": "1F44C",
  "char": "👌",
  "name": "OK hand"
 },
 {
  "codes": "1F90F",
  "char": "🤏",
  "name": "pinching hand"
 },
 {
  "codes": "270C",
  "char": "✌",
  "name": "victory hand"
 },
 {
  "codes": "1F91E",
  "char": "🤞",
  "name": "crossed fingers"
 },
 {
  "codes": "1F91F",
  "char": "🤟",
  "name": "love-you gesture"
 },
 {
  "codes": "1F918",
  "char": "🤘",
  "name": "sign of the horns"
 },
 {
  "codes": "1F919",
  "char": "🤙",
  "name": "call me hand"
 },
 {
  "codes": "1F448",
  "char": "👈",
  "name": "backhand index pointing left"
 },
 {
  "codes": "1F449",
  "char": "👉",
  "name": "backhand index pointing right"
 },
 {
  "codes": "1F446",
  "char": "👆",
  "name": "backhand index pointing up"
 },
 {
  "codes": "1F595",
  "char": "🖕",
  "name": "middle finger"
 },
 {
  "codes": "1F447",
  "char": "👇",
  "name": "backhand index pointing down"
 },
 {
  "codes": "261D FE0F",
  "char": "☝️",
  "name": "index pointing up"
 },
 {
  "codes": "1F44D",
  "char": "👍",
  "name": "thumbs up"
 },
 {
  "codes": "1F44E",
  "char": "👎",
  "name": "thumbs down"
 },
 {
  "codes": "270A",
  "char": "✊",
  "name": "raised fist"
 },
 {
  "codes": "1F44A",
  "char": "👊",
  "name": "oncoming fist"
 },
 {
  "codes": "1F91B",
  "char": "🤛",
  "name": "left-facing fist"
 },
 {
  "codes": "1F91C",
  "char": "🤜",
  "name": "right-facing fist"
 }

]

vue组件中代码直接贴出来,废话不多说:







以上这篇vue界面发送表情的实现代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持编程笔记。

原文链接:https://blog.csdn.net/weixin_42790916/article/details/84977301


推荐阅读
  • 本文介绍了在Python3中如何使用选择文件对话框的格式打开和保存图片的方法。通过使用tkinter库中的filedialog模块的asksaveasfilename和askopenfilename函数,可以方便地选择要打开或保存的图片文件,并进行相关操作。具体的代码示例和操作步骤也被提供。 ... [详细]
  • 本文介绍了在开发Android新闻App时,搭建本地服务器的步骤。通过使用XAMPP软件,可以一键式搭建起开发环境,包括Apache、MySQL、PHP、PERL。在本地服务器上新建数据库和表,并设置相应的属性。最后,给出了创建new表的SQL语句。这个教程适合初学者参考。 ... [详细]
  • 本文介绍了作者在开发过程中遇到的问题,即播放框架内容安全策略设置不起作用的错误。作者通过使用编译时依赖注入的方式解决了这个问题,并分享了解决方案。文章详细描述了问题的出现情况、错误输出内容以及解决方案的具体步骤。如果你也遇到了类似的问题,本文可能对你有一定的参考价值。 ... [详细]
  • 本文介绍了在Vue项目中如何结合Element UI解决连续上传多张图片及图片编辑的问题。作者强调了在编码前要明确需求和所需要的结果,并详细描述了自己的代码实现过程。 ... [详细]
  • Python瓦片图下载、合并、绘图、标记的代码示例
    本文提供了Python瓦片图下载、合并、绘图、标记的代码示例,包括下载代码、多线程下载、图像处理等功能。通过参考geoserver,使用PIL、cv2、numpy、gdal、osr等库实现了瓦片图的下载、合并、绘图和标记功能。代码示例详细介绍了各个功能的实现方法,供读者参考使用。 ... [详细]
  • 本文介绍了如何按需加载elementui的部分模块,以及如何设置覆盖某些属性。通过import引入Dialog模块,并使用Vue.component进行全局设置。同时使用Vue.use引入ElementUI和VueAxios模块。通过extends进行属性覆盖设置。 ... [详细]
  • 本文记录了在vue cli 3.x中移除console的一些采坑经验,通过使用uglifyjs-webpack-plugin插件,在vue.config.js中进行相关配置,包括设置minimizer、UglifyJsPlugin和compress等参数,最终成功移除了console。同时,还包括了一些可能出现的报错情况和解决方法。 ... [详细]
  • 本文介绍了如何使用vue-awesome-swiper组件,包括在main.js中引入和使用swiper和swiperSlide组件,以及设置options和ref属性。同时还介绍了如何在模板中使用swiper和swiperSlide组件,并展示了如何通过循环渲染swipes数组中的数据,并使用picUrl属性显示图片。最后还介绍了如何添加分页器。 ... [详细]
  • 先看看ElementUI里关于el-table的template数据结构:<template><el-table:datatableData><e ... [详细]
  • 如何在php文件中添加图片?
    本文详细解答了如何在php文件中添加图片的问题,包括插入图片的代码、使用PHPword在载入模板中插入图片的方法,以及使用gd库生成不同类型的图像文件的示例。同时还介绍了如何生成一个正方形文件的步骤。希望对大家有所帮助。 ... [详细]
  • 单页面应用 VS 多页面应用的区别和适用场景
    本文主要介绍了单页面应用(SPA)和多页面应用(MPA)的区别和适用场景。单页面应用只有一个主页面,所有内容都包含在主页面中,页面切换快但需要做相关的调优;多页面应用有多个独立的页面,每个页面都要加载相关资源,页面切换慢但适用于对SEO要求较高的应用。文章还提到了两者在资源加载、过渡动画、路由模式和数据传递方面的差异。 ... [详细]
  • 带添加按钮的GridView,item的删除事件
    先上图片效果;gridView无数据时显示添加按钮,有数据时,第一格显示添加按钮,后面显示数据:布局文件:addr_manage.xml<?xmlve ... [详细]
  • 本文详细介绍了解决全栈跨域问题的方法及步骤,包括添加权限、设置Access-Control-Allow-Origin、白名单等。通过这些操作,可以实现在不同服务器上的数据访问,并解决后台报错问题。同时,还提供了解决second页面访问数据的方法。 ... [详细]
  • 开发笔记:计网局域网:NAT 是如何工作的?
    篇首语:本文由编程笔记#小编为大家整理,主要介绍了计网-局域网:NAT是如何工作的?相关的知识,希望对你有一定的参考价值。 ... [详细]
  • 本文介绍了PE文件结构中的导出表的解析方法,包括获取区段头表、遍历查找所在的区段等步骤。通过该方法可以准确地解析PE文件中的导出表信息。 ... [详细]
author-avatar
爱心永溢真情永远
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有