|
|
@@ -14,35 +14,35 @@ import Comment, { Editor } from 'comment';
|
|
14
|
14
|
#### Comment
|
|
15
|
15
|
|
|
16
|
16
|
|
|
17
|
|
-| props | type | default | required | description |
|
|
18
|
|
-| ----- | -------| -------- | -------- | ----------- |
|
|
19
|
|
-| type | number | | true | 评论的 type |
|
|
20
|
|
-| businessId | string | | true | 评论的 business id|
|
|
21
|
|
-| API | string | http://api.links123.net/comment/v1 | false | API 前缀|
|
|
22
|
|
-| showList | boolean | true | false | 是否显示评论列表|
|
|
23
|
|
-| showEditor | boolean | true | false | 是否显示评论输入框|
|
|
24
|
|
-| showHeader | boolean | true | false | 是否显示评论顶部的提示|
|
|
25
|
|
-| token | string | | false | token，用于身份认证，非必须。默认使用 cookie|
|
|
|
17
|
+| props | type | default | required | description |
|
|
|
18
|
+| ---------- | ------- | ---------------------------------- | -------- | -------------------------------------------- |
|
|
|
19
|
+| type | number | | true | 评论的 type |
|
|
|
20
|
+| businessId | string | | true | 评论的 business id |
|
|
|
21
|
+| API | string | http://api.links123.net/comment/v1 | false | API 前缀 |
|
|
|
22
|
+| showList | boolean | true | false | 是否显示评论列表 |
|
|
|
23
|
+| showEditor | boolean | true | false | 是否显示评论输入框 |
|
|
|
24
|
+| showHeader | boolean | true | false | 是否显示评论顶部的提示 |
|
|
|
25
|
+| token | string | | false | token，用于身份认证，非必须。默认使用 cookie |
|
|
26
|
26
|
|
|
27
|
27
|
|
|
28
|
28
|
|
|
29
|
29
|
##### Editor
|
|
30
|
30
|
|
|
31
|
|
-| props | type | default | required | description |
|
|
32
|
|
-| ----- | -------| -------- | -------- | ----------- |
|
|
33
|
|
-| rows | number | 5 | false | 编辑器的高度。默认情况下，回复评论/回复回复的编辑器会比评论的编辑器高度小一行 |
|
|
34
|
|
-| placeholder | string | 说点什么吧... | false | 评论的中的提示文字|
|
|
35
|
|
-| showEmoji | boolean | true | false | 是否显示 Toolbar 中表情工具|
|
|
36
|
|
-| showUpload | boolean | true | false | 是否显示 Toolbar 中 上传图片工具|
|
|
37
|
|
-| value | string | | false | 编辑器的值。如果设置了改属性，则编辑器变为受控组件，需要父组件来维护 value|
|
|
38
|
|
-| onChange | function(value) | | false | 编辑器内容改变的回调函数|
|
|
39
|
|
-| onSubmit | function(value) | | false | 点击提交按钮的回调函数|
|
|
40
|
|
-| btnSubmitText | string | 发表 | false | 提交按钮的文字|
|
|
41
|
|
-| btnLoading | boolean | false | false | 按钮是否正在加载中|
|
|
42
|
|
-| btnDisable | boolean | false | false | 按钮是否禁用|
|
|
43
|
|
-| button | ReactNode | | false | 按钮组件。如果上面几个 btn 相关的属性都无法满足要求，则可以使用 button 来自定义提交编辑器值的按钮|
|
|
44
|
|
-| emojiToolIcon | ReactNode | | false | Toolbar 中表情的图标 |
|
|
45
|
|
-| imageToolIcon | ReactNode | | false | Toolbar 中上传文件的图标 |
|
|
|
31
|
+| props | type | default | required | description |
|
|
|
32
|
+| ------------- | --------------- | ------------- | -------- | ------------------------------------------------------------------------------------------------- |
|
|
|
33
|
+| rows | number | 5 | false | 编辑器的高度。默认情况下，回复评论/回复回复的编辑器会比评论的编辑器高度小一行 |
|
|
|
34
|
+| placeholder | string | 说点什么吧... | false | 评论的中的提示文字 |
|
|
|
35
|
+| showEmoji | boolean | true | false | 是否显示 Toolbar 中表情工具 |
|
|
|
36
|
+| showUpload | boolean | true | false | 是否显示 Toolbar 中 上传图片工具 |
|
|
|
37
|
+| value | string | | false | 编辑器的值。如果设置了该属性，则编辑器变为受控组件，需要父组件来维护 value |
|
|
|
38
|
+| onChange | function(value) | | false | 编辑器内容改变的回调函数 |
|
|
|
39
|
+| onSubmit | function(value) | | false | 点击提交按钮的回调函数 |
|
|
|
40
|
+| btnSubmitText | string | 发表 | false | 提交按钮的文字 |
|
|
|
41
|
+| btnLoading | boolean | false | false | 按钮是否正在加载中 |
|
|
|
42
|
+| btnDisable | boolean | false | false | 按钮是否禁用 |
|
|
|
43
|
+| button | ReactNode | | false | 按钮组件。如果上面几个 btn 相关的属性都无法满足要求，则可以使用 button 来自定义提交编辑器值的按钮 |
|
|
|
44
|
+| emojiToolIcon | ReactNode | | false | Toolbar 中表情的图标 |
|
|
|
45
|
+| imageToolIcon | ReactNode | | false | Toolbar 中上传文件的图标 |
|
|
46
|
46
|
|
|
47
|
47
|
### 什么时候不要使用 value/onChange/onSubmit
|
|
48
|
48
|
|
|
|
@@ -102,13 +102,13 @@ import Comment, { Editor } from 'comment';
|
|
102
|
102
|
<Button
|
|
103
|
103
|
type="primary"
|
|
104
|
104
|
ghost
|
|
105
|
|
- value={this.state.value}
|
|
106
|
105
|
onChange={(value) => this.setState({ value })}
|
|
107
|
106
|
onClick={() => console.log(this.state.value)}
|
|
108
|
107
|
>
|
|
109
|
108
|
自定义按钮
|
|
110
|
109
|
</Button>
|
|
111
|
110
|
)}
|
|
|
111
|
+ value={this.state.value}
|
|
112
|
112
|
/>
|
|
113
|
113
|
</Comment>
|
|
114
|
114
|
```
|
|
|
@@ -147,7 +147,7 @@ render() {
|
|
147
|
147
|
|
|
148
|
148
|
### 作为静态文件引入
|
|
149
|
149
|
|
|
150
|
|
-作为静态问卷使用的话，首先需要在 `index.js` 里面设置好组件的 `props`，主要是 `type` 和 `businessId`：
|
|
|
150
|
+作为静态文件使用的话，首先需要在 `index.js` 里面设置好组件的 `props`，主要是 `type` 和 `businessId`：
|
|
151
|
151
|
|
|
152
|
152
|
```js
|
|
153
|
153
|
// ...
|
