快捷導(dǎo)航

uniapp組件uni-popup彈出層的使用

更新時(shí)間：2022年03月30日 15:59:12 作者：~疆

彈出層組件用于彈出一個(gè)覆蓋到頁(yè)面上的內(nèi)容，本文主要介紹了uniapp組件uni-popup彈出層的使用，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

一、基本用法

<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 內(nèi)容，此示例沒(méi)有動(dòng)畫(huà)效果
			</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 + ' ,狀態(tài):'+e.show
			})
		}
	}
};
</script>

二、自定義彈出層(dialog + message) 示例

<template>
	<view>
		<button style="background-color: #4cd964;" @click="toggleMessage('success')">成功</button>
		<button style="background-color: #dd524d;" @click="toggleMessage('error')">錯(cuò)誤</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>
		<!-- 對(duì)話框 -->
		<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 = '這是一條錯(cuò)誤消息提示';
					break;
			}
			this.$refs['popupDialog'].open();
		},
		dialogConfirm() {
			this.$refs.popupMessage.open();
			
			this.$refs['popupDialog'].close();
		},
		dialogClose() {
			this.msgType = 'info';
			this.message = '點(diǎn)擊了對(duì)話框的取消按鈕';
			this.$refs.popupMessage.open();
			
			this.$refs.popupDialog.close();
		}
	}
};
</script>

三、提交信息 (input + 延遲關(guān)閉)

<template>
	<view>
		輸入內(nèi)容：{{value}}
		<button type="primary" @click="confirmDialog">輸入對(duì)話框</button>
		<uni-popup ref="dialogInput" type="dialog">
			<uni-popup-dialog mode="input" title="輸入內(nèi)容" value="對(duì)話框預(yù)置提示內(nèi)容!" placeholder="請(qǐng)輸入內(nèi)容" @confirm="dialogInputConfirm"/>
		</uni-popup>
	</view>
</template>
 
<script>
	export default {
		data() {
			return {
				msgType: 'success',
				value: '默認(rèn)輸入的內(nèi)容'
			}
		},
		methods: {
			confirmDialog() {
				this.$refs['dialogInput'].open()
			},
			dialogConfirm(done) {
				this.$refs['popupMessage'].open()
			},
			dialogInputConfirm( val) {
				uni.showLoading({
					title: '1秒后會(huì)關(guān)閉'
				})
				this.value = val
				setTimeout(() => {
					uni.hideLoading()
				}, 1000)
			}
		},
	}
</script>

四、底部分享示例

<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) {
				uni.showToast({
					title: `您選擇了第${e.index+1}項(xiàng)：${e.item.text}`,
					icon: 'none'
				})
			}
		},
	}
</script>

到此這篇關(guān)于uniapp組件uni-popup彈出層的使用的文章就介紹到這了,更多相關(guān)uniapp uni-popup彈出層內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: