Vuetify：如何创建三角形徽章？

Question

我知道如果我使用 v-badge，我会得到一个圆形徽章，但我想要一个三角形徽章，如下所示。

谁能给点建议？

谢谢。

Answer 1

您可以使用 v-badge 的 badge 槽插入带有 div 的 1，并设置 div 的样式

1. 在模板中，将一个类应用到 v-badge（名为 "triangle"），并在 div 槽中插入一个 badge 以包含数字以及一个类（名为 "my-badge"）：

   <v-badge class="triangle">
     <template v-slot:badge>
       <div class="my-badge">1</div>
     </template>
   </v-badge>
   

2. 为 .triangle .v-badge__badge 和 .my-badge 添加 CSS 样式：

   .triangle .v-badge__badge {
     /* remove border radius to allow icon to fill space */
     border-radius: 0;
   
     /* use a clip-path to form a quirky triangle */
     clip-path: polygon(100% 51%, 0 0, 3% 100%);
   
     height: 30px;
     width: 30px;
   }
   
   .my-badge {
     display: flex;
     justify-content: center;
     align-items: center;
     padding-right: 0.9em;
     font-size: 14px;
     height: 100%;
     color: #fff;
     background: green;
   }
   

demo