如何解决在单击时更改Bootstrap-vue工具提示的文本
我要在单击按钮时更改Vue工具提示文本吗?
- 点击前的工具提示文本:复制文本
- 点击后的工具提示文本:复制的文本
当再次悬停时,它应该再次显示“复制文本”,直到我再次单击以更改工具提示文本为止。
<b-button variant="primary" id="copy">
click here
</b-button>
<b-tooltip target="copy">
copy text
</b-tooltip>
注意:我在此工具提示中使用了Bootstrap-Vue。
解决方法
添加一个名为``tooltipText`''的数据属性并更新该属性,单击该按钮然后在鼠标离开时将其重置:
data(){
return{
tooltipText:'Copy text'
}
}
模板:
<b-button variant="primary" id="copy" @click="tooltipText='Text copied'" @mouseout="tooltipText='Copy text'">
click here
</b-button>
<b-tooltip target="copy">
{{tooltipText}}
</b-tooltip>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。