vue在使用vuetify这个ui组件库时候,v-alert提示框设置定时显示,让提示窗在窗口上可以自动关闭
首先设置一个v-alert组件弹出框,根据v-model的值来进行弹出显示,按钮来控制<v-app><button@click="click">点击</button><v-alertoutlineddismissibletype="success"v-model="alert"class="demowidthv-show="isShow(2)">点击
首先设置一个v-alert组件弹出框,根据v-model的值来进行弹出显示,按钮来控制
<v-app>
<button @click="click">点击</button>
<v-alert outlined dismissible type="success" v-model="alert" class="demowidth
v-show="isShow(2)"
>点击成功</v-alert>
</v-app>
设置需要的数据
data() {
return {
alert: false,
timer: '',
value: 0,
};
},
在methods中设置方法
methods: {
click() {
this.alert = true;
this.timer = setInterval(this.get, 500);
},
get() {
this.value += 1;
},
isShow(time) {
if (this.value > time) {
this.alert = false;
clearInterval(this.timer);
this.value = 0;
}
},
},
这里就是利用定时器的原理来进行弹出窗的显示时间的
更多推荐
所有评论(0)