# 组件

# 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 特性,所以你可以一如既往地使用 classstyle 重写样式:

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