通用评论
node 9db305742d feat: 实现自定义 button 的功能 6 yıl önce
lib publish version 0.1.0 6 yıl önce
public publish comment@0.0.1 6 yıl önce
src feat: 实现自定义 button 的功能 6 yıl önce
.babelrc publish comment@0.0.1 6 yıl önce
.eslintrc publish comment@0.0.1 6 yıl önce
.gitignore publish comment@0.0.1 6 yıl önce
README.md feat: 实现自定义 button 的功能 6 yıl önce
config-overrides.js publish comment@0.0.1 6 yıl önce
package.json doc: UPDATE README.md 6 yıl önce

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 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 来自定义提交编辑器值的按钮

button

如果使用 button,则 onSubmit btnLoading btnDisable btnSubmitText 都会失效。因为这些属性是针对于编辑器默认的提交按钮设置的。

所以如果要提交编辑器的值,需要自己在 Button 组件上实现提交功能。编辑器的值,可以通过 onChange 方法获取到。

用法示例:

<App type={1} businessId="test">
  <Editor
    // 将编辑器的值保存在 state 中
    onChange={value => this.setState({ value })}
    button={(
      <Button
        onClick={() => console.log(this.state.value)}
      >
      自定义按钮
      </Button>
    )}
  />
</App>

开发

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

TODO

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