element-ui 2.15版本下 el-dropdown 箭头默认是向下的 如何在移入下拉菜单时时将箭头方向朝上
时间: 2024-03-21 22:38:44 浏览: 164
Element Dropdown下拉菜单的使用方法
5星 · 资源好评率100%
您可以使用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度,指向上方。当下拉菜单隐藏时,箭头就会恢复原状。
阅读全文