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 $router和$route的区别详解
Dec 02 Vue.js
vue实现登录、注册、退出、跳转等功能
Dec 23 Vue.js
vue中封装axios并实现api接口的统一管理
Dec 25 Vue.js
Vue 修改网站图标的方法
Dec 31 Vue.js
vue-quill-editor插入图片路径太长问题解决方法
Jan 08 Vue.js
如何在vue中使用HTML 5 拖放API
Jan 14 Vue.js
vue-resource 拦截器interceptors使用详解
Jan 18 Vue.js
Vue基本指令实例图文讲解
Feb 25 Vue.js
如何让vue长列表快速加载
Mar 29 Vue.js
vue如何批量引入组件、注册和使用详解
May 12 Vue.js
vue实现列表垂直无缝滚动
Apr 08 Vue.js
vue项目如何打包之项目打包优化(让打包的js文件变小)
Apr 30 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 图片水印类代码
2012/08/27 PHP
PHP实现HTML生成PDF文件的方法
2014/11/07 PHP
PHP中array_slice函数用法实例详解
2014/11/25 PHP
thinkphp多层MVC用法分析
2015/12/30 PHP
window.open()弹出居中的窗口
2007/02/01 Javascript
JavaScript实现自动对页面上敏感词进行屏蔽的方法
2015/07/27 Javascript
Jquery ajax基础教程
2015/11/20 Javascript
基于jQuery实现点击最后一行实现行自增效果的表格
2016/01/12 Javascript
使用jQuery的easydrag插件实现可拖动的DIV弹出框
2016/02/19 Javascript
JS组件Bootstrap实现下拉菜单效果代码
2016/04/26 Javascript
js改变style样式和css样式的简单实例
2016/06/28 Javascript
javascript加载xml 并解析各节点的值(实现方法)
2016/10/12 Javascript
jQuery实现的仿百度,仿谷歌搜索下拉框效果示例
2016/12/30 Javascript
VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解
2018/11/30 Javascript
vue + element-ui的分页问题实现
2018/12/17 Javascript
JS实现网页时钟特效
2020/03/25 Javascript
微信小程序纯文本实现@功能
2020/04/08 Javascript
原生js实现放大镜组件
2021/01/22 Javascript
[02:57]DOTA2英雄基础教程 风行者
2014/01/16 DOTA
Python中的高级数据结构详解
2015/03/27 Python
Python二进制串转换为通用字符串的方法
2018/07/23 Python
Python实现FM算法解析
2019/06/18 Python
OpenCV+Python--RGB转HSI的实现
2019/11/27 Python
基于Python+QT的gui程序开发实现
2020/07/03 Python
Python 如何测试文件是否存在
2020/07/31 Python
python 利用toapi库自动生成api
2020/10/19 Python
HTML5视频支持检测(检查浏览器是否支持视频播放)
2013/06/08 HTML / CSS
GWT都有什么特性
2016/12/02 面试题
创业计划书中要认真思考的问题
2013/12/28 职场文书
领导党性分析材料
2014/02/15 职场文书
2014年酒店工作总结范文
2014/11/17 职场文书
导游词400字
2015/02/13 职场文书
《世界多美呀》教学反思
2016/02/22 职场文书
2019毕业论文致谢词
2019/06/24 职场文书
MYSQL 运算符总结
2021/11/11 MySQL
使用Nginx+Tomcat实现负载均衡的全过程
2022/05/30 Servers