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

小咪咪 2021-08-02 21:36 365阅读 0赞

### 一、弹出层组件开发 ###

弹窗在开发中是一种很常见的组件，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>

### 二、草稿保存 ###

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTE1OTY1_size_16_color_FFFFFF_t_70][]

逻辑分析：

在点击后退按钮的时候，我们都可以使用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
    			});
    		},	
    	});
    },

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTE1OTY1_size_16_color_FFFFFF_t_70]: /images/20210802/03c6228ce0da43b7a4fd5a9b256fe405.png