【若依前后端分离+app】第五篇--uni-app提示框（弹出层）

示例图：

弹出层（提示信息）

uni-app组件uni-popup的使用（弹出层、提示信息）

三个最重要的属性type,message,duration,本示例中都有用到

<!-- 提示信息弹窗 -->
		<view>
			<uni-popup ref="message" type="message">
				<uni-popup-message :type="msgType" :message="messageText" :duration="2000"></uni-popup-message>
			</uni-popup>
		</view>

method方法（open打开弹层，close关闭弹层）

//消息提示弹出框，使用时this.showMessage('warn', 'XXX');
			showMessage(msgType, messageText) {
				this.msgType = msgType;
				this.messageText = messageText;
				this.$refs.message.open(); //提示信息弹框，上弹框
			}

showMessage使用

//提示 黄色的
this.showMessage('warn', '无数据！');
//提示 绿色的
this.showMessage('success', '有数据！');
//提示 红色的
this.showMessage('error', '有错误！');

定义字段

data() {
			return {
				messageText: null,
				msgType: null,
			};
		},

如果需要其他弹出层样式可以参考uni-app官网！

uni-popup 弹出层 | uni-app官网 (dcloud.net.cn)