vant 弹框 Dialog 点击“确认”验证不通过时阻止对话框的关闭
vant弹框点击后自动关闭问题，vant-ui弹框控制关闭时间，vant-ui控制关闭前的毁掉函数，vant弹框想关闭在关闭
·
问题：
vant-ui 弹框组件点击取消确定按钮自动关闭
解决
1. 参考Dialog弹框异步操作
2. 查找 Dialog Props
代码示例
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Expires" content="0">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title> </title>
<link rel="stylesheet" href="./css/vantCss.css">
<script src="Scripts/newvue.js"></script>
<script src="Scripts/vant.min.js"></script>
<script src="Scripts/jquery-1.11.3.min.js"></script>
</head>
<body>
<div id="wrap">
<div class="history">
<van-dialog v-model="show" :before-close="closebefore" show-cancel-button title="标题" @confirm="Sure()">
<div style="height: 3.15rem;overflow-y: auto;">
<table border="1" cellspacing="0" cellpadding="0" style="width: 90%;margin:.2rem auto; ">
<tr>
<th style="font-weight: bold;"> 号码</th>
<th style="font-weight: bold; ">时间</th>
</tr>
<tr>
<td> 323213 </td>
<td>2020-05-12 08:30:23</td>
</tr>
<tr>
<td> 323213 </td>
<td>2020-05-12 08:30:23</td>
</tr>
</table>
</div>
</van-dialog>
</div>
<script>
new Vue({
el: "#wrap",
data: {
show: true,
},
created: function() {},
methods: {
// 添加次函数可在点击确定后不关闭弹框，this.show = false时关闭
closebefore(action, done) {
if (action === 'confirm') {
return done(false)
} else {
return done()
}
},
Sure() {
vant.Toast('你点击了确定按钮');
this.show = false;
},
},
})
</script>
</body>
</html>
为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。
更多推荐
1
0- 0
已为社区贡献4条内容
所有评论(0)