文档-白板
<p>[TOC]</p>
<h3>文档组件（doc）</h3>
<p>思路：文档组件主要根据 props 中的 roleName 进行角色区分，文档操作者（docPermissionId）可使用画笔等工具，助理可以对文档进行翻页，不是文档操作者的发起者和嘉宾只能观看文档，不能对文档进行任何操作。文档对于某个房间来说，默认为关闭状态
基础的使用提供了文档的工具栏如画笔等工具和翻页</p>
<p><img src="http://t-static01-open.e.vhall.com/vss/37/df/37df8a3f5248228bb2f538d301db964a.png" alt="" /></p>
<p><img src="http://t-static01-open.e.vhall.com/vss/66/0b/660b67def1a0cb3b113b681194eb3068.png" alt="" /></p>
<pre><code class="language-html"><vhDoc
ref="doc"
:docPermissionId="roomInfo.doc_permission"
:roleName="roomInfo.role_name"
:roomId="roomInfo.room_id"
:channelId="roomInfo.channel_id"
:appId="roomInfo.app_id"
:token="roomInfo.paas_access_token"
:liveStatus="roomInfo.liveStatus"
:accountId="roomInfo.third_party_user_id"
:isVod="isVod">
</vhDoc></code></pre>
<h4>props</h4>
<table>
<thead>
<tr>
<th style="text-align: left;">参数</th>
<th style="text-align: left;">说明</th>
<th style="text-align: left;">类型</th>
<th style="text-align: left;">可选值</th>
<th style="text-align: left;">默认值</th>
<th style="text-align: left;">必填</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left;">docPermissionId</td>
<td style="text-align: left;">文档操作者id</td>
<td style="text-align: left;">String</td>
<td style="text-align: left;">-</td>
<td style="text-align: left;">-</td>
<td style="text-align: left;">是</td>
</tr>
<tr>
<td style="text-align: left;">roleName</td>
<td style="text-align: left;">角色</td>
<td style="text-align: left;">Number</td>
<td style="text-align: left;">1主持人 2观众 3助理 4嘉宾</td>
<td style="text-align: left;">-</td>
<td style="text-align: left;">是</td>
</tr>
<tr>
<td style="text-align: left;">roomId</td>
<td style="text-align: left;">房间id</td>
<td style="text-align: left;">String</td>
<td style="text-align: left;">-</td>
<td style="text-align: left;">-</td>
<td style="text-align: left;">是</td>
</tr>
<tr>
<td style="text-align: left;">accountId</td>
<td style="text-align: left;">用户id</td>
<td style="text-align: left;">String</td>
<td style="text-align: left;">-</td>
<td style="text-align: left;">-</td>
<td style="text-align: left;">是</td>
</tr>
<tr>
<td style="text-align: left;">channelId</td>
<td style="text-align: left;">频道id</td>
<td style="text-align: left;">String</td>
<td style="text-align: left;">-</td>
<td style="text-align: left;">-</td>
<td style="text-align: left;">是</td>
</tr>
<tr>
<td style="text-align: left;">appId</td>
<td style="text-align: left;">appId</td>
<td style="text-align: left;">String</td>
<td style="text-align: left;">-</td>
<td style="text-align: left;">-</td>
<td style="text-align: left;">是</td>
</tr>
<tr>
<td style="text-align: left;">token</td>
<td style="text-align: left;">paas验证凭证</td>
<td style="text-align: left;">String</td>
<td style="text-align: left;">-</td>
<td style="text-align: left;">-</td>
<td style="text-align: left;">是</td>
</tr>
<tr>
<td style="text-align: left;">appId</td>
<td style="text-align: left;">appId</td>
<td style="text-align: left;">String</td>
<td style="text-align: left;">-</td>
<td style="text-align: left;">-</td>
<td style="text-align: left;">是</td>
</tr>
<tr>
<td style="text-align: left;">liveStatus</td>
<td style="text-align: left;">活动状态</td>
<td style="text-align: left;">Number</td>
<td style="text-align: left;">0预告 1直播中 2直播结束</td>
<td style="text-align: left;">-</td>
<td style="text-align: left;">是</td>
</tr>
<tr>
<td style="text-align: left;">isVod</td>
<td style="text-align: left;">是否为回放</td>
<td style="text-align: left;">Boolean</td>
<td style="text-align: left;">-</td>
<td style="text-align: left;">-</td>
<td style="text-align: left;">是</td>
</tr>
<tr>
<td style="text-align: left;">sizeArr</td>
<td style="text-align: left;">画笔大小</td>
<td style="text-align: left;">array</td>
<td style="text-align: left;">-</td>
<td style="text-align: left;">[6, 8, 12, 14, 16]</td>
<td style="text-align: left;">否</td>
</tr>
<tr>
<td style="text-align: left;">colorArr</td>
<td style="text-align: left;">画笔颜色</td>
<td style="text-align: left;">array</td>
<td style="text-align: left;">-</td>
<td style="text-align: left;">['#FF0200', '#008002', '#0800FF', '#000000']</td>
<td style="text-align: left;">否</td>
</tr>
<tr>
<td style="text-align: left;">showGraph</td>
<td style="text-align: left;">多边形功能</td>
<td style="text-align: left;">boolean</td>
<td style="text-align: left;">-</td>
<td style="text-align: left;">false</td>
<td style="text-align: left;">否</td>
</tr>
<tr>
<td style="text-align: left;">showText</td>
<td style="text-align: left;">是否显示文字</td>
<td style="text-align: left;">boolean</td>
<td style="text-align: left;">-</td>
<td style="text-align: left;">false</td>
<td style="text-align: left;">否</td>
</tr>
<tr>
<td style="text-align: left;">broadcastChannelId</td>
<td style="text-align: left;">转播频道id</td>
<td style="text-align: left;">string</td>
<td style="text-align: left;">-</td>
<td style="text-align: left;">-</td>
<td style="text-align: left;">否</td>
</tr>
<tr>
<td style="text-align: left;">isKeyEvent</td>
<td style="text-align: left;">翻页是否监听键盘事件</td>
<td style="text-align: left;">Boolean</td>
<td style="text-align: left;">-</td>
<td style="text-align: left;">true</td>
<td style="text-align: left;">否</td>
</tr>
</tbody>
</table>
<h4>方法</h4>
<ul>
<li>
<p>toggleDocContainer(flag)
参数：flag true打开容器，关闭显示mainplaceholder插槽 false关闭容器，显示mainplaceholder插槽
说明：此方法只是对操作者的文档显示进行控制，无后端接口调用
示例：</p>
<pre><code class="language-javascript">this.$refs.doc.toggleDocContainer(true) // 打开显示文档的容器
this.$refs.doc.toggleDocContainer(false) // 关闭显示文档的容器</code></pre>
</li>
<li>
<p>toggleWatchContainer(flag)
参数：flag true打开观众文档 false关闭观众文档
说明：此方法只是对操作者打开非操作的文档的显示
示例：</p>
<pre><code class="language-javascript">this.$refs.doc.toggleWatchContainer(true) // 打开房间文档
this.$refs.doc.toggleWatchContainer(false) // 关闭房间文档</code></pre>
</li>
<li>
<p>handleControlBar(event)
参数：对象，event.type操作的类型，如setColor event.value值，如色值
说明：自定义画笔工具使用的方法
示例：</p>
<pre><code class="language-javascript">this.$refs.doc.handleControlBar({ type: 'setColor', value: '#FD2C0A'}) // 设置颜色
this.$refs.doc.handleControlBar({ type: 'setSquare' }) // 设置四边形，setSingleArrow单向箭头 setDoubleArrow双向箭头</code></pre>
</li>
<li>
<p>gotoPage(page)
说明： 跳转到某一页</p>
<pre><code class="language-javascript">this.$refs.doc.gotoPage(5) // 跳转到第五页</code></pre>
</li>
<li>
<p>destroyDoc()
说明：消除现有的的远程记录（不影响回放），清空本地存储数据
使用建议：结束直播的时候用于清除文档数据</p>
<pre><code class="language-javascript">this.$refs.doc.destroyDoc()</code></pre>
</li>
<li>
<p>destroyCurContainer(type = 'document')
说明：销毁现有的文档或白板
参数：type可选值 'document'和'board'</p>
<pre><code class="language-javascript">this.$refs.doc.destroyCurContainer('document') // 销毁现有的文档
this.$refs.doc.destroyCurContainer('board') // 销毁现有的白板</code></pre>
</li>
<li>broadcast (type, id, isSelfDoc = true)
说明：转播时，若文档也需要转播</li>
</ul>
<table>
<thead>
<tr>
<th>参数</th>
<th>说明</th>
<th>类型</th>
<th>可选值</th>
<th>默认值</th>
<th>必填</th>
</tr>
</thead>
<tbody>
<tr>
<td>type</td>
<td>转播开始或结束</td>
<td>String</td>
<td>start/end</td>
<td>-</td>
<td>是</td>
</tr>
<tr>
<td>id</td>
<td>转播频道id，转播开始必填</td>
<td>String</td>
<td>-</td>
<td>-</td>
<td>否</td>
</tr>
<tr>
<td>isSelfDoc</td>
<td>转播结束，是否加载自身房间文档</td>
<td>Boolean</td>
<td>-</td>
<td>true</td>
<td>否</td>
</tr>
</tbody>
</table>
<p>示例：业务按自身需求进行调用</p>
<pre><code class="language-javascript">this.$refs.doc.destroyDoc('start', 'lss_313ff6d1') // 开始转播
this.$refs.doc.destroyDoc('end', '', false) // 结束转播后，不加载自身房间内文档
this.$refs.doc.destroyDoc('end', '', true) // 结束转播后，加载自身房间内文档</code></pre>
<h4>插槽</h4>
<ul>
<li>主要屏幕插槽--mainplaceholder
作用：无演示文档或者容器关闭时，展示的插槽</li>
</ul>
<pre><code class="language-javascript"><div slot="mainplaceholder">
<i class="iconfont iconzanwuwendang"></i>
<span>可在此区域进行文档、白板演示等操作</span>
</div></code></pre>
<ul>
<li>
<p>缩略图插槽--humbnailList</p>
<p><img src="http://t-static01-open.e.vhall.com/vss/4f/d7/4fd7b073afa1ed284314d313aed06a20.png" alt="" />
组件提供了缩略图功能。示例如下：</p>
<pre><code class="language-html"><template slot="humbnailList">
<div
:class="isThumbnailEnabled?'document-thumbnail enabled':'document-thumbnail'"
title="文档缩略图"
@click="toggleThumbnail"
>
<i class="iconfont iconsuolvetu"></i>
</div>
<div
:class="isThumbnailEnabled?'vhall-document-thumbnail-container visible':'vhall-document-thumbnail-container'"
ref="thumbnailList"
>
<div class="vhall-document-thumbnail">
<div
v-for="(thumbnail,index) in documentThumbnailList"
:key="thumbnail"
@click="goToPage(index)"
:class="selectedDocumentPage == index?'selected':''"
>
<span>{{index + 1}}</span>
<img :src="thumbnail" />
</div>
</div>
</div>
</template></code></pre>
</li>
<li>
<p>自定义画笔等工具插槽--pencilControlBar</p>
<p><img src="http://t-static01-open.e.vhall.com/vss/ee/18/ee1815ba48d982a5af1209bdbe0eb54c.png" alt="" />
html 部分</p>
<pre><code class="language-html"><template slot="pencilControlBar">
// 自定义画笔工具
</template></code></pre>
</li>
</ul>
<h4>EventBus</h4>
<ul>
<li>
<p>文档sdk实例化成功 component_docSDK_ready</p>
<pre><code class="language-javascript">this.vhallEvent.$on('component_docSDK_ready', sdk => {
this.docSdk = sdk // sdk实例后的对象
})</code></pre>
</li>
<li>
<p>文档信息 component_doc_info
示例：</p>
<pre><code class="language-javascript">this.vhallEvent.$on(doc => {
// doc: {
// showInWatch: false, 观看端是否显示
// docContainerShow: false, 发起端文档框是否显示
// docShowType: '', document:显示文档 board:白板 '':未添加文档
// cid: '' 正在展示的文档或者白板cid，容器id，sdk创建
// },
})</code></pre>
</li>
<li>
<p>文档翻页信息 component_page_info</p>
<pre><code class="language-javascript">this.vhallEvent.$on('component_page_info', pageInfo => {
// pageInfo = {
// total: 10, 总页数
// pageIndex: 2 当前椰树
// }
})</code></pre>
</li>
<li>
<p>演示文档id component_doc_id</p>
<pre><code class="language-javascript">this.vhallEvent.$on('component_doc_id', docId => {
// docId 正在演示的文档的id
})</code></pre>
</li>
<li>
<p>文档加载完成 component_documenet_load_complete</p>
<pre><code class="language-javascript">this.vhallEvent.$on('component_documenet_load_complete', list => {
// list 文档缩略图信息
})</code></pre>
</li>
</ul>
<h3>文档列表组件（doc-list）</h3>
<p>文档列表提供上传、演示、删除等功能
文档列表需要使用 doc-list 组件，结合前一步工具使用中的选择文档按钮一起使用，点击按钮时调用 chooseDocument 方法
使用示例：</p>
<pre><code class="language-html"><doc-list
:accountId="roomInfo.third_party_user_id"
:isEnjoy="false"
:roomId="roomInfo.room_id"
:vssToken="roomInfo.vss_token"
:app_id="roomInfo.app_id"
:docIng="docIng"
ref="doclist"
></doc-list></code></pre>
<h4>props</h4>
<table>
<thead>
<tr>
<th style="text-align: left;">参数</th>
<th style="text-align: left;">说明</th>
<th style="text-align: left;">类型</th>
<th style="text-align: left;">可选值</th>
<th style="text-align: left;">默认值</th>
<th style="text-align: left;">必填</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left;">roleName</td>
<td style="text-align: left;">角色</td>
<td style="text-align: left;">Number</td>
<td style="text-align: left;">1主持人 2观众 3助理 4嘉宾</td>
<td style="text-align: left;">-</td>
<td style="text-align: left;">是</td>
</tr>
<tr>
<td style="text-align: left;">roomId</td>
<td style="text-align: left;">房间id</td>
<td style="text-align: left;">String</td>
<td style="text-align: left;">-</td>
<td style="text-align: left;">-</td>
<td style="text-align: left;">是</td>
</tr>
<tr>
<td style="text-align: left;">accountId</td>
<td style="text-align: left;">用户id</td>
<td style="text-align: left;">String</td>
<td style="text-align: left;">-</td>
<td style="text-align: left;">-</td>
<td style="text-align: left;">是</td>
</tr>
<tr>
<td style="text-align: left;">app_id</td>
<td style="text-align: left;">appId</td>
<td style="text-align: left;">String</td>
<td style="text-align: left;">-</td>
<td style="text-align: left;">-</td>
<td style="text-align: left;">是</td>
</tr>
<tr>
<td style="text-align: left;">vssToken</td>
<td style="text-align: left;">vss验证凭证</td>
<td style="text-align: left;">String</td>
<td style="text-align: left;">-</td>
<td style="text-align: left;">-</td>
<td style="text-align: left;">是</td>
</tr>
<tr>
<td style="text-align: left;">docIng</td>
<td style="text-align: left;">正在演示的文档id</td>
<td style="text-align: left;">String</td>
<td style="text-align: left;">-</td>
<td style="text-align: left;">-</td>
<td style="text-align: left;">否</td>
</tr>
<tr>
<td style="text-align: left;">listType</td>
<td style="text-align: left;">列表类型</td>
<td style="text-align: left;">String</td>
<td style="text-align: left;">-</td>
<td style="text-align: left;">-</td>
<td style="text-align: left;">否</td>
</tr>
<tr>
<td style="text-align: left;">isSearch</td>
<td style="text-align: left;">是否需要搜索功能</td>
<td style="text-align: left;">Boolean</td>
<td style="text-align: left;">-</td>
<td style="text-align: left;">false</td>
<td style="text-align: left;">否</td>
</tr>
</tbody>
</table>
<h4>事件</h4>
<ul>
<li>
<p>showDocList()
说明：展示文档列表</p>
<pre><code class="language-javascript">this.$refs.doclist.showDocList()</code></pre>
</li>
</ul>
<h4>EventBus</h4>
<ul>
<li>点击演示按钮 component_doc_demonstration</li>
</ul>
<pre><code class="language-javascript"> this.vhallEvent.$on(id => {
// id 文档id
})</code></pre>