改变ElementUI特定组件弹出浮层的默认父节点

ElementUI中的Cascader级联选择器或者TimePicker,DatePicker选择器点击后的浮层都是直接插入body标签下的,elementUI内部会自动计算一个合适的点将浮层绝对定位上去。

但是最近公司在使用ElementUI框架的项目中,因为一个特殊需求不能让这类组件的浮层脱离.vue的功能组件,所以浮层默认插入body下的方式肯定是不满足需求的。

ELementUI中的Select选择器组件提供了一个属性可以控制下拉菜单是否插入到body中:
image.png
所以对于select只需要将该属性设置为false即可,但对于Cascader,TimePicker,DatePicker这些组件是没有这个属性的,对于这个问题我思考许久,耗费九成功力,想出了以下这种方式去模拟实现。

将Cascader组件浮层的父节点设置id为wrap的节点

  • 利用popper-class属性给浮层定义一个类名,后面要能拿到它。给Cascader组件定义一个id,后要用到;
  • 监听Cascader组件自带的visible-change事件,当浮层弹出时开启一个定时器timer去寻找浮层dom节点;
  • 找到浮层节点后将浮层插入指定节点下,这样一来body下的浮层节点就相当于被剪贴到指定节点下了;
  • 此时的Cascader组件还是弹出的状态,但是原本检测到的浮层被剪切走了,被剪贴到的新地址又没被检测到,所以要关闭再打开,相当于重启一下。因为这里需要手动触发点击事件,而Cascader组件的点击事件是定义在elementUI内部的,用原生不好触发,所以这里我引入了jquery,用它实例上的trigger方法去触发click事件;
  • 在这个过程中需要加一个锁flag,不让手动触发浮层的时候再进入定时器。

范例:将Cascader组件浮层的父节点设置id为wrap的节点(为突出重点,范例中一些于此无关的代码就省略了)

import $ from 'jquery'
export default {
    data() {
        return {
            timer: null,
            flag: true,//锁,控制不让手动触发浮层的时候再进入定时器
            ......//省略
        }
    },
    methods: {
        visibleChange(e) {
            if (e&&this.flag) {
                this.flag = false
                this.timer = setInterval(() => {
                    let floatingLayer = document.getElementsByClassName('floating-layer')[0];
                    if (floatingLayer&&floatingLayer.style.display==="") {//拿到浮层dom节点,但是不能是隐藏状态
                        document.getElementById('wrap').appendChild(floatingLayer)//将浮层插入wrap节点下
                        $(document.getElementById('el_cascader')).trigger('click')//第一次收起浮层
                        $(document.getElementById('el_cascader')).trigger('click')//第二次打开浮层
                        clearInterval(this.timer)
                        this.timer = null
                    }
                },300)
            } else {
                this.flag = true
                clearInterval(this.timer)
                this.timer = null
            }
        },
    }
}

将TimePicker,DatePicker选择器组件浮层的父节点设置id为wrap的节点

如果是TimePicker,DatePicker选择器的话,因为没有类似于Cascader组件的visible-change事件,但是可以focus和blur事件去代替,不过思想都是相同的。
TimePicker,DatePicker选择器在浮层父节点变化之后定位的数值似乎是基于HTML的,所以在wrap下自然会有偏差,因此需要加一个改正数,或者直接将定位该为fixed定位。Cascader组件似乎没有这个问题,也没有去深究,下面是简化代码。



当前项目我就用到这几个组件,其它组件也不需要这样特殊处理,不过我觉得这个思想是可以行的通的,需要的小伙伴们可以自己搞一下。上面提到的有的内部原理都是我的猜测没有看源码具体论证,反正这种方式解决了我的问题,也不知道还有没有什么好的方法,有想法的同学们欢迎给我留言讨论。

你可能感兴趣的:(前端,element-ui,vue.js,jquery,javascript)