文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

uniapp组件uni-popup弹出层的使用

2024-04-02 19:55

关注

 官方示例:uni-popup 弹出层 - DCloud 插件市场

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

一、基本用法

<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) 示例

<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() {
			this.$refs.popupMessage.open();
			
			this.$refs['popupDialog'].close();
		},
		dialogClose() {
			this.msgType = 'info';
			this.message = '点击了对话框的取消按钮';
			this.$refs.popupMessage.open();
			
			this.$refs.popupDialog.close();
		}
	}
};
</script>

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

<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()
			},
			dialogInputConfirm( val) {
				uni.showLoading({
					title: '1秒后会关闭'
				})
				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}项:${e.item.text}`,
					icon: 'none'
				})
			}
		},
	}
</script>

 到此这篇关于uniapp组件uni-popup弹出层的使用的文章就介绍到这了,更多相关uniapp uni-popup弹出层内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