# 组件

# Add 添加评论

通常用于自定义发表评论按钮布局

# Add Usage

# 基础用法

<!-- 条状评论发表按钮,效果与设置 `replyMode = 'bar'` 一致 -->
<comment-add-bar></comment-add-bar>

<!-- 条状评论发表按钮,效果与设置 `replyMode = 'button'` 一致 -->
<comment-add-button></comment-add-button>

1
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

# 自定义位置

弹幕组件默认使用 position: fixed 进行定位：

.comment-barrage {
  z-index: 980;
  position: fixed;
  bottom: 50px;
  left: 10px;
  /* ... */
}

1
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

查看更多信息了解 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>

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

# Mine Props

参数名称	描述	类型	默认值	可选值
prompt	数据为空时的提示语	String	`您还没有发表过评论喔~`	--
respond	是否能够对评论中的回复进行回复	Boolean	`true`	`true` `false`

← 使用更新日志 →