Vue.js中Bootstrap模态框内Google Maps自动补全二级模态框失效问题

我之前也碰到过一模一样的坑！二级Bootstrap模态框的层级逻辑加上Google Places Autocomplete的默认渲染机制，确实会让常规的z-index调整完全失效，尤其是在Vue项目里，DOM动态更新还会添额外的复杂度。下面是我亲测有效的几个解决方案：

方案1：手动将自动补全面板挂载到二级模态框内部 #

Google自动补全默认会把下拉面板挂载到<body>标签下，这就导致它的层级是相对于整个页面的——哪怕你给面板调了很高的z-index，也会被二级模态框（本身z-index就比一级框高）盖住。我们可以通过Autocomplete的API指定面板的父元素，把它“放进”二级模态框里：

// 假设你的input元素通过ref="autocompleteInput"绑定，二级模态框ref是"secondModal"
mounted() {
  const inputEl = this.$refs.autocompleteInput;
  // 初始化自动补全
  const autocomplete = new google.maps.places.Autocomplete(inputEl, {
    types: ['geocode'], // 可根据需求添加其他配置
  });

  // 关键操作：把自动补全面板挂载到二级模态框内部
  const panel = autocomplete.getPlacePredictionsPanel();
  this.$refs.secondModal.appendChild(panel);
}

这样面板就成为二级模态框的子元素，会继承模态框的层级，自然不会被遮挡。

方案2：利用Vue的nextTick确保DOM渲染完成后初始化自动补全 #

二级模态框是动态显示的，如果你在模态框还没完全渲染到DOM中时就初始化了自动补全，很可能导致面板挂载逻辑出错。用nextTick等DOM更新完成后再执行初始化：

openSecondModal() {
  this.showSecondModal = true;
  this.$nextTick(() => {
    // 等模态框渲染完成后再初始化自动补全
    const inputEl = this.$refs.secondModalInput;
    this.autocompleteInstance = new google.maps.places.Autocomplete(inputEl);
  });
}

方案3：强制提升自动补全面板的z-index（兜底方案） #

如果上面两个方案都不适用，你可以直接给自动补全的面板加优先级更高的CSS样式：

/* 给自动补全面板强制设置超高z-index */
.pac-container {
  z-index: 99999 !important;
}

不过要注意，这个全局样式可能影响其他页面的自动补全组件，最好给二级模态框加个专属类名，做范围限制：

.second-modal .pac-container {
  z-index: 99999 !important;
}

最后提个Vue项目里的小细节：记得在组件销毁时清理自动补全实例，避免内存泄漏：

beforeUnmount() {
  if (this.autocompleteInstance) {
    google.maps.event.clearInstanceListeners(this.autocompleteInstance);
    this.autocompleteInstance = null;
  }
}

内容的提问来源于stack exchange，提问作者IgorM