记录ant design vue库的drawer、select、message组件怎样自定义挂载点

1、drawer自定义挂载点的方法为

使用方法：

<div ref='container'>
	<a-drawer
	      class="model-service-add-omai-dialog"
	      :title="title"
	      :closable="true"
	      placement="right"
	      :visible="dialogVisible"
	      @close="handleClose"
	      :get-container="() => {return this.$refs.container}"
	    >
	</a-drawer>
</div>

// 或者
<div ref='container'>
	<a-drawer
	      class="model-service-add-omai-dialog"
	      :title="title"
	      :closable="true"
	      placement="right"
	      :visible="dialogVisible"
	      @close="handleClose"
	      :get-container="getContainer"
	    >
	</a-drawer>
</div>

methods: {
	getContainer() {
		return this.$refs["container"];
	}
}

2、select官网提供的挂载方法为

但是发现这样使用会报错，eslint报错，百度了很久找到个解决办法，如下

<a-select
     v-if="inputVisible"
     :open="openSelect"
     ref="input"
     v-model="tagIds"
     style="width: 130px;"
     mode="multiple"
     @blur="handleInputConfirm"
     @keyup.enter="handleInputConfirm"
     :getPopupContainer="triggerNode => {
     return triggerNode.parentNode || document.body;
     }"
   >
     <a-select-option v-for="itm of dwOptions" :key="itm.id + ''">
       {{ itm.name }}
     </a-select-option>
   </a-select>

3、message挂载点

只修改单个message的挂载点，可以使用官网提供的getContainer方法
如果想要全局修改挂载点，可以在app.vue中执行如下代码

this.$message.config({ getContainer: () => this.$refs.app})

4、应用ConfigProvider全局化配置实现全局的挂载点的重置

html部分

<a-config-provider :getPopupContainer="getPopupContainer">
      <div class="right">
        <router-view />
      </div>
    </a-config-provider>

js部分

methods: {
  getPopupContainer(el, dialogContext) {
    let className = el.className
    if (el&&className.indexOf('add-to-body') === -1) {
      return el.parentNode;
    } else {
      return document.body;
    }
  }
}
// 参考网址：https://2x.antdv.com/components/config-provider-cn