Comment 댓글

사이트 콘텐츠에 대한 피드백, 평가, 토론이에요.

출처: 문서

본문

언제 사용하나요

댓글 컴포넌트는 페이지, 블로그 글, 이슈 같은 것에 대한 토론에 쓸 수 있어요.

기본 사용법

:::demo

<template>
  <d-comment
    avatar=""
    author="郑迪"
    datetime="10小时前"
  >
    用于对事物的讨论，例如页面、博客文章、问题等等。
  </d-comment>
</template>

:::

커스터마이즈

:::demo

<template>
  <d-comment>
    <p>用于对事物的讨论，例如页面、博客文章、问题等等。</p>

    <template v-slot:avatar>
      <a class="comment-demo-custom__avatar" href="https://juejin.cn/user/712139267650141" target="_blank">
        <d-avatar :isRound="false" imgSrc="https://vue-devui.github.io/assets/logo.svg"></d-avatar>
      </a>
    </template>

    <template v-slot:head>
      <div class="comment-demo-custom__head">
        <div class="comment-demo-custom__author">
          <a href="https://juejin.cn/user/712139267650141" target="_blank">
            <span>DevUI团队</span>
            <svg xmlns="http://www.w3.org/2000/svg" width="23" height="14" viewBox="0 0 23 14">
              <g fill="none" fill-rule="evenodd">
                <path fill="#34D19B" d="M3 1h17a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2z" />
                <path fill="#FFF" d="M3 4h2v7H3zM8 6h2l2 5h-2z" />
                <path fill="#FFF" d="M14 6h-2l-2 5h2zM3 9h5v2H3zM16.333 4L17 3v3h-2zM15 6h2v4h-2zM17 8h1v2h-1zM17 3h1v2h-1zM18 3h2v8h-2z" />
              </g>
            </svg>
          </a>
          <span>华为 @ 前端组件库</span>
        </div>
        <time class="comment-demo-custom__datetime">17天前</time>
      </div>
    </template>

    <template v-slot:actions>
      <div class="comment-demo-custom__actions">
        <d-button variant="text" icon="like">10</d-button>
        <d-button variant="text" icon="comment">评论</d-button>
      </div>
    </template>
  </d-comment>
</template>
<style lang="scss">
.comment-demo-custom__avatar {
  margin-right: 16px;
}

.comment-demo-custom__head {
  display: flex;
  justify-content: space-between;
}

.comment-demo-custom__author {
  margin-right: 24px;
}

.comment-demo-custom__author a {
  margin-right: 12px;
  font-size: 14px;
  color: var(--devui-text);
  font-weight: bold;
}

.comment-demo-custom__author a:hover {
  text-decoration: none;
}

.comment-demo-custom__author > span {
  color: var(--devui-text-weak);
}

.comment-demo-custom__actions button {
  margin-right: 12px;
}
</style>

:::

Comment 파라미터

Comment 슬롯

더 알아보기 (Learn more)

avatar·author·datetime 파라미터로 기본 댓글을 빠르게 구성하고, avatar·head·actions 슬롯으로 원하는 모양으로 자유롭게 커스터마이즈할 수 있어요.