vant4 实现评论盖楼的样式

Vant4 提供了 `comment` 组件来实现评论盖楼的样式。你可以通过以下步骤来使用该组件：

1. 安装 Vant4：`npm install vant@next --save`

2. 在需要使用评论盖楼的页面引入组件：

   <script>
   import { Comment, CommentInput } from 'vant';

   export default {
     components: {
       [Comment.name]: Comment,
       [CommentInput.name]: CommentInput,
     },
     // ...
   };
   </script>

3. 在页面中使用 `comment` 和 `comment-input` 组件：

   <template>
     <div>
       <van-comment v-model="comments" :lazy-render="false">
         <template #header>
           <div class="comment-header">共 {{ comments.length }} 条评论</div>
         </template>
         <template #item="{ item }">
           <div class="comment-item">
             <div class="comment-author">{{ item.author }}</div>
             <div class="comment-content">{{ item.content }}</div>
             <div class="comment-footer">{{ item.time }}</div>
           </div>
         </template>
       </van-comment>

       <van-comment-input
         v-model="newComment"
         :value="newComment"
         show-confirm-button
         @confirm="addComment"
         placeholder="写评论..."
       />
     </div>
   </template>

   <script>
   export default {
     data() {
       return {
         comments: [
           {
             id: 1,
             author: '小明',
             content: '这是一条评论',
             time: '2021-08-01 10:00:00',
             children: [
               {
                 id: 2,
                 author: '小红',
                 content: '回复小明的评论',
                 time: '2021-08-01 10:10:00',
               },
             ],
           },
         ],
         newComment: '',
       };
     },
     methods: {
       addComment() {
         const id = this.comments.length + 1;
         const author = '小王';
         const content = this.newComment;
         const time = new Date().toLocaleString();
         const newComment = { id, author, content, time };
         this.comments.unshift(newComment);
         this.newComment = '';
       },
     },
   };
   </script>

4. 样式可以自定义，可以在组件外部定义对应的 CSS 类名来修改样式。

   .comment-header {
     padding: 10px;
     font-size: 16px;
     font-weight: bold;
     background-color: #f5f5f5;
   }

   .comment-item {
     margin: 10px;
   }

   .comment-author {
     font-weight: bold;
   }

   .comment-content {
     margin-top: 5px;
   }

   .comment-footer {
     font-size: 12px;
     color: #999;
     margin-top: 5px;
   }

以上就是使用 Vant4 实现评论盖楼的样式的步骤。