十一、uni-app生成弹窗及换行

先看一下官方文档

这里我们区分弹窗showModal和提示窗showToast的功能

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

附加传参和换行的弹窗代码

这里的 _that.字段 是由form表单提交定义的onSubmit方法里重新定义了 var _that = this 【非必要】 除非this用的太多了
title是改文本不用说了
content的弹窗内容涉及换行主要是【 \n 】直接用即可 除了有字符串连接需要加 ‘+’
这里我还在确认按钮添加了提示窗 uni.showToast
// 原函数入参那一段可忽略不计 data自己写入参

						// 新增弹窗
						uni.showModal({
    
							title: '确认提醒',
							content: '每人每天只能生成3次动态码！\n ' + _that.name + ' | 本人' + '(' + _that.idCode + ')' + '\n ' + '同行人数：' + _that.peoples + '\n ' + '车牌号： ' + _that.form.carNumber + '\n' + '目的单位名称： ' + _that.form.companyAddr + '\n' + '联系人： ' + _that.form.contactPeople + '\n' + '联系电话： ' + _that.form.contactPhone,
							success: function(res){
    
								if(res.confirm){
    
									console.log('用户点击确认')
									uni.showToast({
    
										icon: "success",
										title: "生成成功"
									})
									// 原函数入参
									let rmmates = []
									for (let item of _that.items) {
    
										if (!item.checked) rmmates.push(item.id)
									}
									let data = {
    
										id: _that.id,
										toCompanyContactPhone: _that.form.contactPhone,
										toCompanyContact: _that.form.contactPeople,
										toCompanyName: _that.form.companyAddr,
										licensePlateNumber: _that.form.carNumber,
										params: {
    
											rmmates: rmmates
										}
									}
									_that.getQRImage(data)
									// 入参和弹窗确认后 定义getQRImage方法拿到data 在后面用getQRImage做事件的处理
									
								}else if(res.cancel){
    
									console.log('用户点击取消按钮')
								}
							}
						})

这样就做好了 但是在微信开发者工具里【换行不识别】→ 所以需要用【预览】功能真机测试

点击确定后触发 uni.showToast （上面黑色主题是我微信设置的 与本次内容无关 正常应该是白色的）