gpt4 book ai didi

javascript - 如何使 BootstrapVue 工具提示在 2 秒后消失?

转载 作者:行者123 更新时间:2023-11-30 19:31:27 24 4
gpt4 key购买 nike

我创建了一个按钮,单击该按钮会复制一些文本并显示工具提示,确认文本已被复制。我想让工具提示在 2 秒后消失。

我尝试使用 timeOut() 方法来淡化工具提示,但它不起作用。我正在使用来自 BootstrapVue 的工具提示。我该如何解决这个问题?

<!-- Button to copy translated content using clipboard.js -->
<b-button id="copyBtn" class="copy-translation-btn my-4" :disabled="!this.wordTranslated" :data-clipboard-text="this.wordTranslated" variant="outline-success">Copy Translation</b-button>

<!-- Tooltip will show only when text is translated & button clicked -->
<b-tooltip v-if="this.wordTranslated" triggers="click" target="copyBtn" placement="bottom">
<strong>Text Copied</strong>
</b-tooltip>

最佳答案

你可以 programmatically show/hide the tooltip通过绑定(bind) <b-tooltip>.showsetTimeout 之后设置为 false 的 bool 值-延迟:

<template>
<div>
<b-button id="copyBtn" @click="showTooltip = true">Copy</b-button>
<b-tooltip target="copyBtn"
:show.sync="showTooltip"
@shown="hideTooltipLater"
triggers
title="Text Copied">
</b-tooltip>
</div>
</template>

<script>
export default {
data() {
return {
showTooltip: false
};
},
methods: {
hideTooltipLater() {
setTimeout(() => {
this.showTooltip = false;
}, 2000);
}
}
};
</script>

Edit Hiding tooltip after delay

关于javascript - 如何使 BootstrapVue 工具提示在 2 秒后消失?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56396422/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com