vue使用element-ui,elementui弹窗组件
弹窗效果是我们日常开发中经常遇到的一个功能，下面这篇文章主要给大家介绍了关于某视频剪辑软件元素用户界面实现概要小弹窗的相关资料，需要的朋友可以参考下
场景：一个巡检单据有n个巡检明细，一个巡检明细有n个巡检项目。
实现效果：当鼠标移到明细行的概要图标时显示当前行的巡检项目卡片弹窗，移出弹窗时关闭弹窗
巡检单据详情
鼠标移到项目概要图标
效果实现
数据里面声明的变量
//概要弹窗
outlineDialog: false，
//当前行标准概要
standSummary: []，
//概要弹窗位置控制
大纲卡：{
佩吉：空，
pageX: null，
显示："无"
}
1、弹窗代码
大纲对话框：默认假的，概要弹窗显示标志
大纲样式：弹窗的动态样式设置，在计算进行监控和进行双向数据绑定展示
离开：鼠标离开弹窗卡片的事件
！-项目概要-
div class= summary-div v-show= outline dialog ref= box-card div :style= outline style @ mouseleave= leave
div class=摘要标题项目概要/div
ul class=summary-ul
摘要-李标准名称/spanspan是否必填/spanspan是否显示/span/li
key= index class= summary-Li span { { item。inspectdetailname } }/span span { { item。需要吗？是:否}}/span span{{item.isDisplay？是:否}}/span /li
/ul
/div
2、弹窗样式代码
样式lang=scss
#方框-cardiv {
位置：绝对；
}。汇总-部门{
边框：纯色1px # eee
背景色：# fff
边框-半径：4px
方框阴影：0 2px 12px 0 rgba(0，0，0，1);
填充：10px 10px 0 10px
宽度：300像素
位置：绝对；
字体大小：13px
}。摘要-ul {
列表样式：无；
左填充：0;
max-height:350 px；
溢出-x:隐藏；
溢出-y:自动；
}。摘要-李{
边距：10px 10px 15px 10px
宽度：250像素
文本溢出：省略号；
溢出：隐藏；
/*空白：nowrap*/
显示器：flex
跨度{
边距：自动；
宽度：55像素
}
}。总结-李：第一个孩子span:不是(:第一个孩子){
左边距：40px
}。总结-李：不是(:第一个孩子)跨度：第n个孩子(1) {
宽度：90px
}。总结-李：不是(:第一个孩子)跨度：第n个孩子(2) {
宽度：50px
左边距：45像素
}。总结-李：不是(:第一个孩子)跨度：第n个孩子(3) {
左边距：60px
}。摘要-标题{
颜色：# cccccc
左边距：10px
}
/风格
3、明细表格的项目概要列代码
盘点总结：鼠标移到概要图标的事件
埃尔-表格-列标签=项目概要align=center width=500
模板slot=header
跨度项目概要/span
span class=垂直/span
/模板
模板槽-范围="范围"
div class= col-summary-div
span class= col-summary-format span { { scope。划。第一个列表项} }/span/span
spannbsp .等nbsp{ { scope。划。equispectplanitemlist。length } } nbsp .项nbsp/
I= El-icon-arrow-down @ mouse enter= checkStandSunmmary(scope .行)/I
/div
/模板
/El-表格-列
4、外形风格弹窗卡片动态样式控制
明细在页面底端的时候卡片照旧展示会被盖掉一部分，需要根据概要图标的位置动态计算卡片打开的位置，如果在底端就把卡片往上边打开
计算值：{
outlineStyle() {
设h=45 *这个。立场总结。长度；
让浏览器=文档。身体。客户身高-50；
设pageY=这个。大纲卡。佩吉-50；
设pageX=this。大纲卡。pageX-280；
如果(页面浏览器){
return ` left:$ { pageX } px；top:$ {(pageY-h)} px；位置：绝对；显示：$ { this。大纲卡。display } `；
}否则{
return ` left:$ { pageX } px；top:$ {(pageY-60)} px；位置：绝对；display:$ { this . outline card . display } `；
}
}
},
5.离开鼠标的事件离开弹出卡。
当鼠标移出卡片时，将卡片的显示样式设置为none，将v-show设置为false，弹出窗口将不显示。
/**
*鼠标离开时的标准摘要
*/
leave() {
this . outline card . display= none ；
this.outlineDialog=false
},
6.检查台摘要鼠标移动到摘要图标。
打开弹出卡片
获取当前行的检验项目集合。
获取当前鼠标在浏览器中的x轴和y轴位置。
将动态弹出卡片样式设置为空(除了写无为不显示外，显示)
/**
*当前生产线标准总结
*/
验货台汇总(世界其他地区){
this.outlineDialog=true
this . stand summary=row . equispectplanitemlist；
this . outline card . pakey=window . event . clienty；
this . outline card . pagex=window . event . clientx；
this . outline card . display=null；
},
总结
这就是这篇关于Vue元素UI popup的实现概要的文章。有关Vue元素UI弹出窗口的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。