Page Title

# Comment 通用评论系统及编辑器 `version 0.2.0` ```js import Comment, { Editor } from 'comment'; ``` ## 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 | false | 是否显示评论列表| | showEditor | boolean | true | false | 是否显示评论输入框| ##### Editor | props | type | default | required | description | | ----- | -------| -------- | -------- | ----------- | | rows | number | 5 | false | 编辑器的高度。默认情况下，回复评论/回复回复的编辑器会比评论的编辑器高度小一行 | | placeholder | string | 说点什么吧... | false | 评论的中的提示文字| | showEmoji | boolean | true | false | 是否显示 Toolbar 中表情工具| | showUpload | boolean | true | false | 是否显示 Toolbar 中上传图片工具| | value | string | | false | 编辑器的值。如果设置了改属性，则编辑器变为受控组件，需要父组件来维护 value| | onChange | function(value) | | false | 编辑器内容改变的回调函数| | onSubmit | function(value) | | false | 点击提交按钮的回调函数| | btnSubmitText | string | 发表 | false | 提交按钮的文字| | btnLoading | boolean | false | false | 按钮是否正在加载中| | btnDisable | boolean | false | false | 按钮是否禁用| | button | ReactNode | | false | 按钮组件。如果上面几个 btn 相关的属性都无法满足要求，则可以使用 button 来自定义提交编辑器值的按钮| | emojiToolIcon | ReactNode | | false | Toolbar 中表情的图标 | | imageToolIcon | ReactNode | | false | Toolbar 中上传文件的图标 | ### 什么时候不要使用 value/onChange/onSubmit 如果将 `comment` 作为通用评论组件，则不要使用 `value` `onChange` `onSubmit`。因为组件内部，实现了通用评论的业务逻辑。 **可以使用 value/onChange/onSubmit 的情况:** - 单独使用其中的 `Editor`。即 `import { Editor } from 'comment'` - 不需要展示评论列表，即设置 `showList: false` ```jsx // 单独使用 Editor console.log(v)} /> // 不需要展示评论列表 console.log(v)} /> ``` ### button 如果使用 `button`，则 `btnLoading` `btnDisable` `btnSubmitText` 都会失效。因为这些属性是针对于编辑器默认的提交按钮设置的。所以如果要提交编辑器的值，需要自己在 `Button` 组件上实现提交功能。编辑器的值，可以通过 `onChange` 方法获取到。如果使用了 `button` 属性，并且没有为其设置 `onClick` 方法，则 `onClick` 默认为发布评论，即点击按钮会发表评论: ```jsx // 如下代码所示 // 点击“自定义按钮”的时候，会发表评论。这是由 Comment 组件内部实现的业务逻辑自定义按钮 )} /> ``` 如果使用了 `button` 属性，并且设置了 `onClick` 方法，则会覆盖默认的 `onClick` 方法: ```jsx // 下面的代码，点击的时候，不会提交评论 // 而是会输出 state 的值（ // 即编辑器的值，因为 onChange 将编辑器输入的值通过回调函数传递给了父组件） this.setState({ value })} onClick={() => console.log(this.state.value)} > 自定义按钮 )} /> ``` ## 使用 ### 作为组件使用 ``` # 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: true }; const editorProps = { showEmoji: true, placeholder: "说点什么吧", rows: 5, }; // ... ``` 然后再进行打包： ``` $ yarn build ``` 打包后会得到静态问卷，分别通过 link 和 script 标签在你的项目里面引入打包后的文件。然后还需要引入 OSS SDK，用于直传文件到 OSS。最后创建一个 id 为 `root-comment` 的标签，作为渲染通用评论的跟元素。如下所示： ```html Page Title

``` ## 开发 ``` $ git clone https://git.links123.net/npm/comment $ cd comment $ yarn $ yarn start ``` - `yarn build` 将项目打包成一个单页应用 - `yarn lib` 将项目打包成一个 es5 组件 - `yarn prettier` 格式化代码