SlugTeam

# 使用

# 选项

# el

  • 类型： String | HTMLElement

  • 详细： 新版删除该选项，使用组件的形式 嵌入对应的模板中；

# 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 自由幻想

未提供的游戏 id 以及新游接入需要在 sop 平台提交单据，可以联系企业微信 社区助手；

# options.title

  • 类型：String

  • 默认值：document.title

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

# options.stime

  • 类型：Number

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

# options.login_type

  • 类型：String

  • **详细：**登录方式删除，由用户传入的登录态决定

# options.resource_type

  • 类型：String

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

# options.wxconvert

  • 类型：String

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

# options.objid

  • 类型：Number | String

  • **详细：**当前资源的自定义 id，需为长度不超过 20 的整数或者字符串

  • 示例：

# 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 移动端视频
ingame 微社区通用

# options.href

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

  • 类型：String

  • 默认值：location.href

  • **详细：**废弃

# 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.nickname

  • 类型：String

  • 可选： // 自定义当前用户昵称

    # options.avatar

  • 类型：String

  • 可选： // 自定义当前用户头像

# options.official_icon_mark

  • 类型：Boolean

  • 可选： // 仅支持官方回复

# options.official_icon_mark

  • 类型：Boolean

  • 可选： // 是否显示官方账号标示

  • 类型：Object

  • **详细：**登录授权相关参数配置，若无相关需求可缺省，详见下文

# events

  • 类型：Object

  • 可选：

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

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

    // 我的评论组件点击文章标题后的回调 onTitleClick: (comment) => { console.log('自定义举报', comment) }

# login.qqappid

  • 类型：String

  • **详细：**废弃，请使用 loginTokenParams 传递登录态

# login.wxappid

  • 类型：String

  • **详细：**废弃，请使用 loginTokenParams 传递登录态

  • 类型：String

  • **详细：**废弃，暂时无法申请 openlink

# login.appName

  • 类型：String

  • **详细：**废弃

# login.logoUrl

  • 类型：String

  • **详细：**废弃

# login.scope

  • 类型：String

  • 默认值：'snsapi_userinfo'

  • **详细：**废弃

# asyncLogin

  • 类型：Function

  • 默认值： 无

  • 详细： 废弃

  • 示例：

# infinite

  • 类型：String

  • 默认值：scroll

  • **详细：**加载更多评论的方式

  • 参考：

可选值 描述
scroll 默认值，监听 评论组件父元素 的 scroll 事件自动加载下一页评论数据
click 手动点击加载按钮进行加载

# 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'] 自定义配色方案，具体配色方法请参考通用微社区管理端的主题色配置

# unLoginHandle

注意：此选项由 comment-next 版本新增

  • 类型：Function

  • **详细：**未登录情况点击评论，点赞，举报等操作的回调方法

# 全局 API

# 响应式数据

评论系统采用 vue-use 模式，导出了核心数据属性，列表以及数据请求方法：

// 评论列表核心数据与方法
import { useCommentList } from '@tencent/slug-comment-lib/dist/v3'

const {
  isFirstLoad, // 是否是第一次加载
  totalNum, // 评论总数
  hotList, // 热门评论数组
  newList, // 最新评论数组
  loading, // 是否加载中
  more, // 是否还有更多评论
  ltime, // 从第几个评论时间开始
  reportType, // 举报类型
  repliesmore, // 是否存在更多回复
  repliesLoading, // 回复是否加载中
  loadList, // 加载评论列表
  reset, // 重置评论列表，清空
  deleteMyComment, // 删除自己的评论
  like, // 点赞
  report, // 举报
  submitComment, // 提交评论
  submitReply, // 提交回复
  deleteReply, // 删除回复
  loadReplies, // 加载回复列表
} = useCommentList(options)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// 组件配置核心数据与方法
import { useLoginInfo } from '@tencent/slug-comment-lib/dist/v3'

// 直接使用评论带视图的组件之前需要通过响应式数据传入initProps：
const config = ref({
  options: {
    title: '',
    gameid: 'zhuoyao',
    objid: '',
    stime: 0,
    moduleId: 'ingame',
  },
  loginTokenParams: '', // 登录态，可以传递msdk，微信，手q，sluglogin，milo等等，不传或者传空则默认从sessionStorage.tokenParams获取
  unLoginHandle: () => {
    // 未登录状态下点击 评论，点赞，举报等按钮后的行为，例如弹出登录选择框
    alert('请先登录')
  },
  infinite: 'scroll',
  replyMode: 'bar',
  allCommentUrl: '',
  theme: 'light',
  themeConf: '',
})

// 如果需要重设标题，只需改变options参数评论系统会自动刷新内容
setTimeout(() => {
  config.value.options = {
    title: '我的祈愿符不小心用完了怎么才能获得呢？请大咖们告诉我，谢谢啦！',
    gameid: 'zhuoyao',
    objid: 'DJ7136697',
    stime: 202110,
    moduleId: 'ingame',
  }
}, 1000)

const {
  loginInfo, // 登录态相关信息，该属性为只读
  setLoginConfig, // 设置登录态，如果sessionStorage.tokenParams有登录态，则会默认获取，无需手动设置
} = useLoginInfo(config.value.options);
setLoginConfig();

const {
  loginTokenParams, // 登录态字符串
  loginType, // 登录态的方式 msdk | msdkv5 | slug | ''
  isLogin, // 当前是否已登录
  openid, // 当前登录用户的openid
  avatar, // 当前登录用户的头像
  nickname, // 当前登录用户的昵称
} = loginInfo
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

← 登录 →