ElementUI中解决使用dropdown等弹窗时定位body而非template创建的dom节点

Posted 1024_Byte

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了ElementUI中解决使用dropdown等弹窗时定位body而非template创建的dom节点相关的知识,希望对你有一定的参考价值。

在使用element-ui组件库的时候,其中有tooltipdropdown组件,它们在显示弹出部分的内容时,实际上这部分内容是被放在body根节点下的。
而如果放在根节点有时候我们的某一些需求就无法得到实现,不得不将其放在我们指定的地方。

例如图例中dropdown出现不随div滚动条滚动的情况

一、解决办法

这里直接给出解决办法,先介绍tooltip组件,其实两者是差不多的、下面是方法:

1、解决tooltip

<template>
    <div>
        <el-tooltip
                placement="top"
                :append-to-body="false" <!-- 尤其重要参数 -->
                content="你好ToolTip"
                ref="mypop">  <!-- 为方便寻找,使用ref直接拿 -->
            <el-button>提示</el-button>
        </el-tooltip>
        <!-- 希望将tooltip的弹出部分内容的dom放在这里面 -->
        <div ref="here"></div>
    </div>
</template>
<script>
    export default 
        mounted() 
            // 在mounted的时候只需要使用这句话。
            this.$refs.here.appendChild(
                this.$refs.mypop.popperVM.$el
            )
        
    
</script>

效果如下:

可以看到,这里已经将提示出来的内容放到我们希望的节点里面了。
2、解决dropdown

<template>
    <div>
        <el-dropdown>
            <span class="el-dropdown-link">
                下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <!--同样是将append-to-body参数设置为false-->
            <el-dropdown-menu slot="dropdown" :append-to-body="false" ref="mydropd">
                <el-dropdown-item>黄金糕</el-dropdown-item>
                <el-dropdown-item>狮子头</el-dropdown-item>
                <el-dropdown-item>螺蛳粉</el-dropdown-item>
                <el-dropdown-item disabled>双皮奶</el-dropdown-item>
                <el-dropdown-item divided>蚵仔煎</el-dropdown-item>
            </el-dropdown-menu>
        </el-dropdown>
        <div ref="here"></div>
    </div>
</template>
<script>
    export default 
        mounted() 
            this.$refs.here.appendChild(
                this.$refs.mydropd.popperElm
            )
        
    
</script>

二、实现原理

通过阅读这两个组件的源代码可以发现它们都是minxinvue-popper这个公共类,使他们都具备这样的弹出式窗口的功能。部分关键源代码如下:

// dropdown-menu.vue 的部分源码
import Popper from 'element-ui/src/utils/vue-popper';
export default 
  name: 'ElDropdownMenu',
  componentName: 'ElDropdownMenu',
  mixins: [Popper],  // <=== 这里
  props: 
    visibleArrow: 
      type: Boolean,
      ...

vue-popper组件提供了appendToBody参数,它默认值是true,也就是默认就会把弹出的内容添加到body根节点。部分重要代码入下:

// vue-popper.js 的部分代码
  methods: 
    createPopper() 
      ...
      if (!popper || !reference) return;
      if (this.visibleArrow) this.appendArrow(popper);
      // 这里可以看到,根据参数来决定是否要把弹出的内容显示添加到body根节点。
      if (this.appendToBody) document.body.appendChild(this.popperElm);
      ...

一旦我们将appendToBody参数设置为了false,那弹出的内容根本就不会出现在界面上了,所以我们需要自己在mounted生命周期函数里手动将对应的弹出内容添加到界面上,经过简单的代码阅读,不难发现:

对于tooltip组件,内部的popperVM.$el就是弹出内容。
对于dropdown组件,内部的popperElm就是弹出内容。
只需要将它们添加到我们自己想要的地方即可。

element-ui里有很多组件都minxinvue-popper,应该都可以使用类似的方法去将内容放在指定位置。下面简单罗列了那些组件使用了vue-popper

submenu、autocomplete-suggestions、cascader、picker-dropdown、picker、select-dropdown、filter-panel、popover。

以上是关于ElementUI中解决使用dropdown等弹窗时定位body而非template创建的dom节点的主要内容,如果未能解决你的问题,请参考以下文章

WPF中Popup等弹窗的位置不对(偏左或者偏右)

修改elementUi自带组件样式不生效问题及解决

Vue使用directive指令实现Element中Dialog等弹框组件的移动与缩放

vue+elementui dropdown 下拉菜单绑定方法

VUE中使用ElementUi的Message弹窗提示

VUE中使用ElementUi的Message弹窗提示