這是我的代碼
<div class="pop-up-chat">
<div id="div1">
<div class="pop-up-msg regular-text">Hi, How may I help you?</div>
<div class="triangle-down"></div>
</div>
</div>
在這里，我的目標是彈出聊天 div 并設定 5 秒延遲并隱藏 div。誰能告訴我有什么問題？
export default {
name: 'PopUpMsg',
mounted() {
this.msgShow();
},
methods: {
msgShow() {
const msg = document.getElementsByClassName('pop-up-chat');
setTimeout(() => {
msg.style.visibility = 'hidden';
}, 5000);
},
},
}
uj5u.com熱心網友回復：
只需將新屬性添加到資料showPopup并將其設定為true然后將其更改為掛鉤false內mounted
用于v-show顯示或隱藏想要的元素v-if-vs-v-show
<template>
<div>
<!-- binding style -->
<div :style="{visibility: showPopup ? 'visible' : 'hidden' }"
<!-- or use v-show directive to show | hide element -->
<div v-show="showPopup" class="pop-up-chat">
<div id="div1">
<div class="pop-up-msg regular-text">Hi, How may I help you?</div>
<div class="triangle-down"></div>
</div>
</div>
<!-- The rest of your template -->
</div>
</template>
<script>
export default {
name: 'PopUpMsg',
data() {
return {
showPopup: true,
}
}
mounted() {
this.msgShow();
},
methods: {
msgShow() {
setTimeout(() => {
this.showPopup = false
}, 5000)
},
},
}
</script>
或者您可以創建自定義指令v-visible
<div v-visible="showPopup" />
Vue.directive('visible', function(el, binding) {
el.style.visibility = Boolean(binding.value) ? 'visible' : 'hidden';
});
uj5u.com熱心網友回復：
它以這種方式作業
methods: {
msgShow() {
const msg = document.getElementById('msg');
setTimeout(() => {
msg.style.display = 'block';
setTimeout(() => {
msg.style.display = 'none';
}, 10000);
}, 5000);
},
},
.pop-up-chat { 顯示：無；//原來 }
uj5u.com熱心網友回復：
當您使用vue.js. 我建議您使用v-show指令來顯示和隱藏彈出視窗。
演示：
new Vue({
el: '#app',
data: {
isVisible: true
},
mounted() {
this.poppupShow();
},
methods: {
poppupShow() {
setTimeout(() => {
this.isVisible = false;
}, 5000);
}
}
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div class="pop-up-chat" v-show="isVisible">
<div id="div1">
<div class="pop-up-msg regular-text">Hi, How may I help you?</div>
<div class="triangle-down"></div>
</div>
</div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/434623.html
標籤：javascript Vue.js