互动管理-评论表情组件的诞生

介绍：在互联网无处不在的背景下，其实我们已经生活在一个视觉文化的时代，人们在互动交流的时候纯文字内容显得过于单调和无聊。所以在交流时倾向于使用活泼生动，能体现出自己感情和个性的表情。于是就有了形象生动的小七系列表情包，在web端为了避免重复开发 互动表情功能，将该评论表情功能 封装成了 q-emojin-input 公共组件。

作为程序员 我们做一个功能的时候 首先需要详细的了解 需求背景才能够更好的实现功能。

背景：客户端支持发表评论表情包，并希望通过号召作者发表情包，引导用户回复，提高互动意愿。为了优化展示效果和交互体验，作家专区需要支持表情包正常展示，以及支持发表评论表情包。

目的：通过增加评论表情包提高互动意愿。

需求

表情包展示

1、后台目前将表情包展示成对应中文标识。作家专区需要添加文件，将中文标识转义成表情包正常展示出来。

2、在书写评论相关模块的时候，可以快速添加表情

3、含表情包的评论提交到评论后台时，传表情包的中文标识。

4、作者发表了含表情包的评论或回复后，客户端章评、段评及其回复正常展示表情包，其余不支持展示表情包的位置，展示为对应的中文标识

原型图：

展示效果：

设计思路：

要支持文本可编辑，又能插入表情图片内容到具体文本位置 于是确定了 方案  基于 css属性 contenteditable 可编辑功能实现 input输入框功能  展示html 文本

第一版 实现了哪些功能

1、表情功能菜单展示位置 支持输入框 配置上方展示或者下方展示

2、可以配置最大内容字数

3、展示当前已输入内容字数

4、可配置当前输入框能添加多少 个表情 默认10个

碰到的问题

1、插入的表情无法在光标下插入，会自动跳到最前面，还有就是输入框打开时，光标总是跳到最前面

解决的办法：通过  selection   range 两个对象 获取当前所选中的区域 将选中的表情插入指定位置。

2、如何把文字标识转成图片插入dom

[小七_神评]

解决办法：通过正则：匹配出文字 对应的 表情资源 key:value

 /(\[.{0,3}\S])|(\[.{0,7}\S])/ig

第二版 优化版本

表情组件升级开发 经过前端组小伙伴们充分的方案讨论会议后

作出如下优化版本

现有组件的表情数据在项目中是写死的数据不够灵活

1、需要支持外部传入表情数据进行展示。

2、表情展示的类型 顺序可以配置。

3、支持菜单 扩展功能，使用者可以通过组件提供的方法 在当前业务自定义表情组件功能。

实现思路

1 提供props menuShow    类型 (Array)  从前往后 配置需要展示的表情类型 顺序

[ 'emoji', 'xiaoqi', 'text', 'mine']

2 提供txtData 参数类型 (Array) 支持外部使用 配置 新的表情数据 ，在和已有 的表情数据进行合并展示

[
                    {
                        'type': 'mine',
                        'image': 'emoticon_bar_emoji',
                        'is_vip': '0',
                        'emojis': [
                            {
                                'desc': '[mine__头像]',
                                'icon': 'smile',
                                'url': 'https://gw.alipayobjects.com/mdn/prod_resou/afts/img/A*z79cR7f48isAAAAAAAAAAAAAARQnAQ'
                            },
                            {
                                'desc': '[mine__书籍]',
                                'icon': 'doge',
                                'url': 'https://cdn.wtzw.com/bookimg/public/images/cover/a3c6/c940a8d883018f008efc107ae38bafb4_360x480.jpg'
                            }
                        ]
                    }
]

外部传入的数据展示效果：如图

3、 新增了两个插槽 slot="menu" slot="body" 解决使用者自定义表情功能

如快捷回复功能

碰到的问题

因为第二版优化支持外部配置表情数据

由于不同的类型下的表情 需要根据当前项目 展示不同的表情大小 不可控

解决办法 ：取传入的表情类型生成 对应的类名 如emojin mine xiaoqi  由项目开发者自定义表情大小。

'emoji', 'xiaoqi', 'text', 'mine'

评论表情组件会持续改进，继续优化 为作者和读者互动添加一份交流的乐趣。