BootstrapVue две всплывающие подсказки, появляющиеся на одном элементе с разными целями? - PullRequest
Новая
       10

BootstrapVue две всплывающие подсказки, появляющиеся на одном элементе с разными целями?

0 голосов
/ 29 марта 2019

Я работаю в Vue с BootstrapVue, и обе нижние подсказки, которые я использую, отображаются на кнопке, на которую нацелена кнопка click to mask this value. Всплывающая подсказка, которая будет содержать SSN, также появляется только сверху кнопки, когда она должна быть только там, где находится диапазон.

Я не уверен, почему это происходит, поскольку идентификаторы разделены, и я предполагаю, что он просто поместит всплывающую подсказку SSN на промежуток, чтобы он там отображался.

Markup: 

<span class="app-titlebar__client-data-item non-draggable">
  <div v-if="!hideSsn"
    class="ssn-text"
    @mouseenter="checkDataItem($event, 'ssn')"
    @mouseleave="hideTooltips">
    <button class="adv-btn adv-btn--naked  app-titlebar__unmasked-btn"
      id="titlebar-ssn-eye-hide"
      @click="maskSsn(true)"
      @mouseenter="hoverSsnMask(true)"
      @mouseleave="hoverSsnMask(false)">
      <svg class="us-icon-svg us-icon-svg--inline us-icon-svg--xs disable-pointer"
        role="img"
        focusable="false">
        <use xlink:href="#adv-icons-svg_unmasked"></use>
      </svg>
    </button>
    <span id="titlebar-ssn">
      {{ssn}}
    </span>
  </div>

  <div v-else
    class="ssn-text">
    <button class="adv-btn adv-btn--naked  app-titlebar__mask-btn"
      id="titlebar-ssn-eye-show"
      @mouseenter="hoverSsnMask(true)"
      @mouseleave="hoverSsnMask(false)"
      @click="maskSsn(false)">
      <svg class="us-icon-svg us-icon-svg--inline us-icon-svg--xs disable-pointer"
        role="img"
        focusable="false">
        <use xlink:href="#adv-icons-svg_masked"></use>
      </svg>
    </button>
    {{ssnMasked}}
  </div>
</span>

Подсказки: 

  <b-tooltip v-if="clientInContext && ssn && hideSsn"
    target="titlebar-ssn-eye-show"
    :disabled.sync="disableSsnTooltip"
    :show.sync="showSsnTooltip"
    triggers="hover"
    placement="bottom">
    Click to temporarily display this value
  </b-tooltip>

  <b-tooltip v-if="clientInContext && ssn && !hideSsn"
    target="titlebar-ssn-eye-hide"
    :disabled.sync="disableSsnTooltip"
    :show.sync="showSsnTooltip"
    triggers="hover"
    placement="bottom">
    Click to mask this value
  </b-tooltip>

  <b-tooltip v-if="clientInContext && ssn && !hideSsn"
    target="titlebar-ssn"
    :disabled.sync="disableSsnTooltip"
    :show.sync="showSsnTooltip"
    triggers="hover"
    placement="bottom">
    {{ssn}}
  </b-tooltip>

1 Ответ

1 голос
/ 14 мая 2019

Поскольку вы используете v-if / v-else, убедитесь, что вы поместили уникальный key либо в оболочку для кнопок div, либо в button. Скорее всего, происходит то, что Vue повторно использует ту же ссылку на элемент и просто обновляет ее биты. b-tooltip кэширует ссылку на элемент, когда он смонтирован.

...