前端组件开发文档

微吼组件开发及使用规范


版本记录

<p>[TOC]</p> <h4>组件库版本更新</h4> <table> <thead> <tr> <th style="text-align: left;">发包日期</th> <th style="text-align: left;">pc 版本</th> <th style="text-align: left;">更改内容</th> </tr> </thead> <tbody> <tr> <td style="text-align: left;">20200928</td> <td style="text-align: left;">2.0.22</td> <td style="text-align: left;">[推流] 默认推流编码改为 VP8,解决 H264 推流双流情况下可能导致观看画面卡住的问题。</td> </tr> <tr> <td style="text-align: left;">20200927</td> <td style="text-align: left;">2.0.21</td> <td style="text-align: left;">[文档] 解决 bug:republish 方法改为直播状态下且有操作权限调用,避免高并发下观众看不到文档和视频。</td> </tr> <tr> <td style="text-align: left;">20200903</td> <td style="text-align: left;">2.0.20</td> <td style="text-align: left;">[问卷] 解决 bug:多选表格在 safari 中缺少边框</td> </tr> <tr> <td style="text-align: left;">20200904</td> <td style="text-align: left;">2.0.19</td> <td style="text-align: left;">[聊天] 解决回复中带@内容样式错误 [成员列表] 将设置为主讲人改为可配置项</td> </tr> <tr> <td style="text-align: left;">20200903</td> <td style="text-align: left;">2.0.18</td> <td style="text-align: left;">[问卷] 解决 bug:日期题型在有分页的前提下,点击下一页再返回上一页,月份会增加一个月</td> </tr> <tr> <td style="text-align: left;">20200903</td> <td style="text-align: left;">2.0.17</td> <td style="text-align: left;">[聊天] 解决助理禁言失效问题</td> </tr> <tr> <td style="text-align: left;">20200903</td> <td style="text-align: left;">2.0.16</td> <td style="text-align: left;">[聊天] 助理增加对助理禁言踢出操作</td> </tr> <tr> <td style="text-align: left;">20200903</td> <td style="text-align: left;">2.0.15</td> <td style="text-align: left;">[成员列表] 助理增加对嘉宾禁言踢出操作</td> </tr> <tr> <td style="text-align: left;">20200902</td> <td style="text-align: left;">2.0.14</td> <td style="text-align: left;">[聊天] 重新发包</td> </tr> <tr> <td style="text-align: left;">20200902</td> <td style="text-align: left;">2.0.13</td> <td style="text-align: left;">[聊天] 修改禁言踢出控制权限,除主持人外,其余角色均可被任何有该功能权限的角色操作</td> </tr> <tr> <td style="text-align: left;">20200902</td> <td style="text-align: left;">2.0.12</td> <td style="text-align: left;">[成员列表] 删除嘉宾禁言踢出功能</td> </tr> <tr> <td style="text-align: left;">20200831</td> <td style="text-align: left;">2.0.11</td> <td style="text-align: left;">增加第三方推流检测流状态接口配置</td> </tr> <tr> <td style="text-align: left;">20200826</td> <td style="text-align: left;">2.0.10</td> <td style="text-align: left;">[聊天] 兼容 ios 与安卓端没有回复消息体及特殊角色列表增加翻译</td> </tr> <tr> <td style="text-align: left;">20200825</td> <td style="text-align: left;">2.0.9</td> <td style="text-align: left;">全部组件切换到 master,更新代码</td> </tr> <tr> <td style="text-align: left;">20200811</td> <td style="text-align: left;">2.0.8</td> <td style="text-align: left;">[聊天] 聊天实时消息过大造成页面卡死优化,每 50 条新增消息删除一次 dom,减少 dom 操作</td> </tr> <tr> <td style="text-align: left;">20200805</td> <td style="text-align: left;">2.0.7</td> <td style="text-align: left;">[裁剪] 修改裁剪组件事件点样式</td> </tr> <tr> <td style="text-align: left;">20200804</td> <td style="text-align: left;">2.0.6</td> <td style="text-align: left;">[问卷] 修复推屏的 bug,新增,checkAllSurvey 方法</td> </tr> <tr> <td style="text-align: left;">20200804</td> <td style="text-align: left;">2.0.5</td> <td style="text-align: left;">[聊天] 修改聊天消息防注入方法,解决控制台报错问题</td> </tr> <tr> <td style="text-align: left;">20200730</td> <td style="text-align: left;">2.0.4</td> <td style="text-align: left;">[问卷] 增加推屏功能</td> </tr> <tr> <td style="text-align: left;">20200730</td> <td style="text-align: left;">2.0.3</td> <td style="text-align: left;">[问答] 特殊角色标签样式修改 [问卷] 是否填写成功增加判断</td> </tr> <tr> <td style="text-align: left;">20200729</td> <td style="text-align: left;">2.0.2</td> <td style="text-align: left;">[聊天] xss 注入,增加聊天实例化销毁</td> </tr> <tr> <td style="text-align: left;">20200727</td> <td style="text-align: left;">2.0.0</td> <td style="text-align: left;">见 2.0.0 内容变更</td> </tr> <tr> <td style="text-align: left;">20200724</td> <td style="text-align: left;">1.4.98</td> <td style="text-align: left;">[问答]重大修改,将组件拆分为问答提问者组件和问答回答者组件,使用方法改变,详细使用请看说明文档</td> </tr> <tr> <td style="text-align: left;">202007.16</td> <td style="text-align: left;">1.4.97</td> <td style="text-align: left;">[聊天] 1. 聊天自己发送的消息,用户名颜色修改 2. 图片消息背景色修改 3. 新增非自己发送消息的消息监听事件‘receiveChatMsg’ 4. 修改聊天图片预览关闭按钮及操作按钮样式 5. 修复聊天审核页面翻页无效 6. 增加聊天用户对是否禁言的 props 监听,用于应用层对用户进行禁言操作 7. 聊天背景色修改 [抽奖] 1. 增加隐私协议是否必选(isCheckRequired)2. 增加业务层自定义隐私勾选(check)</td> </tr> <tr> <td style="text-align: left;">202007.16</td> <td style="text-align: left;">1.4.96</td> <td style="text-align: left;">[问卷] 优化问卷组件的 UI</td> </tr> <tr> <td style="text-align: left;">202007.13</td> <td style="text-align: left;">1.4.95</td> <td style="text-align: left;">[抽奖] 隐私声明改为 slot 传入使用,插槽名称为'lotteryPrivacy'</td> </tr> <tr> <td style="text-align: left;">202007.13</td> <td style="text-align: left;">1.4.94</td> <td style="text-align: left;">[聊天过滤] 需要修改聊天审核接口,不直接请求 pass,具体修改找后台文档,解决用户禁言状态刷新后丢失问题 [聊天过滤] component_lotteryCheck 消息监听改为 component_lottery_check[组件库] 解决上传完附件后,接口请求参数不对的问题</td> </tr> <tr> <td style="text-align: left;">202007.13</td> <td style="text-align: left;">1.4.93</td> <td style="text-align: left;">[聊天][问卷] 已更新为最新 UI 样式,如果遇到报错,请关注最新的组件库文档,按最新文档更新代码</td> </tr> <tr> <td style="text-align: left;">202007.13</td> <td style="text-align: left;">1.4.92</td> <td style="text-align: left;">[聊天过滤] 修复聊天过滤翻页无效问题</td> </tr> <tr> <td style="text-align: left;">202007.10</td> <td style="text-align: left;">1.4.91</td> <td style="text-align: left;">[签到] 多角色操作签到,流程修改,解决未发起签到者显示签到列表无效问题</td> </tr> <tr> <td style="text-align: left;">202007.10</td> <td style="text-align: left;">1.4.90</td> <td style="text-align: left;">[点赞] 对点赞数增加监听,应用层可修改 likes 传入值进行点赞数显示修改</td> </tr> <tr> <td style="text-align: left;">20200709</td> <td style="text-align: left;">1.4.89</td> <td style="text-align: left;">[问卷]修改 EventBus 事件名称 component_que_create_answer</td> </tr> <tr> <td style="text-align: left;">20200707</td> <td style="text-align: left;">1.4.87</td> <td style="text-align: left;">[考试]修复答卷中多选不显示正确答案</td> </tr> <tr> <td style="text-align: left;">20200702</td> <td style="text-align: left;">1.4.86</td> <td style="text-align: left;">[聊天]增加聊天用户对是否禁言的 props 监听,用于应用层对用户进行禁言操作</td> </tr> <tr> <td style="text-align: left;">20200701</td> <td style="text-align: left;">1.4.85</td> <td style="text-align: left;">[问答]修复快速切换 tab 栏时,数据错误,提供 isPrivate 参数,提问默认为私密</td> </tr> <tr> <td style="text-align: left;">20200630</td> <td style="text-align: left;">1.4.84</td> <td style="text-align: left;">[聊天]修复聊天审核页面监听禁言消息报错</td> </tr> <tr> <td style="text-align: left;">20200629</td> <td style="text-align: left;">1.4.83</td> <td style="text-align: left;">[问答] 修复多条回复在撤销回复时,按钮不正确</td> </tr> <tr> <td style="text-align: left;">20200629</td> <td style="text-align: left;">1.4.82</td> <td style="text-align: left;">[问答] 修复多条回复在撤销回复时,数据不正确</td> </tr> <tr> <td style="text-align: left;">20200629</td> <td style="text-align: left;">1.4.81</td> <td style="text-align: left;">[问答] 修复文字回复按钮数据清空问题,修复回复隐藏按钮不正确,修复多语言</td> </tr> <tr> <td style="text-align: left;">20200622</td> <td style="text-align: left;">1.4.80</td> <td style="text-align: left;">[签到]新增了 签到列表显示隐藏配置(如果预计签到人数很多,建议不要显示在发起者弹窗中,最好新页面打开添加分页显示,以防页面卡死)</td> </tr> <tr> <td style="text-align: left;">20200622</td> <td style="text-align: left;">1.4.77</td> <td style="text-align: left;">[签到]新增了 多角色操作签到,显示流程</td> </tr> <tr> <td style="text-align: left;">20200619</td> <td style="text-align: left;">1.4.76</td> <td style="text-align: left;">[问卷]新增了 isCanSubmit 参数,submitClick 事件,pageEndContent 插槽</td> </tr> </tbody> </table> <table> <thead> <tr> <th style="text-align: left;">发包日期</th> <th style="text-align: left;">wap 端版本</th> <th style="text-align: left;">更改内容</th> </tr> </thead> <tbody> <tr> <td style="text-align: left;">20200826</td> <td style="text-align: left;">2.0.5</td> <td style="text-align: left;">[聊天] 兼容 ios 与安卓端没有回复消息体及特殊角色列表增加翻译</td> </tr> <tr> <td style="text-align: left;">20200811</td> <td style="text-align: left;">2.0.4</td> <td style="text-align: left;">[聊天] 聊天实时消息过大造成页面卡死优化,每 50 条新增消息删除一次 dom,减少 dom 操作</td> </tr> <tr> <td style="text-align: left;">20200804</td> <td style="text-align: left;">2.0.3</td> <td style="text-align: left;">[聊天] 修改聊天消息防注入方法,解决控制台报错问题</td> </tr> <tr> <td style="text-align: left;">20200730</td> <td style="text-align: left;">2.0.2</td> <td style="text-align: left;">[问卷] 是否填写成功增加判断</td> </tr> <tr> <td style="text-align: left;">20200729</td> <td style="text-align: left;">2.0.1</td> <td style="text-align: left;">[聊天] xss 注入更</td> </tr> <tr> <td style="text-align: left;">20200728</td> <td style="text-align: left;">2.0.0</td> <td style="text-align: left;">见 2.0.0 内容变更</td> </tr> <tr> <td style="text-align: left;">20200716</td> <td style="text-align: left;">1.0.66</td> <td style="text-align: left;">[抽奖] 用户填写信息可从应用层传入 reciveInfo:{name: '',tel: '',remarks: ''}</td> </tr> <tr> <td style="text-align: left;">20200716</td> <td style="text-align: left;">1.0.65</td> <td style="text-align: left;">[聊天]perf:修改查看抽奖消息名 改为'component_check_lottery' [抽奖] 1. 增加隐私协议是否必选(isCheckRequired)2. 增加业务层自定义隐私勾选(check) 3. 隐私声明改为 slot 传入使用,插槽名称为'lotteryPrivacy'</td> </tr> <tr> <td style="text-align: left;">20200715</td> <td style="text-align: left;">1.0.64</td> <td style="text-align: left;">[投票]修改投票提交时的文案 确定--&gt;提交</td> </tr> <tr> <td style="text-align: left;">20200709</td> <td style="text-align: left;">1.0.63</td> <td style="text-align: left;">[问卷]新增 EventBus 事件 components_que_create_answer</td> </tr> <tr> <td style="text-align: left;">20200630</td> <td style="text-align: left;">1.0.62</td> <td style="text-align: left;">[问答]修改答案中不显示表情</td> </tr> <tr> <td style="text-align: left;">20200630</td> <td style="text-align: left;">1.0.61</td> <td style="text-align: left;">[问答]修改提问的公开提问状态的显示</td> </tr> <tr> <td style="text-align: left;">20200630</td> <td style="text-align: left;">1.0.60</td> <td style="text-align: left;">[问答]提供 isPrivate 参数,提问默认为私密</td> </tr> <tr> <td style="text-align: left;">20200630</td> <td style="text-align: left;">1.0.59</td> <td style="text-align: left;">[播放器]修复 ios 下播放按钮失效的问题(没有触发 loaded 事件)</td> </tr> <tr> <td style="text-align: left;">20200629</td> <td style="text-align: left;">1.0.58</td> <td style="text-align: left;">[聊天]增加销毁聊天组件时,对聊天实例及相关监听事件销毁操作,升级至此版本后,无需在应用层自己销毁</td> </tr> <tr> <td style="text-align: left;">20200629</td> <td style="text-align: left;">1.0.57</td> <td style="text-align: left;">[问卷]修复打开问卷报错</td> </tr> <tr> <td style="text-align: left;">20200629</td> <td style="text-align: left;">1.0.56</td> <td style="text-align: left;">[播放器] 新增 ui,支持弹幕开关(需更新组件库的 iconfont)</td> </tr> <tr> <td style="text-align: left;">20200629</td> <td style="text-align: left;">1.0.55</td> <td style="text-align: left;">[问答] 修复多语言</td> </tr> <tr> <td style="text-align: left;">20200628</td> <td style="text-align: left;">1.0.54</td> <td style="text-align: left;">[播放器] 新增 ui,支持倍速,清晰度切换 (需更新组件库的 iconfont)</td> </tr> <tr> <td style="text-align: left;">20200622</td> <td style="text-align: left;">1.0.53</td> <td style="text-align: left;">[签到]新增了 倒计时默认时间</td> </tr> <tr> <td style="text-align: left;">20200622</td> <td style="text-align: left;">1.0.52</td> <td style="text-align: left;">[问卷] 修复 isCanSubmit 参数无效</td> </tr> <tr> <td style="text-align: left;">20200619</td> <td style="text-align: left;">1.0.51</td> <td style="text-align: left;">[问卷]组件新增了 isCanSubmit 参数,submitClick 事件,pageEndContent 插槽</td> </tr> </tbody> </table> <h4>pc 端组件 iconfont css</h4> <blockquote> <p>//at.alicdn.com/t/font_1802986_in9ac3dk18k.css</p> </blockquote> <h4>wap 端组件 iconfont css</h4> <blockquote> <p>//at.alicdn.com/t/font_1891347_bnetsubun8j.css</p> </blockquote> <h4>全量版 sdk 版本</h4> <pre><code class="language-javascript"> // 播放器 &lt;script src=//static.vhallyun.com/jssdk/vhall-jssdk-player/latest/vhall-jssdk-player-2.2.1.js&gt;&lt;/script&gt; // 互动 &lt;script src="//static.vhallyun.com/jssdk/vhall-jssdk-interaction/latest/vhall-jssdk-interaction-2.2.0.js"&gt;&lt;/script&gt; // 聊天 &lt;script src="//static.vhallyun.com/jssdk/vhall-jssdk-chat/latest/vhall-jssdk-chat-2.1.0.js"&gt;&lt;/script&gt; // 文档 &lt;script src="//static.vhallyun.com/jssdk/vhall-jssdk-doc/latest/vhall-jssdk-doc-3.1.1.js"&gt;&lt;/script&gt; // 点播上传 &lt;script src="//static.vhallyun.com/jssdk/vhall-jssdk-vodupload/test/vhall-jssdk-upload-2.0.1.js"&gt;&lt;/script&gt; // 表单 &lt;script src="//static01-open.e.vhall.com/jssdk/vhall-jssdk-form/vhall-jssdk-form-1.0.3.js"&gt;&lt;/script&gt;</code></pre> <h4>全量版主要 npm 包版本</h4> <p>elementUI 版本:^2.13.1</p> <p>vantUI 版本:^2.5.2</p> <p>vue 版本:^2.5.2</p>

页面列表

ITEM_HTML