Как v-для Bootstrap vue всплывающих подсказок - PullRequest
Новая
       57

Как v-для Bootstrap vue всплывающих подсказок

1 голос
/ 12 апреля 2019

У меня есть несколько всплывающих подсказок Bootstrap Vue, и я хотел бы уменьшить занимаемую площадь в разметке, используя v-for, который просматривает массив объектов и заполняет значения свойств <b-tooltip>.

одна из моих текущих подсказок 

<b-tooltip v-if="clientInContext && taxId && hideTaxId"
  target="titlebar-taxId-eye-show"
  :disabled.sync="disableTaxIdButtonTooltip"
  :show.sync="showTaxIdButtonTooltip"
  triggers="hover"
  placement="bottom">
    Click to temporarily display this value
</b-tooltip>

Моя попытка V-For: 

<b-tooltip v-for='tooltip in tooltipContents'
  v-if="tooltip.vif"
  target="tooltip.target"
  :disabled.sync="tooltip.disable"
  :show.sync="tooltip.show"
  triggers="hover"
  placement="bottom">
    {{tooltip.text}}
</b-tooltip>

public tooltipContents: object[] = [
  {
    vif: 'clientInContext && ssn && hideSsn',
    target: 'titlebar-ssn-eye-show',
    disable: this.disableSsnButtonTooltip,
    show: this.showSsnButtonTooltip,
    text: 'Click to temporarily display this value'
  },
  {
    vif: 'clientInContext && ssn && !hideSsn',
    target: 'titlebar-ssn-eye-hide',
    disable: this.disableSsnButtonTooltip,
    show: this.showSsnButtonTooltip,
    text: 'Click to mask this value'
  },
  {
    vif: 'clientInContext && ssn && !hideSsn',
    target: 'titlebar-ssn',
    disable: this.disableSsnTextTooltip,
    show: this.showSsnTextTooltip,
    text: '{{ssn}}' 
  }
]

Я не уверен, что еще я могу сделать, чтобы заставить это работать. И не нашел ничего в сети, связанной с этой проблемой.

1 Ответ

1 голос
/ 12 апреля 2019

Я бы поместил v-for в div и поместил v-if в v-tooltip .. Это не сравнение «один к одному» с вашим примером, но оно показывает, как выможет выполнить проверку для каждой подсказки ..

Зеркало CodePen: https://codepen.io/oze4/pen/gyxrBY?editors=1010

new Vue({
  el: "#app",
  data: {
    tooltips: [{
        name: "tooltip1",
        target: "button-1",
        placement: "bottom",
        text: "Live"
      },
      {
        name: "tooltip2",
        target: "button-2",
        placement: "top",
        text: "Html"
      },
      {
        name: "tooltip3",
        target: "button-3",
        placement: "left",
        text: "Alternative"
      }
    ]
  },
  methods: {
    tooltipCheck(tooltip) {
      switch (tooltip) {
        case "tooltip1":
          {
            // do check for tooltip 1
            return true;
          }
        case "tooltip2":
          {
            // do check fo tooltip2
            return false;
          }
        case "tooltip3":
          {
            // do check for tooltip3
            return true;
          }
      }
    }
  }
});
<script src="https://unpkg.com/vue@2.5.17/dist/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.0.0-rc.11/dist/bootstrap-vue.min.js"></script>

<link href="https://unpkg.com/bootstrap@4.1.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://unpkg.com/bootstrap-vue@2.0.0-rc.11/dist/bootstrap-vue.css" rel="stylesheet" />


<div id="app">
  <div style="margin-top: 40px;">
    <b-container fluid>
      <b-row style="margin-top: 10px;">
        <b-button id="button-1" variant="outline-success">One (check evaluates to true)</b-button>
      </b-row>
      <b-row style="margin-top: 10px;">
        <b-button id="button-2" variant="outline-success">Two (check evaluates to false)</b-button>
      </b-row>
      <b-row style="margin-top: 10px;">
        <b-button id="button-3" variant="outline-success">Three (check evaluates to true)</b-button>
      </b-row>
      <div v-for="(tt, index) in tooltips">
        <b-tooltip v-if="tooltipCheck(tt.name)" :target="tt.target" :placement="tt.placement">
          {{ tt.text }}
        </b-tooltip>
      </div>
    </b-container>
  </div>
</div>
...