# bright-comment

**Repository Path**: bright-boy/bright-comment

## Basic Information

- **Project Name**: bright-comment
- **Description**: vue评论回复组件库
- **Primary Language**: 其他
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: https://www.npmjs.com/settings/bright-boy/packages
- **GVP Project**: No

## Statistics

- **Stars**: 69
- **Forks**: 10
- **Created**: 2020-12-15
- **Last Updated**: 2025-06-13

## Categories & Tags

**Categories**: vue-extensions

**Tags**: None

## README

# Vue含表情评论回复组件

## 一、评论回复组件效果

### 使用vue开发一款精美实用的评论回复组件，并包含emoji表情包，整体效果如下

![输入图片说明](https://images.gitee.com/uploads/images/2020/1215/101457_e3a9ba50_4856424.png "屏幕截图.png")

### 文本框获取焦点时弹出Emoji表情按钮、发送和取消按钮

### 点击Emoji表情即可弹出表情包，如下图
![输入图片说明](https://images.gitee.com/uploads/images/2020/1215/101534_b4acf2c7_4856424.png "屏幕截图.png")
![输入图片说明](https://images.gitee.com/uploads/images/2020/1215/102438_aa85da77_4856424.png "屏幕截图.png")
## 二、使用

### 1、使用下面命令下载bright-comment组件

	npm i bright-comment

### 2、下载完成之后在项目中引入

	import comment from 'bright-comment'
	components:{
      comment
    },

### 3、使用

	 <comment></comment>

### 4、如果没有下载element-ui的使用下面命令进行下载

	npm i element-ui -S

### 5、下载完成后在main.js中引入

	import ElementUI from 'element-ui';
	import 'element-ui/lib/theme-chalk/index.css'
	Vue.use(ElementUI);

## 三、属性及事件


### 1、props属性

   | 名称        | 类型    |  说明   |  默认值 |
   | --------    | --------  | --------  | --------  |
   | avatar        |String      |   头像    | 空
   | placeholder  | String      |  文本框提示内容    | 在此输入评论内容...
   | minRows        | Number     |   文本框最小行数    | 4
   | maxRows        | Number     |   文本框最大行数    | 8
   | commentNum        | Number     |   评论条数    | 2
   | authorId        | Number     |   当前登录用户id   | 1
   | label        | String     |   标签名   | 作者
   | commentWidth        | String     |   文本框宽度   | 80%
   | commentList        |  Array     |   评论列表   | 包含内容较多，此处略
   
评论列表commentList 包含多个评论comment，关于comment相关字段如下：

### 2、comment包含字段

   | 名称        | 类型    |  说明   | 
   | --------    | --------  | --------  | 
   | id        |Number      |   评论id    | 
   | commentUser  | Object      |  评论用户    | 
   | targetUser        | Object     |   被评论用户    | 
   | content        | String     |   评论内容    | 
   | createDate        | String     |   评论时间    | 
   | childrenList        | Array     |   子评论列表   | 

### 3、用户包含字段

   | 名称        | 类型    |  说明   | 
   | --------    | --------  | --------  | 
   | id        |Number      |   用户id    | 
   | nickName  | String      |  用户昵称    | 
   | avatar        | String     |   用户头像    | 

### 4、事件Events

   | 名称       |  说明   |  参数
   | --------    | --------  | -------- 
   | doSend          |   初始文本框发送事件    | 评论内容
   | doChidSend   |  评论列表中文本框发送事件    |  评论内容,被评论用户id,父级评论id


###  **QQ群557423713**