Как создать компонент Vue Tooltip, используя BootstrapVue tooltip - PullRequest
Новая
       174

Как создать компонент Vue Tooltip, используя BootstrapVue tooltip

0 голосов
/ 06 августа 2020

Я новичок в Vue, и я не использую Bootstrap часто, поэтому прошу прощения за мой новый ie вопрос, я пытаюсь создать компонент всплывающей подсказки Vue, я создал его для вести себя так, как я хотел, используя css, однако у меня возникли некоторые проблемы с доступностью, поэтому я решил использовать всплывающую подсказку BootstrapVue вместо этого, но я не знаю, как бы создать этот компонент с помощью Bootstrap. Это в основном моя всплывающая подсказка. vue компонент, использующий css: 

<template>
      <div :class="`tooltip ${position}`">
        <slot></slot>
        <span class="tooltip-text">{{content}}</span>
      </div>
</template>

<script>  
export default {
  name: 'Tooltip',


  props: {
    position: String,
    content: String,
  }

};
</script>

<style lang="scss">
.tooltip {
.......
</style>

Затем я импортирую и использую свой компонент в других местах, например: 

<tooltip position="right" content="Right tooltip">Hover me</tooltip>

И я создал компонент Tooltip Bootstrap. vue, желающий иметь такую ​​же структуру, но с использованием Bootstrap, но я не знаю, как это могло бы быть go, вот что я начал:

  • I npm установлено bootstrap - vue

     <template>
 <div>
    <button v-b-tooltip.hover.${position}="'${content}'"></button>
  </div>
 </template>

<script>

  import VBTooltip from 'bootstrap-vue';

  export default {
    name: 'TooltipBootstrat',

      components: {
        VBTooltip,

    },
    props: {
      position: String,
      content: String,
    }

  };
  </script>

Я читаю документацию bootstrap: https://bootstrap-vue.org/docs/directives/tooltip, но я не знаю, использую ли я это так, как предполагалось, поэтому я немного потерялся и был бы признателен за любую помощь / совет, спасибо!

1 Ответ

1 голос
/ 06 августа 2020

BootstrapVue предоставляют компонент <b-tooltip> и директиву v-b-tooltip (предпочтительный метод из документа ). Вы можете поиграть в документе.

Простыми словами, вы можете использовать директиву v-b-tooltip для любого элемента, что очень удобно. но для компонента <b-tooltip> вы должны установить target, чтобы идентифицировать цель для активации всплывающей подсказки.

Итак, в вашем случае вы можете сделать что-то вроде: 

<template>
  <div v-b-tooltip="{ title: content, placement: position }"> 
    <slot></slot>
  </div>
</template>

<script>
import { VBTooltip } from 'bootstrap-vue'

export default {
  name: 'Tooltip',
  directives: {
    'b-tooltip': VBTooltip,
  },
  props: {
    position: String,
    content: String,
  }
};
</script>
...