mint-ui popup自动关闭
2024-10-08 07:50:43
<template>
<div class="hello">
<input type="text" v-model="name" @blur="checkname">
<mt-popup
v-model="popupVisible"
position="top"
popup-transition="popup-fade"
>
{{msgtip}}
</mt-popup>
</div>
</template>
<script>
export default {
name: "HelloWorld",
data() {
return {
show:false,
msgtip:'输入有误，重新输入',
popupVisible:false,
name:''
};
},
watch:{
//检测popupVisible的值，如果是true,让它两秒钟之后false
popupVisible(val) {
console.log(val)
if (val) {
setTimeout(() => {
this.popupVisible= false;
}, 2000);
}
}
},
methods: {
checkname(){
if(this.name!='123'){
this.popupVisible=true;
}
}
},
computed:{
},
mounted() {},
components:{
}
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
/* 本身样式很丑，改写他内部的css */
.hello{
position: relative;
}
.mint-popup{
width:80%;
margin:0 auto;
height:100px;
line-height: 100px;
color:#fff;
background: none;
}
.v-modal{
width:80%;
margin:0 auto;
height:100px;
line-height: 100px;
color:#fff;
border-radius: 20px;
}
</style>
最新文章
- 自己动手，实现一种类似List<T>的数据结构(一）
- 执行最慢的SQL语句
- QT读写ini配置文件
- 网站标题ico那些事
- SharePoint 2013的100个新功能之搜索（二）
- linux 操作系统/xxx目录下都是什么文件?
- 记录 serverSocket socket 输入,输出流,关闭顺序,阻塞,PrintWriter的一些问题.
- C# 中Web.config文件的读取与写入
- 面向对象【day08】：异常处理（六）
- IO学习
- 【liunx】date命令总结
- 20155334 网络对抗PC平台逆向破解（二）
- TUANDUIZUOYE
- 用python参加Kaggle的些许经验总结（收藏）
- 系统学习（javascript）_基础（数据类型之间的转换）
- jQuery实现布局高宽自适应
- CSS transitions深入理解
- Oracle入门第一天（下）——数据库的管理
- vue图片、背景图片路径问题
- mongodb 3.4复制集配置