Uni-app中几种常用的提示框

最新推荐文章于 2025-09-20 14:54:44 发布

原创最新推荐文章于 2025-09-20 14:54:44 发布 · 7.9k 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#uniapp #vue #弹窗

vue 同时被 2 个专栏收录

43 篇文章

订阅专栏

uniapp

15 篇文章

订阅专栏

本文介绍了uni-app中常见的提示框使用方法，包括成功提示框、加载框、纯文字提示框及模态弹窗等，并提供了具体的代码实现。

1、成功提示框
提交表单的时候，提交成功弹出的提示框。

uni.showToast({
	title: '提交成功',
	duration: 2000
});

在这里插入图片描述
2、加载框

uni.showLoading({
	title: '加载中'
});

setTimeout(function () {
	uni.hideLoading();
}, 2000);

在这里插入图片描述
3、去掉图标，只显示文字提示框

uni.showToast({
	title: '请填写员工工号',
	icon:'none',
	duration: 2000
});

在这里插入图片描述
4、模态弹窗

uni.showModal({
	title: '提示',
	content: '这是一个模态弹窗',
	success: function (res) {
		if (res.confirm) {
			console.log('用户点击确定');
		} else if (res.cancel) {
			console.log('用户点击取消');
		}
	}
});

在这里插入图片描述