# 使用

# 选项

# el

类型：String | HTMLElement
**详细：**提供一个在页面上已存在的 DOM 元素作为 Comment 实例的挂载目标。可以是 CSS 选择器，也可以是一个 HTMLElement 实例。提供的元素只能作为挂载点，因为所有的挂载元素会被 Vue 生成的 DOM 替换。

注意：Vue 项目开发时，你应当使用 <comment-main> 组件代替该参数。查看更多信息

# options

类型：Object
**详细：**接口请求的所需相关参数，详见下文

# options.gameid

类型：String
**详细：**游戏 / 业务 id
参考：

可选值	游戏名称
bwlb	保卫萝卜
cfm	穿越火线
cqsj	传奇世界
ddtank	弹弹堂
dn	龙之谷
hlddz	欢乐斗地主
huoying	火影忍者
jtlq	街头篮球
jx	剑侠情缘
kofd	拳皇命运
majiang	欢乐麻将
mhzx	梦幻诛仙
miku	初音未来：梦幻歌姬
mv2	纪念碑谷 2
qj2	奇迹觉醒
qjnn	奇迹暖暖
qsm	QQ 飞车手游
rxcq	热血传奇
shootgame	魂斗罗
smoba	王者荣耀
syly	趣鱿
tlbb	天龙八部
ttxq	天天象棋
vc	乱世王者
wepang	天天爱消除
wepoker	天天德州
xxsy	寻仙手游
ylzt	御龙在天
zht	征途
ztj	择天记
zyhx	自由幻想

# options.title

类型：String
默认值：document.title
**详细：**当前资源的标题，默认为当前 HTML 页面 document.title 的值

# options.stime

类型：Number
**详细：**当前资源的创建时间，年月即可，如：201710

类型：String
**详细：**登录方式，可选：wxm/qqm/qqoidb

# options.resource_type

类型：String
详细： 资源来源类型，默认空

# options.wxconvert

类型：String
详情： wxappid 需要转换时填写，具体咨询后台开发

# options.objid

类型：Number
**详细：**当前资源的自定义 id，需为长度不超过 20 的整数
示例：

// 可设置为接入评论时的毫秒值，保证资源 id 的唯一性
console.log(Date.now()) // 1506764637811

new SlugComment({
  options: {
    objid: '1506764637811',
    // ...
  },
})

1
2
3
4
5
6
7
8
9

# options.moduleId

类型：String
**详细：**当前资源所属的业务模块 id
参考：

可选值	描述
anchor_mobile	移动端主播
boss_illustrations_mobile	boss 图鉴
clothes_mobile	私人衣橱
comic_mobile	移动端同人资讯
death_map_mobile	死亡地图
feed	王者荣耀资讯
feed_mobile	移动端资讯
gun_center	枪械中心
match_feed_mobile	赛事中心资讯
match_mobile	移动端赛事
match_team_mobile	赛事中心战队留言板
match_video_mobile	赛事中心视频
micro_forum_mobile	微论坛
music_mobile	移动端音乐
novel_mobile	移动端小说
player_mobile	球员留言板
season_match_mobile	移动端季中赛
topics_mobile	移动端话题
topics_wall_mobile	话题墙
video_mobile	移动端视频

# options.href

注意：此选项仅支持 v3.6 +

类型：String
默认值：location.href
**详细：**当前接入评论的页面 URL

# options.custom_report

注意：此选项仅支持 v4.3.0+

类型：Boolean
默认值：false
详细： 是否使用自定义举报

# options.channel

类型：Number
默认值：1
**详细：**评论渠道标识
参考：

可选值	描述
1	微社区
2	小程序
3	王者荣耀 - 赛事中心
4	PC 端官网
5	移动端官网
6	移动端同人站
7	王者荣耀助手 App

# options.num

类型：Number
默认值：8
**详细：**每次请求加载的评论条数
参考：

可选值	描述
5 - 10	可选值范围

# options.hotlevel

类型：Number
默认值：10
**详细：**成为热门评论的获赞数阈值

# options.hotnum

类型：Number
默认值：3
**详细：**热门评论条数

# options.events

类型：Object
可选：

// 头像点击事件 onAvatarClick: (comment) => { console.log(comment) }

// 自定义举报 onCustomReport: (comment) => { console.log('自定义举报', comment) }

# options.nickname
类型：String
可选： // 自定义用户昵称传入

# options.avatar
类型：String
可选： // 自定义用户头像传入

# options.official_icon_mark

类型：Boolean
可选： // 仅支持官方回复

# options.official_icon_mark

类型：Boolean
可选： // 是否显示官方账号标示
类型：Object
**详细：**登录授权相关参数配置，若无相关需求可缺省，详见下文

类型：String
**详细：**QQ 登录授权（非 MSDK）所需的 appid

