vue 文章评论组件

今天用到文章评论的功能，觉得这样常用的功能适合写个组件。不多说，开始

最终效果图

效果图

建立文件夹

目录结构

从外到内文件内容如下

BhComments/index.js

import CommentsItem from './packages/comments-item/index.js'
import ReplyItem from './packages/reply-item/index.js'

const components = [
  CommentsItem,
  ReplyItem
]

const install = function (Vue) {
  components.map(component => {
    Vue.component(component.name, component)
  })
}

if (typeof window !== 'undefined' && window.Vue) {
  install(window.Vue)
}

export default {
  version: '1.0.1',
  name: 'BhComments',
  install,
  CommentsItem,
  ReplyItem
}

BhComments/packages/comments-item/index.js

import CommentsItem from './src/main'

CommentsItem.install = function (Vue) {
  Vue.component(CommentsItem.name, CommentsItem)
}

export default CommentsItem

BhComments/packages/comments-item/src/main.vue

BhComments/packages/reply-item/index.js

import ReplyItem from './src/main'

ReplyItem.install = function (Vue) {
  Vue.component(ReplyItem.name, ReplyItem)
}

export default ReplyItem

BhComments/packages/reply-item/src/main.vue

使用组件