# 组件
# Add 添加评论
通常用于自定义发表评论按钮布局
# Add Usage
# 基础用法
<!-- 条状评论发表按钮,效果与设置 `replyMode = 'bar'` 一致 -->
<comment-bar></comment-bar>
<!-- 条状评论发表按钮,效果与设置 `replyMode = 'button'` 一致 -->
<comment-button></comment-button>
1
2
3
4
5
2
3
4
5
# Barrage 弹幕
# Barrage Usage
# 基础用法
弹幕组件并不与评论数据耦合在一起，因此你可以通过 barrages 传入任何你希望实现弹幕效果的数据，组件默认会无限循环滚动它们。
这里我们以评论数据为例：
<comment-barrage
:barrages="newsList"
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="newsList"
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 :initProps="initData"></comment-main>
1
# Mine 评论个人中心
用于展示评论个人中心
# Mine Usage
# 基础用法
<comment-mine :initProps="initData"></comment-mine>
1