# Comment
通用评论系统
## 使用
### 作为组件使用
```
# npm 安装
$ npm install git+https://git.links123.net/npm/comment.git --save
# yarn 安装
$ yarn add git+https://git.links123.net/npm/comment.git
```
然后在代码里面引入 `comment` 组件:
```jsx
import Comment, { Editor } from 'comment'
// ...
render() {
return (
)
}
```
**注意:最好,还需要在 HTML 文件里面引入阿里云 OSS SDK ``**
### 作为静态文件引入
作为静态问卷使用的话,首先需要在 `index.js` 里面设置好组件的 `props`:
```js
// ...
const props = {
type: 1,
businessId: "1",
API: "http://api.links123.net/comment/v1",
showList: false
};
const editorProps = {
showEmoji: true,
placeholder: "说点什么吧",
rows: 5,
};
// ...
```
然后再进行打包:
```
$ yarn build
```
打包后会得到静态问卷,分别通过 link 和 script 标签在你的项目里面引入打包后的文件。
然后还需要引入 OSS SDK,用于直传文件到 OSS。
最后创建一个 id 为 `root-comment` 的标签,作为渲染通用评论的跟元素。
如下所示:
```html
Page Title
```
## Props
#### Comment
| props | type | default | required | description |
| ----- | -------| -------- | -------- | ----------- |
| type | number | | true | 评论的 type |
| businessId | string | | true | 评论的 business id|
| API | string | http://api.links123.net/comment/v1 | false | API 前缀|
| showList | boolean | true | true | 是否显示评论列表|
| showEditor | boolean | true | true | 是否显示评论输入框|
##### Editor
| props | type | default | required | description |
| ----- | -------| -------- | -------- | ----------- |
| rows | number | 5 | false | 编辑器的高度 |
| placeholder | string | 说点什么吧... | false | 评论的中的提示文字|
| submitText | string | 发表 | false | 提交按钮的文字|
| showEmoji | boolean | true | false | 是否显示 Toolbar 中表情工具|
| showUpload | boolean | true | false | 是否显示 Toolbar 中 上传图片工具|
| onChange | function | | false | 编辑器内容改变的回调函数|
| onSubmit | function | | false | TODO... 尚未完成。点击提交按钮的回调函数|
## 开发
```
$ git clone https://git.links123.net/npm/comment
$ cd comment
$ yarn
$ yarn start
```
- `yarn build` 将项目打包成一个单页应用
- `yarn lib` 将项目打包成一个组件
- `yarn prettier` 格式化代码
## TODO
- [ ] 前后端统一错误码
- [x] type 和 businessID 的定义
- [ ] Editor onSubmit 回调