V-подсказка: закрыть всплывающее окно из метода
В VueJS я использую v-tooltip (https://github.com/Akryum/v-подсказка) для всплывающих окон.
Чтобы закрыть всплывающее окно, они предоставляют директиву 'v-close-popover', которую я могу назначить кнопке/ссылке внутри всплывающего окна, чтобы закрыть всплывающее окно. Это хорошо работает.
Однако у меня есть требование, когда мне нужно закрыть это всплывающее окно из метода Vue. Но я не знаю, как вызвать закрытие всплывающего окна из метода.
Вы нашли какое-то решение для этого? У меня точно такая же проблема.
Ответы 1
Вот как вы можете этого добиться. Он будет отображать всплывающую подсказку в событии mouseOver и удалять в событии mouseLeave. В шаблоне->
<i
id = "requiredIcon"
aria-hidden = "true"
v-tooltip = "{content: 'Required option is not available for this question.', show: isOpen, trigger: 'manual'}"
@mouseover = "showTooltip"
@mouseleave = "removeTooltip"
></i>
В сценарии->
data() {
return {
isOpen: false,
};
},
methods:{
showTooltip() {
this.isOpen = true;
},
removeTooltip() {
this.isOpen = false;
}
}
Это решение может работать, если у вас есть только одно всплывающее окно на странице, но их может быть несколько.
@ImranFarooq вам придется использовать уникальную переменную для конкретной подсказки. Вы можете соответствующим образом обновить переменную isOpen (возможно, массив/объект для всех ваших подсказок).
на самом деле есть несколько всплывающих подсказок с каждой записью, а записей тысячи, поэтому невозможно иметь уникальную переменную для каждой всплывающей подсказки.
@ImranFarooq Вы даете уникальный идентификатор каждой всплывающей подсказке? (id = "requiredIcon") Тогда вы можете легко добиться этого, передав свой идентификатор функции и используя это имя идентификатора с параметром show.
В идеале должен быть способ закрыть все всплывающие подсказки одной командой, с идентификатором или без.
Может быть, вы можете использовать реквизит
openдля ручного управления видимостью всплывающего окна?