如何在 Vuetify v-menu 组件中创建三角形指针？答案

【问题标题】：How can I create a triangle pointer in Vuetify v-menu component?如何在 Vuetify v-menu 组件中创建三角形指针？
【发布时间】：2020-04-16 08:17:15
【问题描述】：

有没有办法在 Vuetify 2.x 中添加指向v-menu 组件的三角形指针？

我的意思是网页上的这个常见细节（例如，这个截图来自 github）：

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

【问题讨论】：

标签： css vue.js vuetify.js

【解决方案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

【讨论】：

【解决方案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 属性绑定到包含组件定义中的数据属性。

旁注

我不完全确定在 <v-btn icon 中放置 2 个图标会产生什么结果。您可能需要使用 flex 对其进行一些调整才能使布局正常工作。

【讨论】：

有mdi-menu-down 图标。但我想他问的是名单上的三角形（向上）。

【解决方案3】：

试试这个：

.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;
}

【讨论】：