我撰寫了該代碼來開發自定義工具提示，該提示在用戶單擊按鈕 2 秒后自動關閉。我希望它只在 click 上作業，而不是 hover 。
它在前兩次運行良好，但是當我再次單擊它時它表現得很奇怪。
你可以在這里查看
<template>
<div id="app">
<button @click="copyThat" class="relative-button">
copy that
<div class="tooltip" v-if="copied"> copied </div>
</button>
</div>
</template>
<script>
export default {
data(){
return{
copied: false
}
},
methods: {
copyThat: function (){
this.copied = true;
setInterval( () => {
this.copied = false;
}, 2000 )
}
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
.relative-button{
position: relative;
}
.tooltip{
position: absolute;
top: 130%;
padding: 1rem;
left: -50%;
background: rgba(0,0,0,0.5);
color: white;
font-weight: bold;
z-index: 100;
width: 113px;
height: 30px;
border-radius: 4px;
padding: 7px;
text-transform: capitalize;
font-weight: 400;
font-size: 13px;
}
</style>
uj5u.com熱心網友回復：
問題是你沒有清除interval你創建的所以一旦你點擊復制按鈕，它會創建一個新的interval并且每 2 秒執行幾個間隔，這使你的工具列變得非常奇怪。
在創建新的間隔之前，您可以使用setTimeout或使用window.clearInterval清除所有間隔。
uj5u.com熱心網友回復：
使用setTimeout來代替：
copyThat: function() {
this.copied = true;
setTimeout(() => {
this.copied = false;
}, 2000);
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/403654.html
標籤：