通用评论
node f1c69886e9 refactor: 优化编辑器 6 år sedan
lib publish version 0.1.0 6 år sedan
public publish comment@0.0.1 6 år sedan
src refactor: 优化编辑器 6 år sedan
.babelrc publish comment@0.0.1 6 år sedan
.eslintrc publish comment@0.0.1 6 år sedan
.gitignore publish comment@0.0.1 6 år sedan
README.md doc: UPDATE README.md 6 år sedan
config-overrides.js publish comment@0.0.1 6 år sedan
package.json doc: UPDATE README.md 6 år sedan

README.md

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 组件:

import Comment, { Editor } from 'comment'

// ...

render() {
  return (
    <Comment>
      <Editor />
    </Comment>
  )
}

注意:最好,还需要在 HTML 文件里面引入阿里云 OSS SDK <script src="http://gosspublic.alicdn.com/aliyun-oss-sdk.min.js"></script>

作为静态文件引入

作为静态问卷使用的话,首先需要在 index.js 里面设置好组件的 props

// ...
const props = {
  type: 1,
  businessId: "1",
  API: "http://api.links123.net/comment/v1",
  showList: false
};

const editorProps = {
  showEmoji: true,
  placeholder: "说点什么吧",
  rows: 5,
};


// ...
<App {...props}>
    <Editor {...editorProps} />
</App>

然后再进行打包:

$ yarn build

打包后会得到静态问卷,分别通过 link 和 script 标签在你的项目里面引入打包后的文件。

然后还需要引入 OSS SDK,用于直传文件到 OSS。

最后创建一个 id 为 root-comment 的标签,作为渲染通用评论的跟元素。

如下所示:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Page Title</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" media="screen" href="./static/css/main.f205c84d.css" />
</head>
<body>
  <div id="root-comment" style="width: 700px"></div>
  <script src="http://gosspublic.alicdn.com/aliyun-oss-sdk.min.js"></script>
  <script src="./static/js/main.eac872df.js"></script>
</body>
</html>

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

  • 前后端统一错误码
  • type 和 businessID 的定义
  • Editor onSubmit 回调