vue.js - 为什么element-plus的dropdown没有show-arrow属性呢?

Question

为什么element-plus的dropdown没有show-arrow属性呢?

在tooltip中就有show-arrow属性。

想实现下面效果的时候，还需要再设置css将就箭头取消，整体位置上移一点，如果有show-arrow就方便多了。

有什么好的方式可以去掉这个arrow吗?

playground

<script setup lang="ts">const search = ref("");const msg = ref('Hello World!')</script><template>  <el-dropdown trigger="click">    <el-from>      <el-form-item class="mb-0">        <el-input placeholder="搜索" v-model="search" />      </el-form-item>    </el-from>    <template #dropdown>      <el-dropdown-menu>        <el-dropdown-item>你好</el-dropdown-item>        <el-dropdown-item>你好</el-dropdown-item>      </el-dropdown-menu>    </template>  </el-dropdown></template><style scoped>  .mb-0 {    margin-bottom: 0;  }</style>

注: 在ant design中的dropdown使默认没有箭头的，添加arrow之后才会出现。

Answer 1

直接加css吧
Element Plus 的 el-dropdown 组件默认没有 show-arrow 属性，这可能是因为其设计理念不同于 tooltip 组件。然而，在某些情况下，您可能需要去掉下拉菜单的箭头，并调整其位置。虽然没有直接的属性可以隐藏箭头，但可以通过一些 CSS 技巧来实现。

方法一：通过 CSS 隐藏箭头并调整位置

1. 隐藏箭头：通过选择箭头元素并设置 display: none。
2. 调整位置：根据需要调整 el-dropdown-menu 的位置。

<script setup lang="ts">import { ref } from 'vue';const search = ref("");</script><template>  <el-dropdown trigger="click">    <el-form>      <el-form-item class="mb-0">        <el-input placeholder="搜索" v-model="search" />      </el-form-item>    </el-form>    <template #dropdown>      <el-dropdown-menu>        <el-dropdown-item>你好</el-dropdown-item>        <el-dropdown-item>你好</el-dropdown-item>      </el-dropdown-menu>    </template>  </el-dropdown></template><style scoped>.mb-0 {  margin-bottom: 0;}/* 隐藏箭头 */.el-dropdown__popper::before {  display: none;}/* 根据需要调整下拉菜单的位置 */.el-dropdown-menu {  margin-top: -10px; /* 调整负值以向上移动 */}</style>

方法二：使用自定义指令或动态样式

自定义指令

// directives/hide-arrow.jsexport default {  mounted(el) {    const popper = el.querySelector('.el-dropdown__popper');    if (popper) {      popper.style.setProperty('--el-dropdown-menu-arrow-display', 'none');    }  }};

在组件中使用：

<script setup lang="ts">import { ref } from 'vue';import hideArrow from './directives/hide-arrow';const search = ref("");</script><template>  <el-dropdown v-hide-arrow trigger="click">    <el-form>      <el-form-item class="mb-0">        <el-input placeholder="搜索" v-model="search" />      </el-form-item>    </el-form>    <template #dropdown>      <el-dropdown-menu>        <el-dropdown-item>你好</el-dropdown-item>        <el-dropdown-item>你好</el-dropdown-item>      </el-dropdown-menu>    </template>  </el-dropdown></template><style scoped>.mb-0 {  margin-bottom: 0;}</style>

动态样式

<script setup lang="ts">import { ref, onMounted } from 'vue';const search = ref("");onMounted(() => {  const popper = document.querySelector('.el-dropdown__popper');  if (popper) {    popper.style.setProperty('--el-dropdown-menu-arrow-display', 'none');  }});</script><template>  <el-dropdown trigger="click">    <el-form>      <el-form-item class="mb-0">        <el-input placeholder="搜索" v-model="search" />      </el-form-item>    </el-form>    <template #dropdown>      <el-dropdown-menu>        <el-dropdown-item>你好</el-dropdown-item>        <el-dropdown-item>你好</el-dropdown-item>      </el-dropdown-menu>    </template>  </el-dropdown></template><style scoped>.mb-0 {  margin-bottom: 0;}/* 隐藏箭头 */.el-dropdown__popper::before {  display: none;}/* 根据需要调整下拉菜单的位置 */.el-dropdown-menu {  margin-top: -10px; /* 调整负值以向上移动 */}</style>