# 安装

# `<script>` 标签引入

直接使用 <script> 标签引用 CDN 资源，slugCommentLib 会被注册为一个全局对象。

请确保在引入移动版评论之前引入所有依赖：

Vue 2.3.0 +
@vue/composition-api

或者

Vue 3.0 +

在 Vue 之后引入所有导出来的变量都会挂在 slugCommentLib 下面。

<script src="https://tiem-cdn.qq.com/slugteam/libs/Vue/vue.global.prod.js"></script>
<script src="https://tiem-cdn.qq.com/slugteam/components/function/v2/index.min.js"></script>
<script src="https://tiem-cdn.qq.com/slugteam/components/request/v2/index.min.js"></script>
<script
  src="https://tiem-cdn.qq.com/slugteam/components/comment-lib/v0.5/v3/index.umd.js"
  charset="utf-8"
></script>

1
2
3
4
5
6
7

基于 vue2 的版本：

<div id="app">
  <comment-main :init-props="initData"></comment-main>
</div>

<script src="https://tiem-cdn.qq.com/slugteam/libs/Vue/vue.2.6.12.min.js"></script>
<script src="https://tiem-cdn.qq.com/slugteam/components/function/v2/index.min.js"></script>
<script src="https://tiem-cdn.qq.com/slugteam/components/request/v2/index.min.js"></script>
<script src="https://tiem-cdn.qq.com/slugteam/libs/Vue/vue-composition-api.js"></script>
<script
  src="https://tiem-cdn.qq.com/slugteam/components/comment-lib/v0.5/v2/index.umd.js"
  charset="utf-8"
></script>

1
2
3
4
5
6
7
8
9
10
11
12

最终使用的方式与下述 npm 安装方式基本一样，只是不需要用 import 来导入对应的模块，只需要从 slugCommentLib 全局对象下获取：

const App = Vue.defineComponent({
  components: {
    CommentMain: slugCommentLib.CommentMain,
  },
  setup() {
    const initData = Vue.ref({
      options: {
        title: '',
        gameid: 'zhuoyao',
        objid: '',
        stime: 0,
        moduleId: 'ingame',
      },
      loginTokenParams: '', // 自行传递登录态，不传默认从sessionStorage.tokenParams获取，微社区的登录态一般都存在sessionStorage.tokenParams
      // 如果是用milo登录，需要自行拼接参数例如qq的 '?appid=xxx&uin=xxx&skey=xxxx&login_type=qqm' 或者微信的 '?appid=xxx&openid=xxx&access_token=xxx&login_type=wxm'
      unLoginHandle: () => {
        alert('请先登录')
      },
      infinite: 'scroll',
      replyMode: 'bar',
      allCommentUrl: '',
      theme: 'dark',
      themeConf: '',
      env: 'production', // dev | production 开发环境/生产环境
    })
    // 需要更新评论组件参数可以直接修改options
    setTimeout(() => {
      initData.value.options = {
        title: '我的祈愿符不小心用完了怎么才能获得呢？请大咖们告诉我，谢谢啦！',
        gameid: 'zhuoyao',
        objid: 'DJ7136697',
        stime: 202110,
        moduleId: 'ingame',
      }
    }, 1000)

    return {
      initData,
    }
  },
})

// vue3挂载方式
Vue.createApp(App).mount('#app')

// vue2挂载方式
new Vue({
  render: (h) => h(App),
}).$mount('#app')

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

# NPM

在大型 / 单页应用中使用评论组件，我们推荐使用 NPM 安装，NPM 能很好地和 webpack 等模块打包器配合使用。新版本采用 vue-use 模式开发，核心数据与视图完全解耦，开发者可以根据业务实际情况来引入对应的属性和方法，它们支持 tree shaking，不用担心体积问题；

如果业务方没有特殊需求，开发者直接使用 CommentMain 这个核心视图组件，并初始化基本参数既可正常使用评论的全部完整功能；
如果业务方想要只使用部分视图，进行拼装，可以选择以下组件：CommentMine, CommentMain, CommentBar, CommentButton, CommentReply, CommentBarrage, CommentInput；初始化参数方式与完整版一样；
如果业务方想要完全定制视图功能，例如只要评论不要回复、不需要举报、不需要点赞等，可以只使用 useCommentList 核心数据和方法；

使用 npm 或 tnpm 命令进行安装：

npm install --save-dev @tencent/slug-comment-lib

在 vue2.x 版本下需要安装 compsition-api

npm install --save-dev @vue/composition-api

移动版评论组件作为一个 Vue 组件：

import { defineComponent } from 'vue';
import CommentMain from '@tencent/slug-comment-lib/dist/v3';

export default defineComponent({
  name: 'detail',
  components: {
    CommentMain,
  },
  setup() {
    const initData = ref({
      options: {
        title: '',
        gameid: 'zhuoyao',
        objid: '',
        stime: 0,
        moduleId: 'ingame'
      },
      loginTokenParams: '', // 自行传递登录态，不传默认从sessionStorage.tokenParams获取
      unLoginHandle: () => {
        alert('请先登录')
      },
      infinite: 'scroll',
      replyMode: 'bar',
      allCommentUrl: '',
      theme: 'dark',
      themeConf: '',
      env: 'production' // dev | production 开发环境/生产环境
    });
    // 需要更新评论组件参数可以直接修改options
    setTimeout(() => {
      initData.value.options = {
        title: '我的祈愿符不小心用完了怎么才能获得呢？请大咖们告诉我，谢谢啦！',
        gameid: 'zhuoyao',
        objid: 'DJ7136697',
        stime: 202110,
        moduleId: 'ingame',
      };
    },1000);

    return {
      initData,
    }
  }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

# 开发环境 vs. 生产环境

通过设置 options.sandbox=1 来区分调用生产和测试环境数据，不传或者传空值则默认从正式环境获取数据。

使用 →

# 安装

# <script> 标签引入

# NPM

# 开发环境 vs. 生产环境

# `<script>` 标签引入