uni-app开发(6)---弹出层开发与草稿保存开发

一、弹出层组件开发

弹窗在开发中是一种很常见的组件，uni-app内部已经了组件。在开发过程中，我们只需要引入官方的组件即可。使用的过程大致如下：

第一步：引入uni-popup组件。

import uniPopup from '@/components/uni-popup/uni-popup.vue'

第二步：在父组件中注册，并使用。

<uni-popup :show="showpopup" position="middle" mode="fixed"  @hidePopup="hidePopup">
	<view class="gonggao">
		<view class="u-f-ajc">
			<image src="../../static/common/addinput.png" mode="widthFix"></image>
		</view>
		<view class="">1.涉及黄色，政治，广告及骚扰信息</view>
		<view class="">1.涉及黄色，政治，广告及骚扰信息</view>
		<view class="">1.涉及黄色，政治，广告及骚扰信息</view>
		<view class="">1.涉及黄色，政治，广告及骚扰信息</view>
		<button type="primary" @tap="hidePopup">朕知道了</button>
	</view>
</uni-popup>

注意事项：注意popup的属性，并了解其作用很关键。

第三步：在popup组件中，我们使用插槽的形式，自定义我们需要的DOM结构。比如：

<view class="gonggao">
	<view class="u-f-ajc">
		<image src="../../static/common/addinput.png" mode="widthFix"></image>
	</view>
	<view class="">1.涉及黄色，政治，广告及骚扰信息</view>
	<view class="">1.涉及黄色，政治，广告及骚扰信息</view>
	<view class="">1.涉及黄色，政治，广告及骚扰信息</view>
	<view class="">1.涉及黄色，政治，广告及骚扰信息</view>
	<button type="primary" @tap="hidePopup">朕知道了</button>
</view>

二、草稿保存

在数据录入界面，用户如果不保存直接退出的时候，往往需求咨询用户是否保存，这个时候我们就需要使用草稿保存组件。效果图如下：

逻辑分析：

在点击后退按钮的时候，我们都可以使用onBackPress用来监控返回时间，在判断页面有输入内容的时候，给予用户提示操作。

onBackPress() {
	// 如果有值
	if(!this.text && this.imageList.length===0 ){
		return;
	}
	if(!this.isget){
		this.baocun();
		return true;
	}
},

 用户保存操作提示框，使用showModal即可。

baocun(){
	uni.showModal({
		content: '是否要保存为草稿?',
		cancelText: '不保存',
		confirmText: '保存',
		success: res => {
			if(res.confirm){
				console.log('保存');
			}else{
				console.log('不保存');
			}
			this.isget = true;
			uni.navigateBack({
				delta: 1
			});
		},	
	});
},