类型：String
**详细：**微信登录授权（非 MSDK）所需的 appid

注意：此选项仅支持 v3.6 +

类型：String
**详细：**唤起微信登录授权的 openlink，需要产品将 wxappid 及完整的页面链接（仅支持 https 协议）提供给 v_chenehe(何成) 进行生成

类型：String
**详细：**业务在登录授权时显示的中文名称

类型：String
**详细：**业务在登录授权时显示的正方形 logo

类型：String
默认值：'snsapi_userinfo'
**详细：**微信登录静默授权相关参数

# asyncLogin

类型：Function
默认值： 无
详细： 异步登录方式，在特殊情况下(例如：微应用)需配置,与配置项customFetch配合使用
示例：

  new SlugComment({
    ...
    login: {
      asyncLogin:()=>Promise<{loginType, appid}: {
        loginType?: string, appid?: string
      }>
    }
    ...
  })

1
2
3
4
5
6
7
8
9

# customFetch

**类型： **Function
详情： 参考微应用本地请求方式

# env

类型：String
详细： 当前环境

可选值	描述
production	生产环境
development	开发环境

# infinite

类型：String
默认值：scroll
**详细：**加载更多评论的方式
参考：

可选值	描述
scroll	默认值，监听 `window` 的 `scroll` 事件自动加载下一页评论数据
click	手动点击加载按钮进行加载
none	不使用预设的评论加载方式，通常需要通过调用 `requestCommentList()` 实例方法手动加载下一页评论数据，查看更多信息

# replyMode

类型：String
默认值：bar
**详细：**设置发表评论按钮与输入面板的表现形式
参考：

可选值	描述
bar	默认值，发表评论按钮表现为条状，始终悬浮于页面底部，点击弹出输入面板，对应 `comment-add-bar` 组件
button	发表评论按钮表现为按钮，位于评论组件右上角，点击弹出输入面板，对应 `comment-add-button` 组件
inline	无发表评论按钮，输入面板直接内联于评论列表中
none	不使用预设的评论发表模式，通常需要通过使用 `comment-add-bar` 与 `comment-add-button` 组件自定义布局，查看更多信息

# allCommentUrl

类型：String
**详细：**全部评论页的 URL，当 replyMode = bar 时，设置了该参数才会显示 "全部评论" 按钮，该参数最终会被渲染为 a 标签的 href 属性

# theme

注意：此选项仅支持 v3.6 +

类型：String
默认值：light
**详细：**设置评论组件主题
参考：

可选值	描述
light	默认值，白色主题，适用于亮色调页面
dark	黑色主题，适用于暗色调页面

# themeConf

注意：此选项仅支持 v3.10 +

类型：String/Array
默认值：``
**详细：**设置评论组件皮肤配色
参考：

可选值	描述
'remote'	拉取通用微社区远程主题配置文件来渲染评论组件
['#000','#333']	自定义配色方案，具体配色方法请参考通用微社区管理端的主题色配置

# 全局 API

# SlugComment.version

**详细：**提供字符串形式的 SlugComment 安装版本号
示例：

import Vue from 'vue'
import SlugComment from '@tencent/comment'

Vue.use(SlugComment)

console.log(SlugComment.version) // 3.3.0

1
2
3
4
5
6

# Vue 实例扩展方法

# this.$toast(content, [type])

参数名称	描述	类型	默认值	可选值
content	提示的文本内容	String	--	--
type	提示的类型	String	--	`center`

用法：
Toast 提示为 Vue 实例扩展方法，所有 Vue 实例均可调用。

注意：若 Vue 原型链中存在同名方法，则该方法不会被注入。
示例：

// 默认显示在底部
this.$toast('发表成功')

// 显示在屏幕中间
this.$toast('发表成功', 'center')

1
2
3
4
5

# 响应式数据

评论系统通过 comment 选项，提供了一种机制将实例从 Vue 根组件注入到每一个子组件中。因此在 Vue 应用开发中你可以通过 this.$comment 去访问它们：

const comment = new SlugComment({
  /* ... */
})

const app = new Vue({
  el: '#app',
  // 把 `comment` 对象提供给 `comment` 选项，这样可以把 Comment 实例注入所有的子组件
  comment,
  render: (h) => h('comment-main'),
})

1
2
3
4
5
6
7
8
9
10

由于评论系统核心数据存储都是响应式的，所以你可以使用 computed 返回计算属性或者通过 watch 去监听它们：

const Demo = {
  template: `<div>{{ total }}条评论</div>`,
  computed: {
    total() {
      return this.$comment.comments.total
    },
  },
  watch: {
    '$comment.comments.latest': function () {
      console.log('评论数据更新了')
    },
  },
}

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

如果需要监听评论中回复列表的变化，可以使用深度监听：

