转载声明：文章来源https://zhuanlan.zhihu.com/p/455953454

1.使用下面命令下载bright-comment组件

npm i bright-comment

2、下载完成之后在项目中引入

import comment from 'bright-comment'
components:{
  comment
}

3、使用

<comment></comment>

4、如果没有下载element-ui的使用下面命令进行下载

npm i element-ui -S

5、下载完成后在main.js中引入

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI);

6、实际代码

<comment :commentNum=commentList.length :commentList=commentList @doSend="doSend" @doChidSend="doChidSend"></comment>

7、对应数据获取等

doSend (text){
        console.log('dosend')
        console.log(text)
        this.$http({
          url: this.$http.adornUrl(`/generator/notecomment/save`),
          method: 'post',
          data: this.$http.adornData({
            'noteId': this.dataForm.id || undefined,
            'context': text
          })
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.commentQuery(this.dataForm.id)
          } else {
            this.$message.error(data.msg)
          }
        })
      },doChidSend (text,targetUserId,parentId){
        console.log('dosend')
        console.log(text+targetUserId,parentId)
        this.$http({
          url: this.$http.adornUrl(`/generator/notecomment/save`),
          method: 'post',
          data: this.$http.adornData({
            'context': text,
            'targetUserId': targetUserId,
            'replyId': parentId
          })
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.commentQuery(this.dataForm.id)
          } else {
            this.$message.error(data.msg)
          }
        })
      }

	  
	  commentQuery (id) {
        console.log('hello',id)
        this.dataForm.id = id || 0
        console.log('hello',id)
        this.visible = true
        this.$nextTick(() => {
          // this.$refs['dataForm'].resetFields()
          if (this.dataForm.id) {
            this.$http({
              url: this.$http.adornUrl(`/generator/notecomment/listByNoteId/${this.dataForm.id}`),
              method: 'get',
              params: this.$http.adornParams()
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.commentList = data.list;
              }
            })
          }
        })
      }