elelmentplus--下拉菜单旋转取消黑框

取消下拉黑框

/* 清除掉黑色边框 */
.el-tooltip__trigger {
  outline: none;
}

下拉菜单箭头旋转

• 使用visible-change事件监听下拉菜单的显示与隐藏，根据显示状态来切换旋转角度。

<template>
  <el-dropdown ref="dropdown" @visible-change="handleVisibleChange">
    <span class="el-dropdown-link">
      下拉菜单<i
        class="el-icon-arrow-down el-icon--right"
        :class="{ 'rotate': isDropdownOpen }"
      ></i>
    </span>
    <el-dropdown-menu slot="dropdown">
      <el-dropdown-item>选项1</el-dropdown-item>
      <el-dropdown-item>选项2</el-dropdown-item>
    </el-dropdown-menu>
  </el-dropdown>
</template>

<script>
  export default {
    data() {
      return {
        isDropdownOpen: false,
      };
    },
    methods: {
      handleVisibleChange(visible) {
        this.isDropdownOpen = visible;
      },
    },
  };
</script>

<style scoped>
  .el-icon-arrow-down {
    transition: transform 0.3s ease;
  }
  .el-icon-arrow-down.rotate {
    transform: rotate(180deg);
  }
</style>