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打开其他项目页面并传入数据详解
Nov 25 Vue.js
vue + el-form 实现的多层循环表单验证
Nov 25 Vue.js
vuex的数据渲染与修改浅析
Nov 26 Vue.js
Vue $attrs &amp; inheritAttr实现button禁用效果案例
Dec 07 Vue.js
Vue单页面应用中实现Markdown渲染
Feb 14 Vue.js
vue route新窗口跳转页面并且携带与接收参数
Apr 10 Vue.js
vue项目打包后路由错误的解决方法
Apr 13 Vue.js
vue使用localStorage持久性存储实现评论列表
Apr 14 Vue.js
vue 数字翻牌器动态加载数据
Apr 20 Vue.js
vue 自定义组件添加原生事件
Apr 21 Vue.js
Vue2项目中对百度地图的封装使用详解
Jun 16 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
一个ubbcode的函数,速度很快.
2006/10/09 PHP
PHP 和 XML: 使用expat函数(二)
2006/10/09 PHP
PHP经典的给图片加水印程序
2006/12/06 PHP
PHP与MySQL开发中页面乱码的产生与解决
2008/03/27 PHP
PHP实现的Redis多库选择功能单例类
2017/07/27 PHP
微信支付之JSAPI公众号支付详解
2019/05/15 PHP
PHP数组与字符串互相转换实例
2020/05/05 PHP
基于jquery的修改当前TAB显示标题的代码
2010/12/11 Javascript
jquery实现页面图片等比例放大缩小功能
2014/02/12 Javascript
vue实现添加标签demo示例代码
2017/01/21 Javascript
vue使用Element组件时v-for循环里的表单项验证方法
2018/06/28 Javascript
JavaScript函数式编程(Functional Programming)纯函数用法分析
2019/05/22 Javascript
微信头像地址失效踩坑记附带解决方案
2019/09/23 Javascript
Node.js开发之套接字(socket)编程入门示例
2019/11/05 Javascript
[05:45]Ti4观战指南(下)
2014/07/07 DOTA
python 安装virtualenv和virtualenvwrapper的方法
2017/01/13 Python
Python实现的中国剩余定理算法示例
2017/08/05 Python
Python实现批量读取图片并存入mongodb数据库的方法示例
2018/04/02 Python
使用CodeMirror实现Python3在线编辑器的示例代码
2019/01/14 Python
利用Python脚本批量生成SQL语句
2020/03/04 Python
Python如何将装饰器定义为类
2020/07/30 Python
如何用Python绘制3D柱形图
2020/09/16 Python
Python基于locals返回作用域字典
2020/10/17 Python
python定时截屏实现
2020/11/02 Python
纯HTML5+CSS3制作生日蛋糕代码
2016/11/16 HTML / CSS
移动端HTML5实现文件上传功能【附代码】
2016/03/25 HTML / CSS
巴西最大的玩具连锁店:Ri Happy
2020/06/17 全球购物
为什么如下的代码int a=100,b=100;long int c=a * b;不能工作
2013/11/29 面试题
后勤人员自我鉴定
2013/10/20 职场文书
毕业自荐书
2013/12/09 职场文书
日语专业毕业生自荐书
2014/06/18 职场文书
二手房购房协议书范本
2014/10/05 职场文书
保护校园环境倡议书
2015/04/28 职场文书
python析构函数用法及注意事项
2021/06/22 Python
使用python求解迷宫问题的三种实现方法
2022/03/17 Python
《总之就是很可爱》新作短篇动画《总之就是很可爱~制服~》将于2022年夏天播出
2022/04/07 日漫