Vue+Element UI实现概要小弹窗的全过程
时间：2022-09-22 10:40:54|栏目：vue|点击： 次
场景：一个巡检单据有n个巡检明细，一个巡检明细有n个巡检项目。
实现效果：当鼠标移到明细行的概要图标时显示当前行的巡检项目卡片弹窗，移出弹窗时关闭弹窗
巡检单据详情
鼠标移到项目概要图标
效果实现
data里面声明的变量
// 概要弹窗
outlineDialog: false,
// 当前行标准概要
standSummary: [],
// 概要弹窗位置控制
outlineCard: {
pageY: null,
pageX: null,
display: "none"
}
1、弹窗代码
outlineDialog：默认false，概要弹窗显示标志
outlineStyle：弹窗的动态样式设置，在computed进行监控和进行双向数据绑定展示
leave：鼠标离开弹窗卡片的事件
<!-- 项目概要 -->
<div class="summary-div" v-show="outlineDialog" ref="box-cardDiv" :style="outlineStyle" @mouseleave="leave">
<div class="summary-title">项目概要</div>
<ul class="summary-ul">
<li class="summary-li"><span>标准名称</span><span>是否必填</span><span>是否显示</span></li>
<li v-for="(item, index) in standSummary" :key="index" class="summary-li"><span>{{item.inspectdetailName}}</span><span>{{item.isRequired ? '是':'否'}}</span> <span>{{item.isDisplay ? '是':'否'}}</span> </li>
</ul>
</div>
2、弹窗样式代码
<style lang="scss">
#box-cardDiv {
position: absolute;
}
.summary-div {
border: solid 1px #eee;
background-color: #fff;
border-radius: 4px;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
padding: 10px 10px 0 10px;
width: 300px;
position: absolute;
font-size: 13px;
}
.summary-ul {
list-style: none;
padding-left: 0;
max-height: 350px;
overflow-x: hidden;
overflow-y: auto;
}
.summary-li {
margin: 10px 10px 15px 10px;
width: 250px;
text-overflow: ellipsis;
overflow: hidden;
/* white-space: nowrap; */
display: flex;
span {
margin: auto;
width: 55px;
}
}
.summary-li:first-child span:not(:first-child) {
margin-left: 40px;
}
.summary-li:not(:first-child) span:nth-child(1) {
width: 90px;
}
.summary-li:not(:first-child) span:nth-child(2) {
width: 50px;
margin-left: 45px;
}
.summary-li:not(:first-child) span:nth-child(3) {
margin-left: 60px;
}
.summary-title {
color: #cccccc;
margin-left: 10px;
}
</style>
3、明细表格的项目概要列代码
checkStandSunmmary：鼠标移到概要图标的事件
<el-table-column label="项目概要" align="center" width="500">
<template slot="header">
<span>项目概要</span>
<span class="vertical"></span>
</template>
<template slot-scope="scope">
<div class="col-summmary-div">
<span class="col-summmary-format"><span>{{scope.row.firstListItem}}</span></span>
<span> 等 {{scope.row.equInspectplanItemList.length}} 项 </span>
<i class="el-icon-arrow-down" @mouseenter="checkStandSunmmary(scope.row)"></i>
</div>
</template>
</el-table-column>
4、outlineStyle 弹窗卡片动态样式控制
明细在页面底端的时候卡片照旧展示会被盖掉一部分，需要根据概要图标的位置动态计算卡片打开的位置，如果在底端就把卡片往上边打开
computed: {
outlineStyle() {
let h = 45 * this.standSummary.length;
let browser = document.body.clientHeight - 50;
let pageY = this.outlineCard.pageY - 50;
let pageX = this.outlineCard.pageX - 280;
if (pageY + h > browser) {
return `left: ${ pageX }px; top: ${ (pageY-h) }px; position: absolute; display: ${ this.outlineCard.display }`;
} else {
return `left: ${ pageX }px; top: ${ (pageY-60) }px; position: absolute; display: ${ this.outlineCard.display }`;
}
}
},
5、leave 鼠标离开弹窗卡片的事件
当鼠标移出卡片把卡片display样式设置为none同时设置v-show为false弹窗不展示
/**
* 鼠标离开标准概要
*/
leave() {
this.outlineCard.display = "none";
this.outlineDialog = false;
},
6、checkStandSunmmary 鼠标移到概要图标的事件
打开弹窗卡片
获取当前行的检验项目集合
获取当前鼠标在浏览器的X轴Y轴位置
动态设置弹窗卡片样式为null（display除了写none为不显示其他值都是显示）
/**
* 当前行标准概要
*/
checkStandSunmmary(row) {
this.outlineDialog = true;
this.standSummary = row.equInspectplanItemList;
this.outlineCard.pageY = window.event.clientY;
this.outlineCard.pageX = window.event.clientX;
this.outlineCard.display = null;
},
总结
上一篇：在vue中如何封装G2图表
栏 目：vue
本文标题：Vue+Element UI实现概要小弹窗的全过程
本文地址：http://www.codeinn.net/misctech/214374.html
