tgDetail组件说明
使用场景：PC和移动端
一套用于增强详情页浏览体验的组件
引入
<script src="//game.gtimg.cn/images/js/tgtypefiles/js/tgDetail-v4.js" charset="utf-8"></script>
使用
new TGDetail(el:String, options:Object);
参数el
类型：String | HTMLElement，例如：”.detail-content”
详情：提供一个在页面上包裹详情内容信息的 DOM 元素或者类名，注意这个DOM元素不要加ID。
参数options
类型：Object
详情：相关优化的方法的参数
| options设置项 | 类型 | 详情 |
|---|---|---|
| isClear | Boolean | 是否清除空行 |
| isDelete | Boolean | 是否冗余样式 |
| styleArr | Array | 需要去除的冗余样式，默认去除冗余的字体和字号 [‘font-family’,’font-size’] |
| color | Boolean | 是否对文章进行颜色处理，优化文章中设置的文字颜色与页面背景颜色之间的对比度达到符合WCAG2.0 AA要求。 |
| process | Boolean | 是否对文章进行进度条处理，展现文章的阅读进度，默认出现条形占比条 |
| isProcessBar | Boolen | 是否显示条形占比条，默认true |
| processDir | String | 进度条所处位置，默认’right’,可选(‘left’‘right’‘top’‘bottom’) |
| isProcessCont | Boolean | 是否出现目录进度条，默认false |
| previewPic | Boolean | 是否对文章图片进行可全屏缩放预览处理 |
| imageSet | Boolean | 是否对段落内只有一个图片进行居中和宽100%处理，并加上类detail-pic |
| isDeleteRetract | Boolean | 是否对（段落文字）下的段落取消缩进 |
| isCodeBeautify | Boolean | 是否优化代码展示，默认true |
| (news)isReadTime | Boolean | 是否统计阅读时长，默认false |
| (news)readTimeDom | String | 阅读时长挂载Dom节点 |
| (news)isDarkMode | Boolean | 是否开启自动转换深色模式，默认true |
| (news)modeChangeDom | String | 转换深色模式按钮挂载Dom节点 |
例子：
new TGDetail('.detail-content', {
styleArr: ['background', 'margin'],
process:true,
previewPic:true
});
方法
1.refresh()
详情：正文内容更新后进行刷新，重新刷新进度条
2.setDetailColor({bgElem:’改变背景色的dom元素或类名或ID’})
详情：对指定dom下的背景色对文章进行颜色替换已符合对比度标准，增强文章的可读性，bgElem默认为body
3.getReadTime(function(time){ //time返回阅读时长，单位分钟 }); 详情：返回阅读时长，单位分钟
demo
1.原样与优化后对比：
2.浅色背景与深色背景对比：
3.点击切换白天黑夜模式：