uni.showModal使用content内容不支持换行问题解决

uni.showModal使用content内容不支持换行问题解决_第1张图片

问题描述

uniapp开发,uni.showModal 弹框的使用过程中发现 content 配置项,不会解析HTML标签,并且只能在长度超过弹框宽度后自动换行,不能满足自定义控制内容样式的效果。

解决方案

通过将 \r\n 回车换行符,拼接到需要换行的位置处,即可实现自定义换行

this.Info = "最新版本号:1.0.0" +  + '\r\n' + "更新内容:" + '\r\n' + 'xxxxxxxxxx';
uni.showModal({
	title: '提示',
	content: this.Info,
	success: function (res) {
		if (res.confirm) {
			console.log('用户点击确定');
		} else if (res.cancel) {
			console.log('用户点击取消');
		}
	}
});

\r\n 介绍

\n 软回车:
在Windows 中表示换行且回到下一行的最开始位置。相当于Mac OS 里的 \r 的效果。
在Linux、unix 中只表示换行,但不会回到下一行的开始位置。

\r 软空格:
在Linux、unix 中表示返回到当行的最开始位置。
在Mac OS 中表示换行且返回到下一行的最开始位置,相当于Windows 里的 \n 的效果。

\t 跳格(移至下一列)

相关链接:点击跳转

小结

在 使用 uni.showModal 需要注意以下细节:
1.\r\n换行效果再微信开发者工具中不能展示效果,需在真机种才看效果。
2.小程序端:uni.showModal 弹框的确认按钮和取消按钮,自动义按钮内容时,文字内容长度不能超过4个。

uni.showModal使用content内容不支持换行问题解决_第2张图片

你可能感兴趣的:(uniapp)