const Demo = {
  // ...
  watch: {
    '$comment.comments.latest': {
      handler: function () {
        console.log('评论数据更新了')
      },
      deep: true,
    },
  },
}

1
2
3
4
5
6
7
8
9
10
11

# comment.comments

类型：Object
**详细：**评论相关数据

# comment.comments.hot

类型：Array
**详细：**热门评论

# comment.comments.latest

类型：Array
**详细：**最新评论

# comment.comments.total

类型：Number
**详细：**评论总数

# comment.comments.own

注意：此属性仅支持 v3.6 +

类型：Array
**详细：**个人中心评论数据

# comment.userInfo

类型：Object
**详细：**当前登录用户的信息

# comment.userInfo.openid

类型：String
**详细：**当前登录用户的 openid

# comment.userInfo.avatar

类型：String
**详细：**当前登录用户的头像 URL

# comment.userInfo.nickname

类型：String
**详细：**当前登录用户的昵称

# 实例方法

# comment.ajax(options)

参数名称	描述	类型	默认值	可选值
options	Ajax 请求参数配置项	Object	--	与 jQuery / Zepto Ajax 请求参数一致

用法：
该函数用法与 $.ajax() 并无不同，但由于该方法为 Ajax 请求的高级封装，所以仅适用于评论相关接口数据请求，不适用于其他接口请求。
我们已经预设了所有评论相关接口的请求路径，所以你只需使用预设的 URL 标识即可调用对应接口：
```
* `'USER_INFO'` 获取用户信息

* `'COMMENT_LIST'` 获取评论列表

* `'DELETE_COMMENT'` 删除评论

* `'LIKE'` 评论点赞

* `'REPORT'`举报评论

* `'REPLY_LIST'` 获取回复列表

* `'SUBMIT_REPLY'` 提交新回复

* `'DELETE_REPLY'` 删除回复
```
示例：

comment.ajax({
  url: 'USER_INFO',
  success: (data) => {
    // 获取用户信息
  },
})

1
2
3
4
5
6

# comment.refresh([config])

参数名称	描述	类型	默认值	可选值
config	刷新参数配置项	Object	`{}`	与构造函数参数配置项一致，详见选项

用法：
更新评论组件，一般用于单页应用路由切换后刷新评论内容。
示例：

// 初始化当前评论组件
comment.refresh()

// 刷新并加载新评论数据
comment.refresh({
    options: {
        title: '切换评论'
        objid: '1507703738959'
    }
})

1
2
3
4
5
6
7
8
9
10

注意：目前仅响应 config.options 的更新操作。

# comment.requestCommentList()

用法：
请求评论列表，每次调用自动加载下一页数据。
通常情况下，你并不需要手动调用该方法，因为当构造函数参数 infinite 传入有效的预设值时，组件会在恰当的时机自动调用该方法。
如果预设的加载逻辑不满足要求（例如使用 Iscroll 控制滚动时），手动调用该方法是非常必要的，不过别忘了将 infinite 设为 none。
示例：

let iscroll = new IScroll({ /* ... */ })
iscroll.on('scrollEnd', function () {
    if ( /* 加载条件判断 */ ) {
        comment.requestCommentList()
    }
})

1
2
3
4
5
6

# comment.submitComment(content)

注意：此方法仅支持 v3.6 +

参数名称	描述	类型	默认值	可选值
content	评论内容	String	--	--

用法：
发表评论接口，返回一个 Promise 实例。
示例：

comment.submitComment('新评论').then(
  () => {
    console.log('发表成功')
  },
  () => {
    console.log('发表失败')
  }
)

1
2
3
4
5
6
7
8

← 登录组件 →

# 使用

# 选项

# el

# options

# options.gameid

# options.title

# options.stime

# options.login_type

# options.resource_type

# options.wxconvert

# options.objid

# options.moduleId

# options.href

# options.custom_report

# options.channel

# options.num

# options.hotlevel

# options.hotnum

# options.events

# options.nickname

# options.avatar

# options.official_icon_mark

# options.official_icon_mark

# login.qqappid

# login.wxappid

# login.openlink

# login.appName

# login.logoUrl

# login.scope

# asyncLogin

# customFetch

# env

# infinite

# replyMode

# allCommentUrl

# theme

# themeConf

# 全局 API

# SlugComment.version

# Vue 实例扩展方法

# this.$toast(content, [type])

# 响应式数据

# comment.comments

# comment.comments.hot

# comment.comments.latest

# comment.comments.total

# comment.comments.own

# comment.userInfo

# comment.userInfo.openid

# comment.userInfo.avatar

# comment.userInfo.nickname

# 实例方法

# comment.ajax(options)

# comment.refresh([config])

# comment.requestCommentList()

# comment.submitComment(content)