关于javascript:通用组件支持插入自定义表情的评论组件

可插入表情的评论框 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. 款式能够自行笼罩，节点也可自行添加，然而根本模板节点必须有，不然会找不到节点导致报错

实例参数阐明

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>

有改良倡议，欢送斧正交换~