mint-ui popup自动关闭

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