如何在Vuetify v菜单组件中创建三角形指针？

Question

是否可以在Vuetify 2.x中将三角形指针添加到v-menu组件？

我的意思是网页上的这个共同细节（例如，此屏幕快照来自github：]

我有示例代码here，其菜单在单击按钮时显示为下拉菜单。我设法通过CSS在40px的菜单中添加了页边距，因此将其下推。这将为三角形提供一些空间，但是如何在github上添加它的三角形指针呢？

Answer 1

Codepen solution

我相信你需要这样的东西：

.my-menu {
  margin-top: 40px;
  contain: initial;
  overflow: visible;
}
.my-menu::before {
  position: absolute;
  content: "";
  top: 0;
  right: 10px;
  transform: translateY(-100%);
  width: 10px; 
  height: 13px; 
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 13px solid #fff;
}

注意：这是有关其工作原理的说明：css tricks

Answer 2

特别是关于vuetify，您将使用activator插槽和v-model确定菜单的状态：

<v-menu v-model="menu" ...>
   <template v-slot:activator="{ on }">
      <v-btn 
        icon
        v-on="on">
        <v-icon>mdi-plus>
        <v-icon v-if="menu">mdi-menu-up</v-icon>
        <v-icon v-else>mdi-menu-up</v-icon>
      </v-btn>          
   </template>
</v-menu>

请确保此处将v-model属性绑定到包含组件的定义内的数据属性。

sidenote

我不完全确定在<v-btn icon中放置2个图标会导致什么。您可能必须使用flex对其稍加调整，以使布局正常工作。