element-ui 2.15版本下 el-dropdown 箭头默认是向下的 如何在移入时将箭头方向朝上

您可以使用CSS来实现在移入时将el-dropdown的箭头方向朝上。具体做法如下：

1. 给el-dropdown添加一个class，例如"reverse-arrow"

2. 在CSS中定义".reverse-arrow .el-dropdown__caret"选择器，将箭头旋转180度，并且修改箭头颜色为与背景色相同，以避免出现黑色边框。具体代码如下：

.reverse-arrow .el-dropdown__caret {
  transform: rotate(180deg);
  border-top-color: transparent;
  border-bottom-color: #fff;
}

3. 使用JavaScript在移入和移出时切换class。具体代码如下：

<el-dropdown class="reverse-arrow" @mouseenter.native="reverseArrow" @mouseleave.native="reverseArrow">
  <!-- dropdown items -->
</el-dropdown>

methods: {
  reverseArrow() {
    this.$el.classList.toggle('reverse-arrow');
  },
}

这样，当鼠标移入时，箭头就会旋转180度，指向上方。当鼠标移出时，箭头就会恢复原状。

相关问题

element-ui 2.15版本下 el-dropdown 箭头默认是向下的 如何在移入下拉菜单时时将箭头方向朝上

您可以使用Element UI提供的事件来实现在移入下拉菜单时将el-dropdown的箭头方向朝上。具体做法如下：

1. 给el-dropdown添加一个ref，例如"dropdown"

<el-dropdown ref="dropdown">
  <span class="el-dropdown-link">
    下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
  </span>
  <!-- dropdown items -->
</el-dropdown>

2. 在mounted钩子函数中获取el-dropdown的箭头元素，以备后续操作。具体代码如下：

mounted() {
  this.caretEl = this.$refs.dropdown.$el.querySelector('.el-dropdown__caret');
},

3. 监听el-dropdown的visible-change事件，当下拉菜单显示时，将箭头旋转180度。具体代码如下：

<el-dropdown @visible-change="onVisibleChange">
  <!-- dropdown items -->
</el-dropdown>

methods: {
  onVisibleChange(visible) {
    if (visible) {
      this.caretEl.classList.add('reverse-arrow');
    } else {
      this.caretEl.classList.remove('reverse-arrow');
    }
  },
}

4. 使用CSS将箭头旋转180度。具体代码如下：

.reverse-arrow {
  transform: rotate(180deg);
}

这样，当下拉菜单显示时，箭头就会旋转180度，指向上方。当下拉菜单隐藏时，箭头就会恢复原状。

el-dropdown 箭头默认是向下的 如何在移入时将箭头方向朝上

您可以通过设置 `el-dropdown` 组件的 `popper-class` 属性，来覆盖默认的下拉框样式，从而实现在移入时箭头方向朝上的效果。

具体来说，您需要自定义一个 CSS 类，将下拉框的箭头旋转 180 度，然后将该类名赋值给 `popper-class` 属性。示例代码如下：

<el-dropdown trigger="hover" popper-class="my-dropdown">
  <span class="el-dropdown-link">
    下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
  </span>
  <el-dropdown-menu slot="dropdown">
    <el-dropdown-item>Action 1</el-dropdown-item>
    <el-dropdown-item>Action 2</el-dropdown-item>
    <el-dropdown-item>Action 3</el-dropdown-item>
  </el-dropdown-menu>
</el-dropdown>

<style>
  .my-dropdown .el-dropdown-menu__icon {
    transform: rotate(180deg);
  }
</style>

在上面的示例中，我们创建了一个名为 `my-dropdown` 的 CSS 类，并将其赋值给 `popper-class` 属性。随后，我们在样式表中定义了一个选择器 `.my-dropdown .el-dropdown-menu__icon`，用于选择下拉框中的箭头元素，并将其旋转 180 度。这样，当鼠标移入 `el-dropdown` 组件时，下拉框的箭头就会朝上了。

需要注意的是，上述代码中的 `el-dropdown-menu__icon` 类名是 `element-ui` 内部使用的类名，如果您使用的是其他UI框架或自己编写的样式，可能需要调整该类名或替换为您的样式类名。