gi-component

Appearance

Comment 评论 ​

用于展示评论信息，支持嵌套回复。

基础用法 ​

Socrates1 hour
Comment body content.
834Reply
查看代码
vue
<template>
  <gi-comment
    author="Socrates"
    datetime="1 hour"
    content="Comment body content."
    avatar="https://img0.baidu.com/it/u=2746352008,2041591833&fm=253&fmt=auto&app=138&f=JPEG?w=360&h=360"
  >
    <template #actions>
      <span class="comment-action"><ElIcon><Star /></ElIcon>83</span>
      <span class="comment-action"><ElIcon><StarFilled /></ElIcon>4</span>
      <span class="comment-action"><ElIcon><ChatDotRound /></ElIcon>Reply</span>
    </template>
  </gi-comment>
</template>

<script setup lang="ts">
import { ChatDotRound, Star, StarFilled } from '@element-plus/icons-vue'
import { ElIcon } from 'element-plus'
</script>

<style lang="scss" scoped>
.comment-action {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}
.comment-action:hover {
  color: var(--el-color-primary);
}
</style>

嵌套评论 ​

张三2 天前
我们提供一系列设计原则、实用模式以及高质量的设计资源（Sketch 和 Axure）
回复
李四1 天前
我们提供一系列设计原则、实用模式以及高质量的设计资源（Sketch 和 Axure）
回复
王五12 小时前
我们提供一系列设计原则、实用模式以及高质量的设计资源（Sketch 和 Axure）
回复
赵六6 小时前
我们提供一系列设计原则、实用模式以及高质量的设计资源（Sketch 和 Axure）
回复
查看代码
vue
<template>
  <gi-comment
    author="张三"
    datetime="2 天前"
    content="我们提供一系列设计原则、实用模式以及高质量的设计资源（Sketch 和 Axure）"
    avatar="https://img0.baidu.com/it/u=2746352008,2041591833&fm=253&fmt=auto&app=138&f=JPEG?w=360&h=360"
  >
    <template #actions>
      <span class="comment-action">回复</span>
    </template>
    <gi-comment
      author="李四"
      datetime="1 天前"
      content="我们提供一系列设计原则、实用模式以及高质量的设计资源（Sketch 和 Axure）"
      avatar="https://s1.ax1x.com/2022/06/14/XhtSwF.jpg"
    >
      <template #actions>
        <span class="comment-action">回复</span>
      </template>
      <gi-comment
        author="王五"
        datetime="12 小时前"
        content="我们提供一系列设计原则、实用模式以及高质量的设计资源（Sketch 和 Axure）"
        avatar="https://s1.ax1x.com/2022/06/14/XhteeO.jpg"
      >
        <template #actions>
          <span class="comment-action">回复</span>
        </template>
      </gi-comment>
      <gi-comment
        author="赵六"
        datetime="6 小时前"
        content="我们提供一系列设计原则、实用模式以及高质量的设计资源（Sketch 和 Axure）"
        avatar="https://img1.baidu.com/it/u=1817951587,3188870642&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
      >
        <template #actions>
          <span class="comment-action">回复</span>
        </template>
      </gi-comment>
    </gi-comment>
  </gi-comment>
</template>

<style lang="scss" scoped>
.comment-action {
  cursor: pointer;
}
.comment-action:hover {
  color: var(--el-color-primary);
}
</style>

自定义内容 ​

通过 content 插槽自定义评论区域，例如评论输入框。

访客
0 / 200
张三10 分钟前
这个组件用起来很方便！
查看代码
vue
<template>
  <div class="comment-demo">
    <gi-comment author="访客" :avatar="avatar">
      <template #content>
        <div class="comment-editor">
          <ElInput
            v-model="inputValue"
            type="textarea"
            :rows="3"
            maxlength="200"
            show-word-limit
            placeholder="写下你的评论..."
          />
          <div class="comment-editor__footer">
            <ElButton type="primary" :disabled="!inputValue.trim()" @click="handleSubmit">
              提交评论
            </ElButton>
          </div>
        </div>
      </template>
    </gi-comment>

    <gi-comment
      v-for="item in commentList"
      :key="item.id"
      :author="item.author"
      :avatar="avatar"
      :content="item.content"
      :datetime="item.datetime"
    />
  </div>
</template>

<script setup lang="ts">
import { ElButton, ElInput, ElMessage } from 'element-plus'
import { ref } from 'vue'

interface CommentItem {
  id: number
  author: string
  content: string
  datetime: string
}

const avatar = 'https://s1.ax1x.com/2022/06/14/XhteeO.jpg'

const inputValue = ref('')
const commentList = ref<CommentItem[]>([
  {
    id: 1,
    author: '张三',
    content: '这个组件用起来很方便！',
    datetime: '10 分钟前'
  }
])

function handleSubmit() {
  const content = inputValue.value.trim()
  if (!content)
    return

  commentList.value.unshift({
    id: Date.now(),
    author: '访客',
    content,
    datetime: '刚刚'
  })
  inputValue.value = ''
  ElMessage.success('评论已提交')
}
</script>

<style lang="scss" scoped>
.comment-demo {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.comment-editor {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.comment-editor__footer {
  display: flex;
  justify-content: flex-end;
}
</style>

API ​

Props ​

参数说明类型默认值
author作者名string-
avatar头像string-
content评论内容string-
datetime时间描述string-

Slots ​

名称说明
avatar头像
author作者
datetime时间描述
content评论内容
actions操作列表
default嵌套子评论