Closed doseeing closed 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属性
Comment.ts
this.dom.className = this.parent.options.global.className;
增加style属性,允许用户直接将css的属性字符串赋值给弹幕对象
let someDanmakuAObj = { mode: 1, text: 'blue background comment', dur: 10000, style: 'background: red;' } CM.send(someDanmakuAObj)
两种方案都有各自使用场景,但是没细读其它部分的代码,也不知道这种修改方式是否影响其它部分的功能,希望大佬们提提意见。
这建议不错。直接设 style 那个可能比较危险(用户输入处理不当可能导致CSS注入),不过 className 大概就比较安全,必须是页面里面有的,而且理论上可以支持定义白名单。
弹幕对象如果能支持单独指定css类名,可以实现对单条弹幕格式的灵活配置。比如,在弹幕底色配置上。
期望效果
输出
快捷修改方案
在
Comment.ts
中增加相关类名,this.dom.className = this.parent.options.global.className;
增加对应css属性另一种修改方案
增加style属性,允许用户直接将css的属性字符串赋值给弹幕对象
需要注意的问题
两种方案都有各自使用场景,但是没细读其它部分的代码,也不知道这种修改方式是否影响其它部分的功能,希望大佬们提提意见。