vue.js项目 评论留言模块支持表情包

vue.js项目 评论留言模块支持表情包

需通过后台处理表情包:数据库存储字段,前端直接处理转换成表情。

  • 页面结构搭建:如图,页面布好文本域框和表情列表
    image.png
image.png
  • 根据表情包的内容,转化成对应的描述和路径
    image.png
  • 文本域框中展示选中的表情包内容
    image.png
image.png
  • 后台数据传入时,正则匹配替换相应的内容为表情
    image.png
image.png

注:如果需要不以图片的形式存本地,方法同上,把可以前端可以识别的表情 直接替换到图片路径,从服务器获取来的表情描述正则匹配替换时,直接替换成字符串,不需要以图片的形式加载。如果需要在文本域展示,需要在点击表情包,给文本域赋值的时候,文本域里的内容追加替换成表情包,另存一份内容为表情包对用的描述追加的文本域内容,存后台数据库的时候,存后面这一内容,而非文本域展示的内容。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,650评论 1 45
  • ¥开启¥ 【iAPP实现进入界面执行逐一显】 〖2017-08-25 15:22:14〗 《//首先开一个线程,因...
    小菜c阅读 6,510评论 0 17
  • 两点一线的状态,过久了总会觉得无聊。 奇奇怪怪的琐事就像站在悬崖边上,只是无心的欣赏风景,那些不明状况的人,站在后...
    碌碌无为_fdca阅读 130评论 0 0
  • 前两天朋友请客点了一道凉拌鲫鱼,令黑小子念念不忘,今天黑小子缠着我给他做凉拌鲫鱼。虽然从来没有做过,但是还是决定一...
    lannychen阅读 1,774评论 17 21
  • 「道 德 經」: 第 一 章 道 可 道 , 非 常 道 。 名 可 名 , 非 常 名 。无 名 天 地 之 始...
    渐行渐知阅读 1,236评论 7 18