1.0.20 • Published 3 years ago

xtc-comment v1.0.20

Weekly downloads
-
License
MIT
Repository
-
Last release
3 years ago

Vue-juejin-comment

一个掘金风格的评论组件。

之前在写个人博客网站时,需要有评论功能,由于个人比较喜欢掘金风格的评论系统,于是仿写出了这个评论组件。希望可以对你有帮助,如果喜欢的话请点个⭐,感谢😃!

Demo地址https://fenghan34.github.io/my-docs/library/vue-juejin-comment.html

安装

npm i vue-juejin-comment

# or yarn
yarn add vue-juejin-comment

功能

  • 基础评论和回复。
  • 点赞和删除。
  • 自适应高度输入框。
  • 表情输入和图片上传(复制)。

属性

参数说明类型默认值
data / v-model绑定数据Array————
user当前用户Object————
props单条评论模型Object————
before-submit提交评论的回调函数Function(comment, parent, add)——
before-like点赞的回调函数Function(comment)——
before-delete点击删除评论的回调函数Function(comment, parent)——
upload-img上传(复制)图片的回调函数Function({ file, callback })——

使用

<template>
  <Comment
    v-model="data"
    :user="currentUser"
    :before-submit="addComment"
    :before-delete="deleteComment"
    :before-like="likeComment"
    :upload-img="uploadOrCopyImg"
    :props="props"
  />
</template>

<script>
import Comment from 'vue-juejin-comment'

export default {
  data() {
    return {
      data: [],
      props: {},
      currentUser: {
        name: '',
        avatar: '',
        author: false
      }
    }
  },
  methods: {
    addComment(comment, parent, add) {
      // ...

      // 需调用 add 函数,并传入 newComment 对象
      add(newComment)
    },
    deleteComment(comment, parent) {
      // ...
    },
    likeComment(comment) {
      // ...
    },
    uploadOrCopyImg({ file, callback }) {
      // ...
      
      callback(imgUrl) // 图片地址必传
    }
  }
}
</script>

注意事项

❗❗❗ 评论初始数据模型为:

{
  id: '', // 唯一 id,必需
  content: '', // 评论内容,必需
  imgSrc: '', // 评论中的图片地址,非必需
  children: [], // 子评论(回复),非必需
  likes: 0, // 点赞数,非必需
  reply: null, // 子评论(回复)人信息,非必需
  createAt: null, // 评论时间,必需
  user: { // 评论人信息,必需
    author: false // 是否为作者,类型为 Boolean,非必需
  } 
}

如需修改评论数据模型,请提供 props 属性,例如:

props: {
  id: 'id',
  content: 'content',
  imgSrc: 'img',
  children: 'childrenComments',
  likes: 'likeCount',
  reply: 'replyInfo',
  createAt: 'time',
  user: 'visitor'
}

本地开发

# install dependencies
npm install

# serve with hot reload at localhost
npm run serve

# build for production with minification
npm run build
1.0.20

3 years ago

1.0.19

3 years ago

1.0.18

3 years ago

1.0.16

3 years ago

1.0.15

3 years ago

1.0.14

3 years ago

1.0.13

3 years ago

1.0.12

3 years ago

1.0.11

3 years ago

1.0.10

3 years ago

1.0.9

3 years ago

1.0.7

3 years ago

1.0.5

3 years ago

1.0.4

3 years ago

1.0.3

3 years ago

1.0.2

3 years ago

1.0.1

3 years ago

1.0.0

3 years ago