欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-03-13 08:11:19
场景:一个巡检单据有n个巡检明细,一个巡检明细有n个巡检项目。实现效果:当鼠标移到明细行的概要图标时显示当前行的巡检项目卡片弹窗,移出弹窗时关闭弹窗巡检单据详情鼠标移到项目概要图标效果实现data里面...

场景:一个巡检单据有n个巡检明细,一个巡检明细有n个巡检项目。

实现效果:当鼠标移到明细行的概要图标时显示当前行的巡检项目卡片弹窗,移出弹窗时关闭弹窗

巡检单据详情

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

鼠标移到项目概要图标

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

效果实现

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小弹窗内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持!