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中使用Echarts可视化库的完整步骤记录
Nov 18 Vue.js
在Vue中使用mockjs代码实例
Nov 25 Vue.js
Vue router安装及使用方法解析
Dec 02 Vue.js
Vue如何跨组件传递Slot的实现
Dec 14 Vue.js
如何在vue中使用video.js播放m3u8格式的视频
Feb 01 Vue.js
深入理解Vue的数据响应式
May 15 Vue.js
详解Vue的sync修饰符
May 15 Vue.js
vue3使用vue-router的完整步骤记录
Jun 20 Vue.js
深入讲解Vue中父子组件通信与事件触发
Mar 22 Vue.js
vue的项目如何打包上线
Apr 13 Vue.js
vue3种table表格选项个数的控制方法
Apr 14 Vue.js
Vue操作Storage本地化存储
Apr 29 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/11/25 PHP
Laravel框架表单验证操作实例分析
2019/09/30 PHP
PHP实现单例模式建立数据库连接的方法分析
2020/02/11 PHP
window.name代替cookie的实现代码
2010/11/28 Javascript
jQuery 源码分析笔记(6) jQuery.data
2011/06/08 Javascript
jQuery中clearQueue()方法用法实例
2014/12/29 Javascript
javascript结合CSS实现苹果开关按钮特效
2015/04/07 Javascript
JS动态添加iframe的代码
2015/09/14 Javascript
jQuery实现切换页面过渡动画效果
2015/10/29 Javascript
Bootstrap3 input输入框插入glyphicon图标的方法
2016/05/16 Javascript
JS生成一维码(条形码)功能示例
2017/01/19 Javascript
vue中计算属性(computed)、methods和watched之间的区别
2017/07/27 Javascript
浅谈jquery中ajax跨域提交的时候会有2次请求的问题
2017/11/10 jQuery
nodejs 生成和导出 word的实例代码
2018/07/31 NodeJs
sortable+element 实现表格行拖拽的方法示例
2019/06/07 Javascript
Element InfiniteScroll无限滚动的具体使用方法
2020/07/27 Javascript
python正则表达式之作业计算器
2016/03/18 Python
Python语言生成水仙花数代码示例
2017/12/18 Python
Python装饰器(decorator)定义与用法详解
2018/02/09 Python
Python实现输出某区间范围内全部素数的方法
2018/05/02 Python
Python实现字典(dict)的迭代操作示例
2018/06/05 Python
python-tkinter之按钮的使用,开关方法
2019/06/11 Python
利用pandas合并多个excel的方法示例
2019/10/10 Python
浅析Python+OpenCV使用摄像头追踪人脸面部血液变化实现脉搏评估
2019/10/17 Python
python 变量初始化空列表的例子
2019/11/28 Python
通过Python实现一个简单的html页面
2020/05/16 Python
pandas将list数据拆分成行或列的实现
2020/12/13 Python
python中numpy.empty()函数实例讲解
2021/02/05 Python
荷兰优雅女装网上商店:Heine
2016/11/14 全球购物
全球最受追捧的运动服品牌领先数字目的地:Stylerunner
2020/11/25 全球购物
后进基层党组织整改方案
2014/10/25 职场文书
升学宴学生答谢词
2015/01/05 职场文书
2014年度个人总结范文
2015/03/09 职场文书
诚信考试主题班会
2015/08/17 职场文书
go语言求任意类型切片的长度操作
2021/04/26 Golang
详解SQL报错盲注
2022/07/23 SQL Server