popper-append-to-body属性

`popper-append-to-body`是Vue.js中的一个指令，用于将弹出框（popover或tooltip）插入到body元素中，而不是插入到父元素中。这个指令通常用于解决由于父元素的样式或定位属性导致弹出框无法正确显示的问题。

当我们需要在Vue.js中使用某些弹出框组件时，如果父元素的样式或定位属性会影响弹出框的显示，我们可以使用`popper-append-to-body`指令将弹出框插入到body元素中，这样就可以避免这些问题。

使用方式如下：

<template>
  <div>
    <button v-popover:popover1>Click me</button>
    <popover-content ref="popover1" v-popper:popper1="{
      placement: 'bottom',
      modifiers: {
        preventOverflow: { enabled: false }
      }
    }" popper-append-to-body>
      <h3>Popover title</h3>
      <p>Popover content</p>
    </popover-content>
  </div>
</template>

在上面的示例中，我们使用了`popper-append-to-body`指令将弹出框插入到body元素中。这样，弹出框就可以忽略父元素的样式和定位属性，正确显示在页面中。

相关问题

vue全局添加popper-append-to-body属性

可以通过在 main.js 中添加以下代码实现：

import Vue from 'vue'
import vPopper from 'vue-popperjs'
Vue.directive('popper', {
  inserted (el, binding, vnode) {
    vnode.context[binding.expression] = binding.value || {}
    el.setAttribute('popper', '')
    el.dataset.popper = ''
    el.classList.add('popper')
  }
})
Vue.use(vPopper)

然后，在需要使用 popper 的地方，添加 v-popper 指令即可，例如：

<div v-popper="{ placement: 'bottom-end', modifiers: { preventOverflow: { boundariesElement: 'viewport' } } }">
  // content here
</div>

参考链接：https://github.com/RobinCK/vue-popper/blob/master/README-zh_CN.md

vue element-ui 全局添加popper-append-to-body属性

回答：您可以使用Vue.mixin方法全局添加popper-append-to-body属性，具体方法如下：
1. 在项目中新建一个mixin.js文件
2. 在mixin.js文件中编写如下代码：
import Vue from 'vue';
import ElementUI from 'element-ui';

Vue.mixin({
mounted() {
ElementUI.LoadingBar.config({
color: '#5cb85c',
failedColor: '#f0ad4e',
});
}
});
3. 在main.js文件中引入mixin.js文件：
import './mixin.js';
4. 然后在你的popper组件上加上popper-append-to-body属性即可，如下所示：
<el-popover trigger="click" popper-append-to-body>A popover</el-popover>