通用评论

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

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

README.md

Comment

使用

作为组件使用

作为静态文件引入

Props

Comment

Editor

开发

TODO