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中的自定义指令
Dec 07 Vue.js
vue绑定class的三种方法
Dec 24 Vue.js
Vue使用鼠标在Canvas上绘制矩形
Dec 24 Vue.js
vue使用require.context实现动态注册路由
Dec 25 Vue.js
基于Vue3.0开发轻量级手机端弹框组件V3Popup的场景分析
Dec 30 Vue.js
vue中使用echarts的示例
Jan 03 Vue.js
vue+springboot实现登录验证码
May 27 Vue.js
解决vue $http的get和post请求跨域问题
Jun 07 Vue.js
vue+element ui实现锚点定位
Jun 29 Vue.js
Vue2.0搭建脚手架
Mar 13 Vue.js
如何优化vue打包文件过大
Apr 13 Vue.js
Vue Element plus使用方法梳理
Dec 24 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版本如何选择?应该使用哪个版本?
2015/05/13 PHP
PHP7新特性foreach 修改示例介绍
2016/08/26 PHP
利用switch语句进行多选一判断的实例代码
2016/11/14 PHP
利用PHP实现一个简单的用户登记表示例
2017/04/25 PHP
mapper--图片热点区域高亮组件官方站点
2007/12/22 Javascript
JS中令人发指的valueOf方法介绍
2013/02/22 Javascript
图片上传插件jquery.uploadify详解
2013/11/15 Javascript
导入extjs、jquery 文件时$使用冲突问题解决方法
2014/01/14 Javascript
JavaScript类属性的访问方式详解
2014/02/11 Javascript
jQuery UI插件自定义confirm确认框的方法
2015/03/20 Javascript
倾力总结40条常见的移动端Web页面问题解决方案
2016/05/24 Javascript
Javascript 实现全屏滚动实例代码
2016/12/31 Javascript
vue.js从安装到搭建过程详解
2017/03/17 Javascript
Angular中ng-repeat与ul li的多层嵌套重复问题
2017/07/24 Javascript
JS简单实现父子窗口传值功能示例【未使用iframe框架】
2017/09/20 Javascript
基于Node的Axure文件在线预览的实现代码
2019/08/28 Javascript
vue 框架下自定义滚动条(easyscroll)实现方法
2019/08/29 Javascript
vuex页面刷新导致数据丢失的解决方案
2020/12/10 Vue.js
Python ldap实现登录实例代码
2016/09/30 Python
Python+Socket实现基于UDP协议的局域网广播功能示例
2017/08/31 Python
python实现简单http服务器功能
2018/09/17 Python
解决pycharm的Python console不能调试当前程序的问题
2019/01/20 Python
Django实现学员管理系统
2019/02/26 Python
Ubuntu18.04中Python2.7与Python3.6环境切换
2019/06/14 Python
基于python3 的百度图片下载器的实现代码
2019/11/05 Python
Python利用myqr库创建自己的二维码
2020/11/24 Python
Python中使用Selenium环境安装的方法步骤
2021/02/22 Python
css3动画 小球滚动 js控制动画暂停
2019/11/29 HTML / CSS
CAT鞋美国官网:CAT Footwear
2017/11/27 全球购物
应聘美工求职信
2013/11/07 职场文书
今冬明春火灾防控工作方案
2014/05/29 职场文书
三严三实对照检查材料
2014/09/22 职场文书
医院领导班子四风对照检查材料
2014/09/27 职场文书
机关作风建设剖析材料
2014/10/11 职场文书
质量保证书格式模板
2015/02/27 职场文书
2016年党员岗位承诺书
2016/03/24 职场文书