如何在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

尝试一下：

.my-menu {
  margin-top: 36px;
  overflow: visible;
}

.my-menu .v-list::before {
  right: 10px;
  top: -10px;
  position: absolute;
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 10px 10px 10px;
  border-color: transparent transparent #fff transparent;
}

Answer 3

专门针对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属性绑定到包含组件的定义中的数据属性。

边注

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