可插入表情的评论框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>

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