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 相关文章推荐
vuex的数据渲染与修改浅析
Nov 26 Vue.js
vue从后台渲染文章列表以及根据id跳转文章详情详解
Dec 14 Vue.js
vue 使用 sortable 实现 el-table 拖拽排序功能
Dec 26 Vue.js
Vue中强制组件重新渲染的正确方法
Jan 03 Vue.js
Vue项目中使用mock.js的完整步骤
Jan 12 Vue.js
如何在vue中使用HTML 5 拖放API
Jan 14 Vue.js
Vite和Vue CLI的优劣
Jan 30 Vue.js
Vue实现圆环进度条的示例
Feb 06 Vue.js
一定要知道的 25 个 Vue 技巧
Nov 02 Vue.js
Vue自定义铃声提示音组件的实现
Jan 22 Vue.js
在vue中import()语法不能传入变量的问题及解决
Apr 01 Vue.js
如何优化vue打包文件过大
Apr 13 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小技巧之过滤ascii控制字符
2014/05/14 PHP
PHP学习笔记(一) 简单了解PHP
2014/08/04 PHP
php生成图片缩略图的方法
2015/04/07 PHP
大家须知简单的php性能优化注意点
2016/01/04 PHP
基于jQuery的message插件实现右下角弹出消息框
2011/01/11 Javascript
nodejs入门详解(多篇文章结合)
2012/03/07 NodeJs
三种方式获取XMLHttpRequest对象
2014/04/21 Javascript
jQuery使用hide方法隐藏页面上指定元素的方法
2015/03/30 Javascript
JavaScript ParseFloat()方法
2015/12/18 Javascript
jQuery简单实现点击文本框复制内容到剪贴板上的方法
2016/08/01 Javascript
微信小程序 教程之模板
2016/10/18 Javascript
BootStrap实现轮播图效果(收藏)
2016/12/30 Javascript
nodejs搭建本地http服务器教程
2017/03/13 NodeJs
Bootstrap DateTime Picker日历控件简单应用
2017/03/25 Javascript
Angular将填入表单的数据渲染到表格的方法
2017/09/22 Javascript
基于JavaScript+HTML5 实现打地鼠小游戏逻辑流程图文详解(附完整代码)
2017/11/02 Javascript
layui实现二维码弹窗、并下载到本地的方法
2019/09/25 Javascript
[01:06:30]DOTA2-DPC中国联赛定级赛 Phoenix vs DLG BO3第二场 1月9日
2021/03/11 DOTA
python画图--输出指定像素点的颜色值方法
2019/07/03 Python
使用python 对验证码图片进行降噪处理
2019/12/18 Python
Flask-SocketIO服务端安装及使用代码示例
2020/11/26 Python
科尔士百货公司官网:Kohl’s
2016/07/11 全球购物
德国领先的大尺码和超大尺码男装在线零售商:Bigtex
2019/06/22 全球购物
俄罗斯建筑和装饰材料在线商店:Stroilandia
2020/07/25 全球购物
大学生思想汇报范文
2013/12/31 职场文书
酒店中秋节促销方案
2014/01/30 职场文书
合伙经营协议书
2014/04/18 职场文书
经营管理策划方案
2014/05/22 职场文书
公司股份转让协议书范本
2015/01/28 职场文书
工程服务质量承诺书
2015/04/29 职场文书
学习十八大的感悟
2015/08/11 职场文书
七年级写作指导之游记作文
2019/10/07 职场文书
redis数据结构之压缩列表
2022/03/21 Redis
Python中Schedule模块使用详解 周期任务神器
2022/04/19 Python
MySql如何将查询的出来的字段进行转换
2022/06/14 MySQL
mysql查看表结构的三种方法总结
2022/07/07 MySQL