vant 弹框 Dialog 点击“确认”验证不通过时阻止对话框的关闭

lmr_

已于 2022-08-04 09:58:56 修改

阅读量4.4k

点赞数 2

分类专栏： vant 弹框Dialog 文章标签： javascript vue.js 前端

于 2022-08-04 09:53:15 首次发布

本文链接：https://blog.csdn.net/qq_48806446/article/details/126153533

版权

vant 弹框Dialog 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文介绍了如何在Vant UI中实现弹框组件（Dialog）在点击取消或确定按钮时不自动关闭的功能。通过设置:before-close属性并自定义关闭逻辑，可以在点击确定后执行特定操作而不立即关闭弹框。示例代码展示了如何使用Vue和Vant库创建一个包含表格内容的弹框，并在点击确定后显示提示信息并控制弹框关闭。

摘要由CSDN通过智能技术生成

问题：

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>