一. 什么是Popover
点击一个按钮,在按钮上边出现一个div。或者鼠标悬浮,或者鼠标移动。就会出现。 它的结构很简单,一个Popover组件,包括一个触发的按钮,和要显示的文本div。比如这样
<template>
<div class="popover" @click.stop="x">
<div class="content-wrapper" v-if="visible" @click.stop>
<slot name="content"></slot>
</div>
<slot></slot>
</div>
</template>
通过一个data控制文字是否出现。默认插槽用来放按钮,具名插槽content用来放内容。
问题:
如果用户在使用这个组件的时候,把这个组件放在了一个overflow:hidden
的元素里边,那弹出的这个文本框就有可能因为溢出而被隐藏。所以不能把文本内容和button放在同一级下,正确做法是把文本放在外边,让它没有可能被隐藏。
把文本框放在最外边,也就是body里是合适的。做body的儿子。因为总不会超出body吧。
可是考虑到用户的使用和样式的书写,content的代码还是要写在组件模板里。那怎么让它出现在body里呢?可以使用原生DOM操作,在content出现后,马上把它appendChild到body的最后。让它在结构上处于Body的最后,但是样式上还是出现在按钮上方。