uniapp组件-uni-popup弹出层

女爷i 2021-07-25 16:28 3576阅读 0赞

**目录**

一、基本用法

二、自定义弹出层(dialog + message) 示例

三、提交信息 (input + 延迟关闭)

四、底部分享示例

--------------------

官方示例：[https://ext.dcloud.net.cn/plugin?id=329][https_ext.dcloud.net.cn_plugin_id_329]

弹出层组件用于弹出一个覆盖到页面上的内容，使用场景如：底部弹出分享弹窗、页面插屏广告等

## 一、基本用法 ##

![20210303123038939.gif][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70][]

<template>
    	<view>
    		<button type="primary" @click="toggle('top')">顶部弹出</button>
    		<button type="primary" @click="toggle('center')">居中弹出</button>
    		<button type="primary" @click="toggle('bottom')">底部弹出</button>
    		<uni-popup ref="popup" :type="type" :animation="false" :maskClick="true" @change="change">
    			<view style="background-color: #fff;padding: 15px;">
    				popup 内容，此示例没有动画效果
    			</view>
    		</uni-popup>
    	</view>
    </template>
    
    <script>
    export default {
    	data() {
    		return {
    			type: 'top'
    		};
    	},
    	methods: {
    		toggle(type) {
    			this.type = type;
    			this.$refs['popup'].open();
    		},
    		change(e) {
    			uni.showToast({
    				title:'popup: ' + e.type + ' ,状态:'+e.show
    			})
    		}
    	}
    };
    </script>

## 二、自定义弹出层(dialog + message) 示例 ##

![20210303194042966.gif][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 1][]

<template>
    	<view>
    		<button style="background-color: #4cd964;" @click="toggleMessage('success')">成功</button>
    		<button style="background-color: #dd524d;" @click="toggleMessage('error')">错误</button>
    		<button style="background-color: #f0ad4e;" @click="toggleMessage('warn')">警告</button>
    		<button style="background-color: #909399;" @click="toggleMessage('info')">信息</button>
    		
    		<uni-popup ref="popupMessage" type="message">
    			<uni-popup-message :type="msgType" :message="message" :duration="700" />
    		</uni-popup>
    		
    		<uni-popup ref="popupDialog" type="dialog">
    			<uni-popup-dialog :type="msgType" title="通知" content="欢迎使用 uni-popup!" :before-close="true" @confirm="dialogConfirm" @close="dialogClose" />
    		</uni-popup>
    	</view>
    </template>
    
    <script>
    export default {
    	data() {
    		return {
    			msgType: 'success',
    			message: '这是一条成功消息提示'
    		};
    	},
    	methods: {
    		toggleMessage(type) {
    			this.msgType = type;
    			switch (type) {
    				case 'success':
    					this.message = '这是一条成功消息提示';
    					break;
    				case 'warn':
    					this.message = '这是一条警告消息提示';
    					break;
    				case 'info':
    					this.message = '这是一条消息提示';
    					break;
    				case 'error':
    					this.message = '这是一条错误消息提示';
    					break;
    			}
    			this.$refs['popupDialog'].open();
    		},
    		dialogConfirm(done) {
    			this.$refs.popupMessage.open();
    			done(); // 需要执行 done 才能关闭对话框
    		},
    		dialogClose(done) {
    			this.msgType = 'info';
    			this.message = '点击了对话框的取消按钮';
    			this.$refs.popupMessage.open();
    			done(); // 需要执行 done 才能关闭对话框
    		}
    	}
    };
    </script>

## 三、提交信息 (input + 延迟关闭) ##

![20210303195957974.gif][]

<template>
    	<view>
    		输入内容：{
       {value}}
    		<button type="primary" @click="confirmDialog">输入对话框</button>
    		<uni-popup ref="dialogInput" type="dialog">
    			<uni-popup-dialog mode="input" title="输入内容" value="对话框预置提示内容!" placeholder="请输入内容" @confirm="dialogInputConfirm"/>
    		</uni-popup>
    	</view>
    </template>
    
    <script>
    	export default {
    		data() {
    			return {
    				msgType: 'success',
    				value: '默认输入的内容'
    			}
    		},
    		methods: {
    			confirmDialog() {
    				this.$refs['dialogInput'].open()
    			},
    			dialogConfirm(done) {
    				this.$refs['popupMessage'].open()
    				done()  		// 需要执行 done 才能关闭对话框
    			},
    			dialogInputConfirm(done, val) {
    				uni.showLoading({
    					title: '1秒后会关闭'
    				})
    				this.value = val
    				setTimeout(() => {
    					uni.hideLoading()
    					done() // 关闭窗口后，恢复默认内容
    				}, 1000)
    			}
    		},
    	}
    </script>

## 四、底部分享示例 ##

![20210303201653305.gif][]

<template>
    	<view>
    		<button type="primary" @click="confirmShare">分享模版示例</button>
    		<uni-popup ref="popupShare" type="share">
    			<uni-popup-share title="分享到" @select="select"></uni-popup-share>
    		</uni-popup>
    	</view>
    </template>
    
    <script>
    	export default {
    		data() {
    			return {
    			}
    		},
    		methods: {
    			confirmShare() {
    				this.$refs.popupShare.open()
    			},
    			select(e, done) {
    				uni.showToast({
    					title: `您选择了第${e.index+1}项：${e.item.text}`,
    					icon: 'none'
    				})
    				done()
    			}
    		},
    	}
    </script>

其中，uni-popup-share组件的内容如下：

<template>
    	<view class="uni-popup-share">
    		<view class="uni-share-title"><text class="uni-share-title-text">{
       {title}}</text></view>
    		<view class="uni-share-content">
    			<view class="uni-share-content-box">
    				<view class="uni-share-content-item" v-for="(item,index) in bottomData" :key="index" @click.stop="select(item,index)">
    					<image class="uni-share-image" :src="item.icon" mode="aspectFill"></image>
    					<text class="uni-share-text">{
       {item.text}}</text>
    				</view>
    
    			</view>
    		</view>
    		<view class="uni-share-button-box">
    			<button class="uni-share-button" @click="close">取消</button>
    		</view>
    	</view>
    </template>
    
    <script>
    	export default {
    		name: 'UniPopupShare',
    		props: {
    			title: {
    				type: String,
    				default: '分享到'
    			}
    		},
    		inject: ['popup'],
    		data() {
    			return {
    				bottomData: [{
    						text: '微信',
    						icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/c2b17470-50be-11eb-b680-7980c8a877b8.png',
    						name: 'wx'
    					},
    					{
    						text: '支付宝',
    						icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/d684ae40-50be-11eb-8ff1-d5dcf8779628.png',
    						name: 'wx'
    					},
    					{
    						text: 'QQ',
    						icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/e7a79520-50be-11eb-b997-9918a5dda011.png',
    						name: 'qq'
    					},
    					{
    						text: '新浪',
    						icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/0dacdbe0-50bf-11eb-8ff1-d5dcf8779628.png',
    						name: 'sina'
    					},
    					{
    						text: '百度',
    						icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/1ec6e920-50bf-11eb-8a36-ebb87efcf8c0.png',
    						name: 'copy'
    					},
    					{
    						text: '其他',
    						icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/2e0fdfe0-50bf-11eb-b997-9918a5dda011.png',
    						name: 'more'
    					}
    				]
    			}
    		},
    		created() {},
    		methods: {
    			/**
    			 * 选择内容
    			 */
    			select(item, index) {
    				this.$emit('select', {
    					item,
    					index
    				}, () => {
    					this.popup.close()
    				})
    			},
    			/**
    			 * 关闭窗口
    			 */
    			close() {
    				this.popup.close()
    			}
    		}
    	}
    </script>
    <style scoped>
    	.uni-popup-share {
    		background-color: #fff;
    	}
    
    	.uni-share-title {
    		/* #ifndef APP-NVUE */
    		display: flex;
    		/* #endif */
    		flex-direction: row;
    		align-items: center;
    		justify-content: center;
    		height: 40px;
    	}
    
    	.uni-share-title-text {
    		font-size: 14px;
    		color: #666;
    	}
    
    	.uni-share-content {
    		/* #ifndef APP-NVUE */
    		display: flex;
    		/* #endif */
    		flex-direction: row;
    		justify-content: center;
    		padding-top: 10px;
    	}
    
    	.uni-share-content-box {
    		/* #ifndef APP-NVUE */
    		display: flex;
    		/* #endif */
    		flex-direction: row;
    		flex-wrap: wrap;
    		width: 360px;
    	}
    
    	.uni-share-content-item {
    		width: 90px;
    		/* #ifndef APP-NVUE */
    		display: flex;
    		/* #endif */
    		flex-direction: column;
    		justify-content: center;
    		padding: 10px 0;
    		align-items: center;
    	}
    
    	.uni-share-content-item:active {
    		background-color: #f5f5f5;
    	}
    
    	.uni-share-image {
    		width: 30px;
    		height: 30px;
    	}
    
    	.uni-share-text {
    		margin-top: 10px;
    		font-size: 14px;
    		color: #3B4144;
    	}
    
    	.uni-share-button-box {
    		/* #ifndef APP-NVUE */
    		display: flex;
    		/* #endif */
    		flex-direction: row;
    		padding: 10px 15px;
    	}
    
    	.uni-share-button {
    		flex: 1;
    		border-radius: 50px;
    		color: #666;
    		font-size: 16px;
    	}
    
    	.uni-share-button::after {
    		border-radius: 50px;
    	}
    </style>

[https_ext.dcloud.net.cn_plugin_id_329]: https://ext.dcloud.net.cn/plugin?id=329
[20210303123038939.gif]: /images/20210725/dfa1ff26cc81435aa6db12047d91c430.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70]: /images/20210725/e8cecc47e099469eacc7b6e94df73cf8.png
[20210303194042966.gif]: https://img-blog.csdnimg.cn/20210303194042966.gif
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 1]: /images/20210725/b4aff6c4125d4a81a0a4c1d3f269f6c7.png
[20210303195957974.gif]: /images/20210725/6225b910948e4717a7b379685dc968af.png
[20210303201653305.gif]: /images/20210725/fb255559983945f9bc276e43445f9820.png