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


Posted in Vue.js onMay 30, 2021

场景:一个巡检单据有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小弹窗内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Vue.js 相关文章推荐
vue+iview实现分页及查询功能
Nov 17 Vue.js
vue实现广告栏上下滚动效果
Nov 26 Vue.js
vue中defineProperty和Proxy的区别详解
Nov 30 Vue.js
vue实现两个区域滚动条同步滚动
Dec 13 Vue.js
vue实现简易计算器功能
Jan 20 Vue.js
vue实现禁止浏览器记住密码功能的示例代码
Feb 03 Vue.js
VUE实现吸底按钮
Mar 04 Vue.js
原生JS封装vue Tab切换效果
Apr 28 Vue.js
一篇文章学会Vue中间件管道
Jun 20 Vue.js
vue+iview实现手机号分段输入框
Mar 25 Vue.js
Vue+TypeScript中处理computed方式
Apr 02 Vue.js
Vue OpenLayer测距功能的实现
Apr 20 Vue.js
vue-cli4.5.x快速搭建项目
Vue CLI中模式与环境变量的深入详解
springboot+VUE实现登录注册
May 27 #Vue.js
vue+springboot实现登录验证码
vue+spring boot实现校验码功能
May 27 #Vue.js
vue-cropper组件实现图片切割上传
May 27 #Vue.js
vue-cropper插件实现图片截取上传组件封装
May 27 #Vue.js
You might like
PHP安装问题
2006/10/09 PHP
PHP extract 将数组拆分成多个变量的函数
2010/06/30 PHP
Window下PHP三种运行方式图文详解
2013/06/11 PHP
thinkPHP线上自动加载异常与修复方法实例分析
2016/12/01 PHP
PHP命名空间namespace的定义方法详解
2017/03/29 PHP
php生出随机字符串
2017/07/06 PHP
Yii2.0框架模型多表关联查询示例
2019/07/18 PHP
TNC vs BOOM BO3 第三场2.13
2021/03/10 DOTA
javascript的对话框详解与参数
2007/03/08 Javascript
js中函数调用的两种常用方法使用介绍
2014/07/17 Javascript
jquery制作多功能轮播图插件
2015/04/02 Javascript
JS数字抽奖游戏实现方法
2015/05/04 Javascript
js实现的倒计时按钮实例
2015/06/24 Javascript
Grunt入门教程(自动任务运行器)
2015/08/06 Javascript
javascript嵌套函数和在函数内调用外部函数的区别分析
2016/01/31 Javascript
ArtEditor富文本编辑器增加表单提交功能
2016/04/18 Javascript
JSP防止网页刷新重复提交数据的几种方法
2016/11/19 Javascript
兼容浏览器的js事件绑定函数(详解)
2017/05/09 Javascript
vue脚手架vue-cli的学习使用教程
2017/06/06 Javascript
详解React开发必不可少的eslint配置
2018/02/05 Javascript
React实现评论的添加和删除
2020/10/20 Javascript
[05:35]DOTA2英雄梦之声_第13期_拉比克
2014/06/21 DOTA
[03:16]DOTA2完美大师赛小组赛精彩集锦
2017/11/22 DOTA
python实现从字典中删除元素的方法
2015/05/04 Python
python数据挖掘需要学的内容
2019/06/23 Python
10行Python代码计算汽车数量的实现方法
2019/10/23 Python
Python Gluon参数和模块命名操作教程
2019/12/18 Python
flask框架渲染Jinja模板与传入模板变量操作详解
2020/01/25 Python
python调用API接口实现登陆短信验证
2020/05/10 Python
英国健身专家:WIT Fitness
2021/02/09 全球购物
如何强制垃圾回收
2015/10/06 面试题
小学运动会表扬稿
2014/01/19 职场文书
员工安全责任书范本
2014/07/24 职场文书
党的群众路线教育实践活动专题组织生活会发言材料
2014/10/17 职场文书
房地产财务经理岗位职责
2015/04/08 职场文书
python中的被动信息搜集
2021/04/29 Python