<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>