ant-design1.x版本popover定位错误问题

背景：

ant-design 1.7.2版本

vue 2.5.2版本

问题：

在1.x版本中，popover插入的节点默认是body，会导致select、date-picker之类的组件会出现popover定位错误的问题，如下图：

思路：

在官方文档中可以发现，这些组件都是有暴露配置属性的，只不过用的属性可能不是同一个。

那么这里处理的思路就有两种了：

1. 将ant-design的版本进行升级。
2. 给每一个组件添加属性配置。

• 这里先说第一种方式，尝试将ant-design升级到2.x版本，虽然popover默认还是插入到body中，但是定位没有出现错乱的问题，这似乎是能解决当前问题。考虑到大版本的升级，势必会有一些api或者属性会被改动或者废弃，简单问一下gpt，果然不出所料。因此这个方式走不通了。
• 再说第二种方式，由于项目是一个老项目了，总不可能一个一个组件地去添加配置属性，那得干到啥时候😭。然后就想有没有通用的方式，能一劳永逸。网上搜索了一下，并没有找到解决方式，估计也是版本太老的原因了。这时候又问一下万能的gpt，没想到还真能提出一些见解，最后结合自己的想法，得出了以下解决方式：

// 在项目中新建一个js文件（overrideGetPopupContainer.js）
export default {
  install(Vue) {
    // 列出所有需要覆盖的组件名称
    const componentsToOverride = ['Select', 'Dropdown', 'Tooltip', 'Popover', 'DatePicker', 'TimePicker', 'AutoComplete', 'Cascader', 'TreeSelect', 'Upload', 'Mentions', 'RangePicker'];

    componentsToOverride.forEach(componentName => {
      // 获取组件构造器
      const component = Vue.component(`A${componentName}`);
      
      if (component) {
        // 覆盖组件的默认属性
        const originalProps = component.options.props;
        component.options.props = {
          ...originalProps,
          // 由于配置属性不同，需要两个都写上，会造成上述组件会添加一个没有作用的属性
          getPopupContainer: {
            type: Function,
            default: triggerNode => triggerNode.parentNode
          },
          getCalendarContainer:{
            type: Function,
            default: triggerNode => triggerNode.parentNode
          },
        };
      }
    });
  }
};


// main.js 引入上述js文件
import overrideGetPopupContainer from 'xxx/overrideGetPopupContainer.js'
Vue.use(overrideGetPopupContainer);

至此，就全局改了默认配置，达到了我们想要的效果✌🏻