el-popover怎么挂载在父元素,而不是body上;以及设置样式问题

2,423 阅读1分钟

通过为el-popover添加配置项,将其挂载到父级上面:

      <el-popover
        :append-to-body="false"
        :popper-options="{
	boundariesElement: 'body',
	gpuAcceleration: true,
	positionFixed: true,
	preventOverflow: true}">
      </el-popover>

设置自定义样式:如果我们使用了scoped并需要添加样式,只需要在组件内添加样式即可,不需要到全局添加。

      <el-popover
        popper-class="my-popover"
        :append-to-body="false"
        :popper-options="{
	boundariesElement: 'body',
	gpuAcceleration: true,
	positionFixed: true,
	preventOverflow: true}"
        >
      </el-popover>
/deep/.my-popover {...}

截图看效果:

image.png

注意事项: 因为el-popover本身自带一个绝对定位,需要给父组件添加相对定位,否则可能导致定位错乱。