推荐卡片
<p>[TOC]</p>
<h3>卡片列表</h3>
<h4>基础使用</h4>
<p>基础功能提供了卡片列表，列表中展示了卡片的封面、名称、描述、按钮链接、操作（编辑/删除）
基础功能的时候，需要将编辑需要跳转的地址传入（不包括动态卡片 id 部分）
如：/card-update/:roomId/:cardId，这个路由中 roomId 和 cardId 都为动态的值，
此时传入的编辑的路由地址：/card-update/lss_38d82c61</p>
<pre><code class="language-html"><card-list :roomId="roomInfo.room_id" :editUrl="`/card-update/${roomId}`"></card-list></code></pre>
<p><strong>列表为空时的空白区域显示内容（插槽）-- cardBlank</strong></p>
<p>使用时，直接在插槽中放入当列表长度为空时，列表区域需要展示的内容。业务层无需控制该插槽的显示，组件内部已进行控制</p>
<h4>EventBus</h4>
<table>
<thead>
<tr>
<th style="text-align: left;">name</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;">component_card_num</td>
<td style="text-align: left;">卡片的数量</td>
<td style="text-align: left;">卡片的数量</td>
<td style="text-align: left;">-</td>
</tr>
</tbody>
</table>
<h3>新建/编辑</h3>
<h4>使用</h4>
<p>新建和编辑组件实际为同一个组件，若往组件中传入了 card_id 则为编辑卡片，否则就为新增卡片，业务端只需要控制是否传入 card_id 是否传入，以及保证传入的值的正确。
下面提供一个例子
create.vue</p>
<pre><code class="language-html"><template>
<div class="vh-doc-create-demo">
<cardCreate
:room_id="roomId"
:account_id="user.account_id"
:vss_token="vssToken"
:card_id="cardId"
></cardCreate>
</div>
</template></code></pre>
<p>定义路由：实际着这两个路由指向的同都是 create.vue 组件。
在 create.vue 中我们可以利用 <code>this.\$route.param.cardId</code> 来编辑时需要的需要的 card_id
如: <code>card_id: this.$route.param.cardId || ''</code></p>
<pre><code class="language-javascript"> {
path: '/card-create/:roomId',
name: 'card-create',
component: () => import('@/demos/card/create')
},
{
path: '/card-update/:roomId/:cardId',
name: 'card-update',
component: () => import('@/demos/card/create')
},</code></pre>
<h4>EventBus</h4>
<table>
<thead>
<tr>
<th style="text-align: left;">Name</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;">component_card_success</td>
<td style="text-align: left;">新建/编辑成功后派发的时间</td>
<td style="text-align: left;">-</td>
<td style="text-align: left;">-</td>
</tr>
</tbody>
</table>
<h3>发起端/观看端</h3>
<h4>使用</h4>
<p>当业务层需要打开面板时 <code>this.$refs.cardWatch.openCard(type, this.card_id),</code>
type=='host'时，面板展示内容为卡片列表
当 type=='other'时，card_id 必传，面板展示内容为 card_id 对应的推荐卡片</p>
<pre><code class="language-html"><cardWatch ref="cardWatch" :roomId="roomInfo.room_id"></cardWatch></code></pre>