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
			});
		},	
	});
},