效果图:
完整代码:
<template>
<div class="container">
<div class="btn-group">
<div class="more-btn" @mouseleave="mouseleave()" @mouseenter="mouseenter()">
<el-button onfocus="this.blur()">操作</el-button>
<div class="more-btn-group">
<el-button>添加关键词</el-button>
<el-button>添加类目排名</el-button>
<el-button>取消置顶</el-button>
<el-button>删除监控</el-button>
<el-button>移动至</el-button>
</div>
<div class="triangle"></div>
</div>
</div>
</div>
</template>
<script>
export default {
methods: {
// 鼠标移入更多按钮
mouseenter() {
let doc = document.getElementsByClassName("more-btn-group")[0];
doc.classList.add("is-show");
let triangleDoc = document.getElementsByClassName("triangle")[0];
triangleDoc.classList.add("triangle-position");
},
// 鼠标移出更多按钮
mouseleave() {
let doc = document.getElementsByClassName("more-btn-group")[0];
doc.classList.remove("is-show");
let triangleDoc = document.getElementsByClassName("triangle")[0];
triangleDoc.classList.remove("triangle-position");
}
}
};
</script>
<style lang="scss" scoped>
.btn-group {
height: 30px;
line-height: 30px;
display: flex;
padding: 50px;
/deep/ .el-button {
min-width: 0px;
border: 0;
color: var(--DBlue);
padding: 0;
&:hover {
color: var(--JBlue);
background-color: #fff;
}
}
.more-btn {
margin-left: 10px;
position: relative;
.more-btn-group {
position: absolute;
top: 28px;
left: -30px;
z-index: 10;
width: 90px;
height: 0;
overflow: hidden;
background-color: #fff;
box-shadow: 0px 0px 24px 0px rgba(168, 168, 236, 0.22);
transition: all 0.5s;
border-radius: 10px;
display: flex;
flex-direction: column;
align-items: center;
/deep/ .el-button:first-child {
padding-top: 9px;
}
/deep/ .el-button {
width: 100%;
color: #333;
font-size: 12px;
padding: 6px;
margin: 0;
&:hover {
color: var(--DBlue);
}
}
}
.triangle-position {
position: absolute;
top: 22px;
left: 10px;
z-index: 1000;
border-width: 0 6px 6px;
border-style: solid;
border-color: transparent transparent #fff;
box-shadow: 0px 0px 24px 0px rgba(168, 168, 236, 0.22);
}
.is-show {
height: 126px;
}
}
}
</style>