# 组件
# Add 添加评论
通常用于自定义发表评论按钮布局
# Add Usage
# 基础用法
<!-- 条状评论发表按钮,效果与设置 `replyMode = 'bar'` 一致 -->
<comment-add-bar></comment-add-bar>
<!-- 条状评论发表按钮,效果与设置 `replyMode = 'button'` 一致 -->
<comment-add-button></comment-add-button>
1
2
3
4
5
2
3
4
5
# Barrage 弹幕
# Barrage Usage
# 基础用法
弹幕组件并不与评论数据耦合在一起,因此你可以通过 barrages
传入任何你希望实现弹幕效果的数据,组件默认会无限循环滚动它们。
这里我们以评论数据为例:
<comment-barrage
:barrages="$comment.comments.latest"
avatar="imgurl"
content="content"
></comment-barrage>
1
2
3
4
5
2
3
4
5
# 自定义位置
弹幕组件默认使用 position: fixed
进行定位:
.comment-barrage {
z-index: 980;
position: fixed;
bottom: 50px;
left: 10px;
/* ... */
}
1
2
3
4
5
6
7
2
3
4
5
6
7
组件本身默认并不提供定位相关的 Prop,因为 Vue 可以很好地处理组件的非 Prop 特性,所以你可以一如既往地使用 class
与 style
重写样式:
<style>
.absolute {
position: absolute;
top: 100px;
left: 10px;
}
</style>
<template>
<comment-barrage
:barrages="$comment.comments.latest"
avatar="imgurl"
content="content"
class="absolute"
></comment-barrage>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
查看更多信息 了解 Vue 对非 Prop 特性的处理
# Barrage Props
参数名称 | 描述 | 类型 | 默认值 | 可选值 |
---|---|---|---|---|
barrages | 弹幕数据池 [required] | Array | -- | -- |
avatar | 弹幕头像字段名称 [required] | String | -- | -- |
content | 弹幕内容字段名称 [required] | String | -- | -- |
line | 弹幕显示条数 | Number | 5 | -- |
rate | 弹幕滚动频率(单位:ms) | Number | 2000 | -- |
background | 弹幕单条背景 | String | '#235a90' | 同 CSS 中的 background 属性 |
# Main 评论主体
用于展示评论主体
# Main Usage
# 基础用法
<comment-main></comment-main>
1
# Main Props
参数名称 | 描述 | 类型 | 默认值 | 可选值 |
---|---|---|---|---|
action-btn | 是否显示操作按钮 | Boolean | true | true false |
mini | 是否简化回复列表 | Boolean | false | true false |
respond | 是否能够对评论及评论中的回复进行回复 | Boolean | true | true false |
# Mine 评论个人中心
用于展示评论个人中心
# Mine Usage
# 基础用法
<comment-mine></comment-mine>
1
# Mine Props
参数名称 | 描述 | 类型 | 默认值 | 可选值 |
---|---|---|---|---|
prompt | 数据为空时的提示语 | String | 您还没有发表过评论喔~ | -- |
respond | 是否能够对评论中的回复进行回复 | Boolean | true | true false |