jabbany / CommentCoreLibrary

Javascript Live Comment (Danmaku) Engine Implementation. JS弹幕模块核心,提供从基本骨架到高级弹幕的支持。
http://jabbany.github.io/CommentCoreLibrary/demo
MIT License
1.9k stars 304 forks source link

[建议]支持弹幕对象单独指定css类名 #108

Closed doseeing closed 4 years ago

doseeing commented 4 years ago

弹幕对象如果能支持单独指定css类名,可以实现对单条弹幕格式的灵活配置。比如,在弹幕底色配置上。

期望效果

let someDanmakuAObj = {
      mode: 1,
      text: 'blue background comment',
      dur: 10000,
      css_class: 'blue-background'
}
CM.send(someDanmakuAObj)

输出

<div class="cmt blue-background css-optimize"
 style="font-size: 28px; left: 1081px; top: 100px; transition: transform 9989ms linear 0s; transform: translateX(-1164px);">
  blue background comment
</div>

快捷修改方案

Comment.ts中增加相关类名,this.dom.className = this.parent.options.global.className; 增加对应css属性

另一种修改方案

增加style属性,允许用户直接将css的属性字符串赋值给弹幕对象

let someDanmakuAObj = {
      mode: 1,
      text: 'blue background comment',
      dur: 10000,
      style: 'background: red;'
}
CM.send(someDanmakuAObj)

需要注意的问题

  1. 非css渲染方式可能不支持此属性渲染。
  2. comment属性中存在color, border等也属于css控制范围的属性。在同时存在时可能需要注意属性覆盖。

两种方案都有各自使用场景,但是没细读其它部分的代码,也不知道这种修改方式是否影响其它部分的功能,希望大佬们提提意见。

jabbany commented 4 years ago

这建议不错。直接设 style 那个可能比较危险(用户输入处理不当可能导致CSS注入),不过 className 大概就比较安全,必须是页面里面有的,而且理论上可以支持定义白名单。