ElementUI中解决使用dropdown等弹窗时定位body而非template创建的dom节点
Posted 1024_Byte
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了ElementUI中解决使用dropdown等弹窗时定位body而非template创建的dom节点相关的知识,希望对你有一定的参考价值。
在使用element-ui
组件库的时候,其中有tooltip
和dropdown
组件,它们在显示弹出部分的内容时,实际上这部分内容是被放在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>
二、实现原理
通过阅读这两个组件的源代码可以发现它们都是minxin
了vue-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
里有很多组件都minxin
了vue-popper
,应该都可以使用类似的方法去将内容放在指定位置。下面简单罗列了那些组件使用了vue-popper
:
submenu、autocomplete-suggestions、cascader、picker-dropdown、picker、select-dropdown、filter-panel、popover。
以上是关于ElementUI中解决使用dropdown等弹窗时定位body而非template创建的dom节点的主要内容,如果未能解决你的问题,请参考以下文章
Vue使用directive指令实现Element中Dialog等弹框组件的移动与缩放