@fengfengfeng/vue-juejin-comment v0.1.4

Vue-juejin-comment

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

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

Demo地址：https://fengfengfeng-up.github.io/library/vue-juejin-comment

安装

npm i @fengfengfeng/vue-juejin-comment

# or yarn
yarn add @fengfengfeng/vue-juejin-comment

功能

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

属性

使用

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

<script>
import Comment from '@fengfengfeng/vue-juejin-comment'
import '@fengfengfeng/vue-juejin-comment/dist/vue-juejin-comment.css'

export default {
  data() {
    return {
      data: [],
      props: {},
      currentUser: {
        name: '',
        avatar: '',
        author: false
      }
    }
  },
  methods: {
    addComment(comment) {
      // ...
    },
    deleteComment(comment) {
      // ...
    },
    likeComment(comment) {
      // ...
    },
    uploadOrCopyImg({ file, callback }) {
      // ...
      
      callback(imgUrl) // 图片地址必传
    }
  }
}
</script>

注意事项

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

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

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

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