使用less实现一个 ElementPlus Dropdown下拉菜单 通过aria-expanded="true"实现右侧箭头动态切换

首先需要在HTML中添加一个Dropdown组件，如下所示：

<div class="el-dropdown">
  <button class="el-dropdown__button">下拉菜单<i class="el-icon-arrow-down el-icon--right"></i></button>
  <ul class="el-dropdown__menu">
    <li class="el-dropdown__item">选项1</li>
    <li class="el-dropdown__item">选项2</li>
    <li class="el-dropdown__item">选项3</li>
  </ul>
</div>

接下来，我们需要使用less来实现动态切换右侧箭头。首先定义两个箭头样式：

// 向下的箭头
.arrow-down {
  &::before {
    content: '\e6a7';
  }
}

// 向上的箭头
.arrow-up {
  &::before {
    content: '\e6a6';
  }
}

然后，我们使用less的&符号来根据不同的状态设置箭头的样式。例如，当下拉菜单展开时，我们需要将右侧箭头切换为向上的箭头：

.el-dropdown {
  .el-dropdown__button {
    i {
      &.el-icon-arrow-down {
        &.el-icon--right {
          &.is-active {
            @extend .arrow-up;
          }
          &:not(.is-active) {
            @extend .arrow-down;
          }
        }
      }
    }
  }
  
  .el-dropdown__menu {
    display: none;
    &.is-opened {
      display: block;
      + .el-dropdown__icon {
        @extend .arrow-up;
      }
    }
  }
}

在上面的代码中，我们使用了is-active和is-opened来表示下拉菜单是否展开。当展开时，我们使用@extend语法将.arrow-up样式应用于右侧箭头。反之，我们使用.arrow-down样式。

最后，我们还需要添加一些JavaScript代码来处理下拉菜单的展开和收起。我们可以使用以下代码：

const button = document.querySelector('.el-dropdown__button');
const menu = document.querySelector('.el-dropdown__menu');

button.addEventListener('click', () => {
  button.classList.toggle('is-active');
  menu.classList.toggle('is-opened');
});

这样就完成了ElementPlus Dropdown下拉菜单的样式和交互效果。