主动手动控制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.$children[4].$refs.bottomElPopover.doShow();//第一种 , 2中trigger为click视觉上是调取不起来popper弹出框的 , 但是代码逻辑上讲 , 实际上是调取起来了 ,因为方法里
  doShow(){
  this.showPopper = true;
  }
  而源码中则又把this.showPopper = false; 等于打开的瞬间又关闭了

• 四 , 1中若使用this.$parent.$parent.$children[4].$refs.bottomElPopover.doToggle();//第二种 ,2中trigger为manual ,可点击打开, 再点击关闭的效果 ,总之其他效果可自行尝试一下

效果图

如果帮助到你了 , 希望一键三连