为什么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.js
export 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>