【通用组件】支持插入自定义表情的评论组件

可插入表情的评论框git地址：，通用版本    Vue版本

技术细节请看：思否地址，

由于技术点基本一致，不同之处在于该版本支持多套表情，所以就不过多的记录技术点，主要讲下用法，想看技术点的麻烦移步上面掘金地址。

最近是由于有一个是后端同学在维护的基于layui项目需要用到评论组件，之前写的评论组件是基于Vue的他们用不了，总不能用vue帮他们重构吧，但也不至于只要一个评论组件就去引入整个富文本的组件吧，所以特意给他们写了一个通用版的评论组件。

效果展示

demo地址

组件说明

1. 字数的限制都是基于字符长度进行判断
2. 不兼容IE低版本
3. 评论中会带有标签，例如回车会转为div标签,表情包是利用img标签插入，空格为&nbsp
4. 表情会被解析为4个字符，空格与回车虽然会被转换，但是解析的时候回车会被转换成2个字符，空格转换成1个
5. 若要起始状态为隐藏，请设置完initStatus为false后 在el节点上设置display：none，不然将会有闪烁现象
6. 尽量不要一次性显示多个评论框，最好每次一个
7. 样式可以自行覆盖，节点也可自行添加，但是基本模板节点必须有，不然会找不到节点导致报错
8. 最多支持5套表情包，且需按照模板来，模板请看下方

实例参数说明

1. el: 某个元素下 （必须，且为id）
2. emoticon： 表情包列表 （必须，暂时只支持数组形式）
3. limtText： 评论字节长度限制，传入0为不限制 （注意是字节长度！！！默认为0，换行为2个字节，空格为1个字节，表情为4个字节）
4. iconWidth：插入的表情宽度，默认是30px
5. iconHeight：插入的表情高度，默认是30px
6. initStatus：起始状态 true显示 false 隐藏
7. info: 携带信息（可用于id传递）
8. changeEvent: 监听输入方法，有一个参数为 当前输入内容
9. submitEvent：提交方法，有4个参数 1） 是否出错 2）错误信息 3）输入内容 4) 携带信息 对应info

实例方法

1. show： 显示该评论框
2. hide： 隐藏该评论框

使用方法

1. 把js与css文件下载下来后，引入相应的js与css 下载地址

   <link rel="stylesheet" href="./cmt.css">
   <script src="./cmt.js"></script>

2. 引入基础的html模版(最外层id可随意指定，里面html结构需如下)

        <div id="cmt_wapper" >
          <div class="cmt_box">
            <p class="content_edit"></p>
            <div class="handle_list">
              <img class="em_icon" src="//www1.pconline.com.cn/20200929/pgc/cmt/icon.png" />
              <div class="btn_submit">发布</div>
            </div>
          </div>
        </div>

3. 创建评论组件（每个评论组件需实例化一次，实例化时需传递一个对象作为参数，对象属性请看上方参数说明）

   <script >
     new PgcCmt({
          el: 'cmt_wapper',
          initStatus: false,
          emoticon: imgList,
          changeEvent: (text) => {
              console.log('输出text', text)
          },
          submitEvent: (err, msg, text, info) => {
              console.log('提交', err, msg, text, info)
              if(err){
                  alert('提交失败，请打开F12控制台查看')
              }else{
                  alert('提交成功，请打开F12控制台查看')
              }
          }
      })
   </script>

4. 表情列表格式

      // 一个对象为一套表情，最多5套
     const imgList = [
       {
       icon: '//www1.pconline.com.cn/20200929/pgc/cmt/icon.png', // tab的icon
        width: 30, // tab icon的宽度
        height: 30, // tab icon的高度
        list: [
          "//gold-cdn.xitu.io/asset/twemoji/2.6.0/svg/1f603.svg"
        ]
        }
     ]

有改进建议，欢迎指正交流~