主动手动控制el-popper的显示和隐藏
element-ui官方示例
项目里的需求
两个关联处的代码结构
实现思路
通过1处的点击,来控制右下角的铃铛处显示popper弹出框 , 网上搜寻资料查询到 ,想手动实现主动控制它的显示和隐藏, 组件上挂载的有方法 doShow()和doClose()
于是在popper弹出框上写了一个ref节点 ,
在1中通过this找到这个节点去调取节点上挂载的方法 ,就可以实现主动调取了 , 但是当我找到这个节点的时候 , 调取this.$refs.bottomElPopover.doShow()却丝毫不起作用!!!
最终去请教了项目里的大佬 , 翻看源码
看到这里就不难发现 , popper弹出框以组件的形式加载到项目里面 , 应用的方式是trigger有四个属性去调取方法 , 分别是[‘click’, ‘focus’, ‘hover’, ‘manual’] ,然后继续往下看
其实到这一步已经很明显了 , popper由四种形式去调取方法实现弹出框 , 都是在控制showPopper这个属性的false或者是true , 看到这那就有实现思路了
实现结果
示例
1中代码 (只要找到节点即可, 示例仅为本人本项目代码层级)
//打开右下角弹窗messageDialog() {this.$parent.$parent.$children[4].$refs.bottomElPopover.doShow();//第一种this.$parent.$parent.$children[4].$refs.bottomElPopover.doToggle();//第二种},
2中代码
trigger定义为manual
细说
一 , 单纯的在一个元素上trigger定义为click ,调用popper的时候,鼠标点击空白区域 会关闭弹出框
二 , 如若实现类似本文当中 , 在不同地方调取popper ,需要ref标识节点名称 , 找到节点名称, 来调取方法doShow()显示和doClose()关闭 , 还有doToggle(),联想一下JQ的那个显示和隐藏
三 , 1中若使用 this.parent.parent.parent.parent.parent.parent.children[4].$refs.bottomElPopover.doShow();//第一种 , 2中trigger为click视觉上是调取不起来popper弹出框的 , 但是代码逻辑上讲 , 实际上是调取起来了 ,因为方法里
doShow(){
this.showPopper = true;
}
而源码中则又把this.showPopper = false; 等于打开的瞬间又关闭了四 , 1中若使用this.parent.parent.parent.parent.children[4].children[4].children[4].refs.bottomElPopover.doToggle();//第二种 ,2中trigger为manual ,可点击打开, 再点击关闭的效果 ,总之其他效果可自行尝试一下
效果图
如果帮助到你了 , 希望一键三连
主动手动控制el-popper的显示和隐藏相关推荐
- el-date-picker手动控制时间选择器的显示和隐藏
一.利用官方给定的事件来触发 二.实现基本代码 <!-- --> <template><div><el-date-picker ref="time& ...
- ElementUI手动控制popover弹层的显示与隐藏
是时候表演真正的技术了 网上找了一堆都是没用的....搜的第一个是啥也没说 手动控制el-popover弹窗的显示与隐藏其实很简单,el-popover层绑定一个v-model的值为true或者fal ...
- Android软键盘的显示与隐藏
本文仅是对原创文章重新进行或多或少的代码测试,权当记录并加深印象 再次感谢开发者社区的分享 一:简述 点击文本框EditText,系统会自动弹出软键盘(其本质是一个Dialog),这必然会引起当前Ac ...
- [element-ui] 手动控制 popover 弹层的显示与隐藏
ElementUI并没有给我们明确控制popover弹层显示与关闭状态的方法,但是通过ref获取元素之后发现,元素上面已经内置关闭和打开的方法 <el-popover ref="pop ...
- android 隐藏键盘时ui延迟恢复,android 软键盘的显示与隐藏问题的研究
在android中,常常会和输入法的软件键盘交互.在Manifest文件中,系统给activity的一个属性-windowSoftInputMode来控制输入法的显示方式. 该属性提供了Activit ...
- html 点击隐藏特效代码,vueJS简单的点击显示与隐藏的效果(实现代码)
下面小编就为大家带来一篇vueJS简单的点击显示与隐藏的效果[实现代码].小编觉得挺不错的,现在分享给大家,一起跟随小编过来看看吧 目前前端框架太多,接触过angular.ember,现在开始倒腾vu ...
- 使用v-show v-if 设置元素显示和隐藏
一丶 一般情况我们可以设置元素的display属性来控制元素显示和隐藏 display: none; //元素不会显示 display: block; //显示为块级元素,元素后面带有换行符 dis ...
- Android 输入法框架 (2)- 输入法显示和隐藏
通常显示或者隐藏输入法有以下三个场景 当一个窗口焦点改变的时候,会根据Window属性控制输入法的显示 App主动调用imm::showSoftInput或者imm::hideSoftinputFro ...
- 密码的显示与隐藏php,el-input 标签中密码的显示和隐藏功能的实例代码
效果展示: 密码隐藏: 密码显示: 代码展示: 一:标签代码 二: var app = new Vue({ el:"#app", data:{ users:[], total:10 ...
最新文章
- HTTP报文(待整理)
- Guava中针对集合的 filter和过滤功能
- 免费实现服务器登录手机短信通知
- 蓝桥杯java a组_蓝桥杯十一届JavaA组-C++解题
- Java中的Unsafe
- 最有创意的万圣节借势海报都在这里
- 哪里的http和socks5代理ip稳定速度快
- 【元胞自动机】基于matlab元胞自动机单车道交通流(时空图)【含Matlab源码 1681期】
- html横向滚动字幕代码,js文字横向滚动特效
- CSPs-2020 游记
- 怎么用计算机弹春天在哪里,春天在哪里
- H3C交换机如何进行批量端口配置
- Dynamics 365 设置SMTP邮箱配置时凭据为灰色无法编辑的解决方法
- 国际清算银行成员发布央行数字货币分析报告
- 获得拼多多商品详情(商品主图、sku)
- Android 智能手机开发概述
- 网页采集工具-免费网页采集工具大全
- 自学UI设计看什么书好?
- python3爬虫爬取百度贴吧下载图片
- [工业相机] 分辨率、精度和公差之间的关系