# 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 回调