谷歌在模态上放置自动完成自动完成隐藏在模态后面

问题描述

我正在使用名为“vue-google-autocomplete”的外部组件。在此处查看组件的 github 页面：

https://github.com/olefirenko/vue-google-autocomplete

我想在模态输入上实现自动完成。这是模态的代码

    <b-modal
  id="create-new-modal"
  @ok="handleOk"
  @show="resetModal"
  @hidden="resetModal"
  title="Skapa fraktion titel"
>
  <!-- :title="languageArray.create_fraction_modal_title[languageCode]" -->
  <b-form ref="form" @submit.prevent="onSubmitCreate">
    <!-- :label="languageArray.fraction_input_label[languageCode]" -->
    <b-form-group
      label="fractions address input lbl"
      label-for="fraction-address"
      invalid-feedback="invalid feedback"
    >
      <vue-google-autocomplete
        id="fraction-address"
        class="pac-container"
        classname="form-control"
        placeholder="Start typinggg"
        v-on:placechanged="places_changed"
        :fields="['geometry','formatted_address','address_components']"
      >
      </vue-google-autocomplete>
    </b-form-group>
  </b-form>
</b-modal>

所以当我第一次执行这段代码时，自动完成隐藏在模态后面。 Thr 自动完成是由模态上的输入触发的，但显示在第一页上并且没有集中在模态上。所以我用了这个css技巧

.pac-container {
z-index: 10000;
}

然后自动完成显示在模态上，但它带来了另一个问题。现在孔输入在模态上不合适。见下图：

我该如何解决这个问题？

这里是 f12 工具的样式

       element.style {
    padding-right: 15px;
}
body.m-content--skin-light2 {
    background-color: #f2f3f8;
}
.modal-open {
    overflow: auto !important;
    padding: 0 !important;
}
.modal-open {
    overflow: hidden;
}
body,.m-smooth-scroll {
    scroll-behavior: smooth;
}
body {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}
html,body {
    height: 100%;
    margin: 0px;
    padding: 0px;
    font-size: 13px;
    font-weight: 300;
    font-family: Poppins;
    -ms-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
body {
    margin: 0;
    font-family: "Poppins";
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    text-align: left;
    background-color: #fff;
}
*,*::before,*::after {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
user agent stylesheet
body {
    display: block;
    margin: 8px;
}
:root {
    --blue: #007bff;
    --indigo: #6610f2;
    --purple: #6f42c1;
    --pink: #e83e8c;
    --red: #dc3545;
    --orange: #fd7e14;
    --yellow: #ffc107;
    --green: #28a745;
    --teal: #20c997;
    --cyan: #17a2b8;
    --white: #fff;
    --gray: #6c757d;
    --gray-dark: #343a40;
    --primary: #5867dd;
    --secondary: #ebedf2;
    --success: #34bfa3;
    --info: #36a3f7;
    --warning: #ffb822;
    --danger: #f4516c;
    --light: #f8f9fa;
    --dark: #343a40;
    --breakpoint-xs: 0;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    --font-family-sans-serif: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    --font-family-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
}
html {
    font-family: sans-serif;
    -moz-text-size-adjust: 100%;
    text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0,0);
    direction: ltr;
}
html {
    font-family: sans-serif;
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -ms-overflow-style: scrollbar;
    -webkit-tap-highlight-color: rgba(0,0);
}
*,*::after {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
*,*::befo ```

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）