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

wkArtist

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的节点(为突出重点,范例中一些于此无关的代码就省略了)

<div class="wrap" id="wrap">
    <el-cascader 
        id="broadcast_type" 
        @visible-change="visibleChange"
        popper-class="floating-layer"//给浮层设置类名 
        :props="{ expandTrigger: 'hover' }" 
        ......//省略
    ></el-cascader>
  </div>
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组件似乎没有这个问题,也没有去深究,下面是简化代码。

<template>
  <div class="wrap" id="wrap">
    <el-form-item label="开始时间">
        <el-col :span="11">
            <el-date-picker 
                id="broadcast_startdate" 
                @focus="startDateFocus" 
                @blur="startdateBlur" 
                popper-class="broadcast-start-date-drop" 
                type="date" placeholder="选择日期" 
                v-model="form.startDate" 
                style="width: 100%;"
            ></el-date-picker>
        </el-col>
        <el-col class="line" :span="2">-</el-col>
        <el-col :span="11">
            <el-time-picker 
                id="broadcast_starttime"
                @focus="startTimeFocus" 
                @blur="startTimeBlur" 
                popper-class="broadcast-start-time-drop" 
                placeholder="选择时间" 
                arrow-control 
                v-model="form.startTime" 
                style="width: 100%;"
            ></el-time-picker>
        </el-col>
    </el-form-item>
  </div>
</template>

<script>
import $ from 'jquery'
export default {
    data() {
        return {
            startDateTimer: null,
            startDateFlag: true,
            startTimeTimer: null,
            startTimeFlag: true,
            ......//省略
        }
    },
    methods: {
        startDateFocus() {
            if (this.startDateFlag) {
                this.startDateFlag = false
                this.startDateTimer = setInterval(() => {
                    let startDateDrop = document.getElementsByClassName('broadcast-start-date-drop')[0];
                    if (startDateDrop && startDateDrop.style.display==="") {
                        document.getElementById('wrap').appendChild(startDateDrop)
                        $(document.getElementById('broadcast_startdate')).trigger('click')
                        $(document.getElementById('broadcast_startdate')).trigger('click')
                        startDateDrop.style.position = "fixed"//将定位改为fiexd定位
                        clearInterval(this.startDateTimer)
                        this.startDateTimer = null
                    }
                },100)
            }
        },
        startdateBlur() {
            this.startDateFlag = true
            clearInterval(this.startDateTimer)
            this.startDateTimer = null
        },
        startTimeFocus() {
            if (this.startTimeFlag) {
                this.startTimeFlag = false
                this.startTimeTimer = setInterval(() => {
                    let startTimeDrop = document.getElementsByClassName('broadcast-start-time-drop')[0];
                    if (startTimeDrop && startTimeDrop.style.display==="") {
                        document.getElementById('wrap').appendChild(startTimeDrop)
                        $(document.getElementById('broadcast_starttime')).trigger('click')
                        $(document.getElementById('broadcast_starttime')).trigger('click')
                        startTimeDrop.style.position = "fixed"
                        clearInterval(this.startTimeTimer)
                        this.startTimeTimer = null
                    }
                },100)
            }
        },
        startTimeBlur() {
            this.startTimeFlag = true
            clearInterval(this.startTimeTimer)
            this.startTimeTimer = null
        },

    }
}
</script>

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

阅读 2k
6 声望
3 粉丝
0 条评论
你知道吗?

6 声望
3 粉丝
文章目录
宣传栏