前端组件开发文档

微吼组件开发及使用规范


问答

<p>[TOC]</p> <h4>使用</h4> <p>基础功能: 问答分类列表、问答进行操作、提问、回答、开启/关闭问答</p> <p>提问者组件(vhQaQuestioner):提问,提问列表(pc + wap) 回答者组件(vhQaAnswer):文字回答、开启/关闭问答、公开此问答等功能(pc)</p> <pre><code class="language-html">&lt;vhQaAnswer :roomId="roomInfo.room_id" :accountId="roomInfo.third_party_user_id" :isQa="isQa" avatarType="nickname" ref="qa" &gt;&lt;/vhQaAnswer&gt;</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;">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;">avatarType</td> <td style="text-align: left;">头像类型</td> <td style="text-align: left;">string</td> <td style="text-align: left;">img 显示图片(未上传显示默认图)nickName 显示昵称首字母</td> <td style="text-align: left;">img</td> <td style="text-align: left;">否</td> </tr> <tr> <td style="text-align: left;">isQa</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;">isBack</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;">faceArr</td> <td style="text-align: left;">自定义表情</td> <td style="text-align: left;">数组</td> <td style="text-align: left;">数组[{ name: '',src: ''}]</td> <td style="text-align: left;">提供默认</td> <td style="text-align: left;">否</td> </tr> </tbody> </table> <h4>EventBus</h4> <ul> <li> <p>新消息 components_qa_new_content 触发时机:当前用户的问答区域展示内容区发生变化时 参数说明:(参照下面示例) 示例:</p> <pre><code class="language-javascript">this.$vhallEvent.$on('components_qa_new_content', data =&gt; { let permission = data.qaPermission // 参数 prop - qaPermission的值 let type = data.type // 变更内容的类型 create新的提问 answer新的文字回答 answerDeal提问处理 recall 撤回回答 let status = data.status // 类型的具体分类,type为answerDeal时才有值 '语音回复'/'不处理' if(permission) { if(type=='create') { // 新的提问 } else if(type == 'answer') { // 新的文文字回答 } else if(type == 'answerDeal' &amp;&amp; status == '语音回复') { // 提问被标记为语音回复 } else if(type == 'answerDeal' &amp;&amp; status == '不处理') { // 提问不做处理 } else if(type == 'recall') { // 文字回复被撤回 } } else { if(type=='create') { // 新的提问 } else if(type == 'answer') { // 新的文文字回答 } else if(type == 'answerDeal' &amp;&amp; status == '语音回复') { // 提问被标记为语音回复 } else if(type == 'recall') { // 文字回复被撤回 } } })</code></pre> <pre><code class="language-html">&lt;vhQaQuestioner :roomId="roomInfo.room_id" :accountId="roomInfo.third_party_user_id" :qaPermission="false" :isQa="isQa" :banChatAll="banChatAll" :banChat="banChat" ref="qa" &gt;&lt;/vhQaQuestioner&gt;</code></pre> </li> </ul> <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;">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;">banChatAll</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;">banChat</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;">isPrivate</td> <td style="text-align: left;">当qaType=‘all’是生效,默认的提问的类型是否为私密</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> <tr> <td style="text-align: left;">avatarType</td> <td style="text-align: left;">头像类型</td> <td style="text-align: left;">string</td> <td style="text-align: left;">img 显示图片(未上传显示默认图)nickName 显示昵称首字母</td> <td style="text-align: left;">img</td> <td style="text-align: left;">否</td> </tr> <tr> <td style="text-align: left;">faceArr</td> <td style="text-align: left;">自定义表情</td> <td style="text-align: left;">数组</td> <td style="text-align: left;">数组[{ name: '',src: ''}]</td> <td style="text-align: left;">提供默认</td> <td style="text-align: left;">否</td> </tr> </tbody> </table> <h4>方法</h4> <ul> <li> <p>openQa(value) 参数: value: true/false 说明:打开房间的 问答功能</p> <pre><code class="language-javascript">this.$refs.qa.openQa(true) // 打开问答功能 this.$refs.qa.openQa(false) // 关闭问答功能</code></pre> </li> <li>open() 说明:展示问答面板 <pre><code class="language-javascript">this.$refs.qa.open()</code></pre></li> </ul> <h4>EventBus</h4> <ul> <li> <p>新消息 components_qa_new_content 触发时机:当前用户的问答区域展示内容区发生变化时 参数说明:(参照下面示例) 示例:</p> <pre><code class="language-javascript">this.$vhallEvent.$on('components_qa_new_content', data =&gt; { let permission = data.qaPermission // 参数 prop - qaPermission的值 let type = data.type // 变更内容的类型 create新的提问 answer新的文字回答 answerDeal提问处理 recall 撤回回答 let status = data.status // 类型的具体分类,type为answerDeal时才有值 '语音回复'/'不处理' if(permission) { if(type=='create') { // 新的提问 } else if(type == 'answer') { // 新的文文字回答 } else if(type == 'answerDeal' &amp;&amp; status == '语音回复') { // 提问被标记为语音回复 } else if(type == 'answerDeal' &amp;&amp; status == '不处理') { // 提问不做处理 } else if(type == 'recall') { // 文字回复被撤回 } } else { if(type=='create') { // 新的提问 } else if(type == 'answer') { // 新的文文字回答 } else if(type == 'answerDeal' &amp;&amp; status == '语音回复') { // 提问被标记为语音回复 } else if(type == 'recall') { // 文字回复被撤回 } } })</code></pre> </li> </ul>

页面列表

ITEM_HTML