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

目录
  • 一、基本用法
  • 二、自定义弹出层(dialog + message) 示例
  • 三、提交信息 (input + 延迟关闭)
  • 四、底部分享示例

官方示例: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弹出层内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • uniapp 仿微信的右边下拉选择弹出框的实现代码

    在百度找了很多 没有找到满意的 这里根据自己的需求 抽取一个组件 这个组件主要是包括搜索框和右边菜单点击弹出一个下拉筛选菜单 这里首先用一个单独的页面存放这个组件 <template> //这里是搜索框的输入框 不需要的可以删掉 <view> <view class="arrivalSearch"> <view class="arrivalSmallsearch"> <view class="arriv

  • 在vant中使用时间选择器和popup弹出层的操作

    我就废话不多说了,大家还是直接看代码吧~ <template> <div class="page"> <van-cell-group> <van-cell title="选择日期" :value="datetime" arrow @click="showDatePicker = !showDatePicker" ></van-cell> </van-cell-g

  • web 前端常用组件之Layer弹出层组件

    经手几个项目,还是感觉 Layer 用起来比较的轻松,你能想到的 Layer 都能帮你做到. 感谢 Layer 作者贤心,Layer 官网地址:http://layer.layui.com/ 1. Layer 使用特点 Layer 具备全方位的解决方案,致力于服务各水平段的开发人员,让页面轻松地拥有丰富友好的操作体验. Layer 尽可能地在以更少的代码展现更强健的功能,注重性能的提升.易用和实用性.. Layer 兼容了包括IE6在内的所有主流浏览器. 数量可观的接口,可以自定义需要的风格,每

  • 用vue3封装一个符合思维且简单实用的弹出层

    目录 前言 服务式弹出层 用Promise来创建吧! 写在后头 前言 在平常开发中,弹出层算是一个最常用的组件了,尤其是后台的表单页,详情页,用户端的各种确认都很适合使用弹出层组件展示,但是一般组件库提供给我们的一般还是组件的形式,或者是一个简单的服务. 组件形式的弹出层,在我看来应该是组件库提供给我们二次封装用的,如果直接其实很不符合直觉 写在页面结构里,但是却不是在页面结构中展示,放在那个位置都不合适只能放在最下边 一个页面如果只有一个弹出层还好维护,多几个先不说放在那里,光维护弹出层的展示

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

    目录 一.基本用法 二.自定义弹出层(dialog + message) 示例 三.提交信息 (input + 延迟关闭) 四.底部分享示例 官方示例:uni-popup 弹出层 - DCloud 插件市场 弹出层组件用于弹出一个覆盖到页面上的内容,使用场景如:底部弹出分享弹窗.页面插屏广告等 一.基本用法 <template> <view> <button type="primary" @click="toggle('top')"&g

  • 基于Vue.js+Nuxt开发自定义弹出层组件

    今天给大家分享VPopup 基于Vue.js构建的轻量级移动端弹出框组件,详情如下所示: 一款融合了Vant.NutUI等热门Vue组件库中的Popup弹层.Dialog对话框.Toast提示框.ActionSheet动作面板框.Notify通知框等功能. 快速使用 在main.js中引入组件 // 引入弹窗Popup import Popup from './components/popup' Vue.use(Popup) 支持如下两种 组件式 及 函数式 调用插件. 组件式 <templat

  • vue-dialog的弹出层组件

    本文章通过实现一个vue-dialog的弹出层组件,然后附加说明如果发布此包到npm,且能被其他项目使用. 功能说明 多层弹出时,只有一个背景层. 弹出层嵌入内部组件. 弹出层按钮支持回调 源码下载 实现 多层弹出时,只有一个背景层 利用两个组件实现,一个背景层组件(只提供一个背景层,组件名:background.vue),一个弹出层内容管理组件(实现多个内容层的管理,组件名:master.vue). 弹出层嵌入内部组件 使用vue的component组件实现,他可以完美支持. 弹出层按钮支持回

  • javascript 弹出层组件(升级版)

    这次还是利用原来代码的组织结构重新加强了功能,目前来说还有两个小问题,第一个是ie6下自定义弹出层会出现无法遮住select的情况,目前还没加入到组件里,可以自己在自定义的div里面加上ifame来遮罩,组件自带的弹出层可以遮住.第二个问题,由于是绝对定位,所以在改变浏览器窗口大小的时候会出现无法自动跟随.大家试试就知道了,当然问题肯定不少,只是这两个我认为比较重要的,暂时列出来,以后修复. 下面是代码,里面都有注释,可以直接运行. 在线演示 http://demo.jb51.net/js/20

  • Layer组件多个iframe弹出层打开与关闭及参数传递的方法

    一.Layer简介 Layer是一款近年来备受青睐的web弹层组件,基于jquery,易用.实用,兼容包括IE6在内的所有主流浏览器,拥有丰富强大的可自定义的功能. Layer官网地址:http://layer.layui.com/ 二.多个iframe弹出层(非嵌套) 1.打开iframe弹出层js代码 (1)示例一: layer.open({ type: 2, title: 'layer mobile页', shadeClose: true, shade: 0.8, area: ['380p

  • layer.open组件获取弹出层页面变量、函数的实例

    最近做项目遇到个问题 使用layer.open组件弹出层,需要将该弹出层抽取城单独的公共页面,因此需要在主页面获取弹出层页面的相关变量或者函数值. 记录下解决办法. 先来看layer.open函数 再来看弹出层URL对应的页面关键代码 将表单序列化成JS对象的函数是自己封装的一个JS函数,这里就不细说了,也可以自己手动定义个JS对象,自己给该对象添加属性 最后来看主页面调用方式 打印回调函数接收的变量可以看到,获取到弹出层内用户操作的相关数据. 最后,其实关键点就在于获取ifream中指定变量或

  • 使用layui的layer组件做弹出层的例子

    官方文档地址: http://www.layui.com/doc/modules/layer.html 本例演示效果: 当点击申请提现时,出现申请提现框,并根据用户输入进行一些判断,给出友好提示,比如: 代码实现: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>弹出层</title> <link

随机推荐