Vue+Element UI实现概要小弹窗的全过程

场景：一个巡检单据有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>&nbsp;等&nbsp;{{scope.row.equinspectplanitemlist.length}}&nbsp;项&nbsp;</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+element ui实现概要小弹窗的文章就介绍到这了,更多相关vue+element ui小弹窗内容请搜索www.887551.com以前的文章或继续浏览下面的相关文章希望大家以后多多支持www.887551.com！