# 组件文档

# 通用 Props/Events

Props
- qaCfg: 默认为 this.$qaCfg、一般无需配置
- nav: Object 建议在入口统一配置、一般无需配置
Events
- nav-goto：完全手动接管默认的导航操作、一般无需配置

# CenterPane

Example
- 我的提问 <slug-qa-center-pane tpl="q" />
- 我的回答 <slug-qa-center-pane tpl="a" />
Props:
- tpl: 'q' | 'a'
- meta: 无数据时的文案、一般无需配置
- msgTips: 消息中心消息的文案、一般无需配置

# Find & Ask & Search （重点！）

<slug-qa-ask v-if="page === 'ask'" />
<slug-qa-search v-else-if="page === 'search'" />
<slug-qa-find
  v-else
  ref="find"
  :tabs="tabs"
  :tab="tab"
  @switch-tab="to => switchTab(to)"
/>

1
2
3
4
5
6
7
8
9

{
  tabs: [
    { label: 'discuss', name: '热门讨论' },
    { label: 'wait', name: '待回答问题' },
    { label: 'reward', name: '悬赏令' },
    { label: 'attention', name: '关注的问题' },
    { label: 'player', name: '热门玩家' },
  ],
}

1
2
3
4
5
6
7
8
9

Find's Props:
- tabs: Array 可参照例子中对现有模块进行删减、排序
- tab: String 需要配合 this.$refs.find.reload() 方法使用，详见下文详细说明
Find's Events:
- switch-tab: 仅使用 tab 手动配置 tab 时有此事件
Ask's Props:
- titleMin: Number default=5
- titleMax: Number default=50
- contentMin: Number default=5
- contentMax: Number default=100
- min & max 后端也有限制，不建议修改

关于 <slug-qa-find ref="find" /> 的 tab 操作方法说明：

使用内置逻辑自动控制（切换不会反应到 url 中）
手动控制，使用 tab 指定标签页，并在 switch-tab 事件时调用 this.$refs.find.reload()。如果需要路由切换，先执行 this.$router.replace 然后在 this.$nextTick 中 reload。

switchTab(tab) {
  this.$router.replace({
    name: 'qa',
    query: {
      qa_find_tab: tab,
    },
  });
  this.$nextTick(() => {
    this.$refs.find.reload();
  });
},

1
2
3
4
5
6
7
8
9
10
11

# Detail

Props:
- qid: Number
- ansMin: Number default=5
- ansMax: Number default=100
- min & max 后端也有限制，不建议修改

← Example（async、建议）