# 起步

每个评论模块都是通过构造函数创建一个 SlugComment 实例生成的,下面是一个简单例子:

new SlugComment({
  el: '#comment',
  options: {
    gameid: 'dn', // 游戏 id
    stime: '201804', // 当前资源的创建时间,年月即可
    objid: '15232683', // 当前资源的自定义 id,需保证唯一性
    moduleId: 'feed_mobile', // 当前资源所属的业务模块 id
  },
  login: {
    // 若无微信 / QQ 登录授权需求,则可缺省
    qqappid: '1105309683',
    wxappid: 'wxfdab5af74990787a',
    openlink:
      'https://game.weixin.qq.com/cgi-bin/comm/openlink?noticeid=90124965&appid=wxfdab5af74990787a&url=https%3A%2F%2Fdn.qq.com%2Fm%2Ffan%2Fdist%2Findex.html#wechat_redirect',
  },
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

更多参数配置选项及说明请查阅 选项

# Vue 项目开发

评论系统通过 comment 选项,提供了一种机制将实例从 Vue 根组件注入到每一个子组件中,因此在进行 Vue 项目开发时,我们建议你这么做:

const comment = new SlugComment({
  options: {
    gameid: 'smoba',
    moduleId: 'feed',
  },
})

const app = new Vue({
  el: '#app',
  comment, // 把 `comment` 对象提供给 `comment` 选项,这样可以把 Comment 实例注入所有的子组件
  // ...
})
1
2
3
4
5
6
7
8
9
10
11
12

这样你就可以在任何组件中通过 this.$comment 去访问评论实例:

<template>
  <comment-main></comment-main>
</template>

<script>
  export default {
    mounted() {
      this.$comment.refresh({
        options: {
          stime: '201804',
          objid: '15232684',
        },
      })
    },
  }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

注意:Vue 项目开发时,你应当使用 <comment-main> 组件代替构造函数中传入的 el 参数配置项。查看更多信息