Element问题，求前端element大神解决~
百度搜了好久都没找到解决方案都不行，求吾友大神帮忙解决一下，谢谢！附加案列后缀txt改为html
本帖最后由 HULANG-BTB 于 2021-12-2 11:11 编辑
原因在于弹出的内容插入到了body上，鼠标移到弹出内容上的时候你的demo元素会失去hover状态宠儿display变成none导致消失。用变量记录并保持为flex就行了。
<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 引入样式 -->
<link rel="stylesheet" >
<!-- 引入组件库 -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
<div class="tip">
（Element：Popover 弹出框 + Tooltip 文字提示）<br/>
需求：鼠标移入到Popover或Tooltip提示信息框区域，（上级）后面的黄色背景不隐藏，也保持显示状态；
</div>
<div class="demo">
<div class="name">鼠标移上来看效果</div>
<div class="box" :style="displayStyle">
<el-popover
v-model="popoverActive"
placement="top-start"
title="标题"
width="200"
trigger="hover"
content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。"
>
<el-button slot="reference" style="margin-right: 10px;">hover 激活</el-button>
</el-popover>
<el-tooltip v-model="tipActive1" v-model="hoverActive" class="item" effect="dark" content="Top Left 提示文字" placement="top-start">
<el-button>上左</el-button>
</el-tooltip>
<el-tooltip v-model="tipActive2" v-model="hoverActive" class="item" effect="dark" content="Left Top 提示文字" placement="left-start">
<el-button>左上</el-button>
</el-tooltip>
<el-tooltip v-model="tipActive3" v-model="hoverActive" class="item" effect="dark" content="Right Top 提示文字" placement="right-start">
<el-button>右上</el-button>
</el-tooltip>
<el-tooltip v-model="tipActive4" v-model="hoverActive" class="item" effect="dark" content="Bottom Left 提示文字" placement="bottom-start">
<el-button>下左</el-button>
</el-tooltip>
</div>
</div>
</div>
</body>
<script>
new Vue({
el: '#app',
data() {
return {
popoverActive: false,
tipActive1: false,
tipActive2: false,
tipActive3: false,
tipActive4: false,
}
},
computed: {
displayStyle() {
const { popoverActive, tipActive1, tipActive2, tipActive3, tipActive4 } = this
return popoverActive || tipActive1 || tipActive2 || tipActive3 || tipActive4 ? 'display:flex;' : ''
}
}
});
</script>
<style>
.tip{
margin: 50px auto 0 auto;
text-align: center;
line-height: 30px;
}
.demo {
position: relative;
margin: 50px auto 0 auto;
width: 200px;
text-align: center;
padding: 10px;
background-color: #f5f5f5;
}
.box {
position: absolute;
height: 200px;
top: 40px;
left: 0;
background-color: bisque;
display: none;
align-items: center;
padding: 10px;
}
.demo:hover .box {
display: flex;
}
</style>
</html>
这样子？ HULANG-BTB 发表于 2021-12-2 11:05
原因在于弹出的内容插入到了body上，鼠标移到弹出内容上的时候你的demo元素会失去hover状态宠儿display变成 ...
感谢！就是这个效果，貌似好像只能用这个变量控制的方法~{:301_1003:} Slice1129 发表于 2021-12-2 11:02
这样子？
@HULANG-BTB 像这位大牛写的效果 还有一种办法，不要中css的hover，用@mouseenter，@mouseleave代替，手动控制 半山Alec 发表于 2021-12-2 12:38
还有一种办法，不要中css的hover，用@mouseenter，@mouseleave代替，手动控制
逻辑还是一样的变量控制。 现在还用elui的吗 秋田先生 发表于 2021-12-2 13:57
现在还用elui的吗
用啊，怎么不用？挺方便的 这个只能用js来实现吧,然后清除冒泡
页:
[1]
2