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 = valsetTimeout(() => {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弹出层相关推荐

uni-app里的拓展组件uni ui与UI框架uView UI的Popup 弹出层的区别！
uni-app里的拓展组件uni ui与UI框架uView UI的Popup 弹出层的区别! 文章目录 1.官网Popup 弹出层链接 2.属性不同 3.属性对照 4.弹出的方式 5.uView特有属 ...
小程序UI组件 Vant Weapp Popup弹出层和Picker选择器组合使用按钮被遮盖恢复不了的问题
Vant Weapp Popup弹出层和Picker选择器组合使用, 如果picker在popup上存在滚动条, 在开发者工具上鼠标可以滚动还原picker的确认和取消按钮位置, 但是在真机上,把p ...
vue vant Popup 弹出层与 Picker 选择器的完美结合实现多级列表选择
前言: 在写项目的时候,经常会碰到选择列表,为了更完美的实现效果,使用了vant里面的 Popup 弹出层 + Picker 选择器效果图: 页面结构: van-field 是vant里面的输入框组 ...
个人中心 (二) 01-编辑资料-基础布局-Popup弹出层-底部弹出-头像男女时间 DatetimePicker时间选择转换-dayjs(value).format('YYYY-MM-DD')
个人中心-编辑资料-基础布局-Popup 弹出层-底部弹出模式-头像-男女-时间 & DatetimePicker 时间选择-年月日模式 & dayjs(value) 转换成日期对象, ...
uniapp原生子窗体(弹出层为例子)
在当前目录下新建一个目录和一个nvue页面 pages.json文件 {"path": "msVideo/msVideo","style": ...
微信小程序 - vant popup弹出层阻止底层页面滑动
前言在小程序编写过程当中使用使用vant weapp的popup组件作小程序的弹出层,触屏致使底层页面跟着滑动.web 解决方法使用touch事件阻止属性,@touchmove.stop.prev ...
vanpopup 高度_Vant Popup 弹出层
介绍弹出层容器,用于展示弹窗.信息提示等内容,支持多个弹出层叠加展示引入import Vue from 'vue'; import { Popup } from 'vant'; Vue.use(P ...
vant popup弹出层多选功能
一.效果图二.代码块 <template><div><van-button @click="btn" size="mini"&g ...
uniapp - 弹出层的使用
目录前言报错原因分析使用步骤第二步前言最近在写小程序的项目,前面的页面跳转.样式结构,写的都很流畅,奈何后面直接在小程序的popup弹出层卡死,就这一个功能,卡了老半天报错原因分析最 ...

uniapp组件-uni-popup弹出层

一、基本用法

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

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

四、底部分享示例

uniapp组件-uni-popup弹出层相关推荐

最新文章

热门文章