Feed 评论区

开眼H5部分页面的评论区，支持点赞，回复，对单条回复进行操作等功能。

规则

• 容器组件，可结合 CommentCard组件 或者 FeedCard组件 使用。
• 对单个卡片进行列表封装，支持配置头部信息
• 单个卡片用具名插槽feed-card定义
• 支持暗黑模式，黑底白字风格

可选参数

Prop	type	Required	Default	Description
title	String	no	-	是否显示顶部title
icon-show	Boolean	no	false	是否显示 > 图标
dark-mode	Boolean	no	false	是否进入暗黑模式

事件回调

Event	Description
handleTitleClick()	标题栏click事件

使用方法

<template>
  <div class="page">
    <vs-feed :title="'热门评论'" :icon-show="true" @handleTitleClick="handleTitleClick">
      <template v-slot:feed-card>
        <vs-feed-card
          :key="key"
          v-for="(item, key) in notes"
          :index="key"
          :detail="item"
          @reply="showReplyOthersBox"
          @like="likeEvent"
          @operation="showMoreOperation"
          @avatar="handleAvatarClick"
          @view-all-replies="viewAllReplies"
        />
      </template>
    </vs-feed>
  </div>
</template>
<script>
  import {ref, onBeforeUnmount} from '@vue/composition-api'
  import {notes} from "./utils/mock";
  import {Feed, FeedCard} from 'horizon-ui'

  export default {
    components: {
      'vs-feed': Feed,
      'vs-feed-card': FeedCard,
    },
    setup(props, context) {
      const likeEvent = (item) => {
        console.log('like')
      }
      const handleTitleClick = () => {
        console.log('去热评区')
      }
      const handleAvatarClick = () => {
        console.log('handleAvatarClick')
      }
      const showMoreOperation = ()=>{
        console.log('showMoreOperation')
      }
      const viewAllReplies = () => {
        console.log('viewAllReplies')        
      }
      return {
        notes,
        likeEvent,
        showMoreOperation,
        handleBarClick,
        handleTitleClick,
        handleAvatarClick,
        viewAllReplies
      }
    }
  }
</script>