uniapp组件uni-popup弹出层的使用
作者:~疆 时间:2024-04-28 09:47: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>
来源:https://blog.csdn.net/qq_40323256/article/details/114306581
标签:uniapp,uni-popup,弹出层
0
投稿
猜你喜欢
AJAX缓存的问题解决办法
2009-04-26 14:47:00
微信小程序搭建及解决登录失败问题
2023-06-28 09:51:49
Python嵌入C/C++进行开发详解
2024-01-02 06:39:48
Python数据可视化实现正态分布(高斯分布)
2022-10-28 03:31:29
Python实现读取txt文件中的数据并绘制出图形操作示例
2021-07-21 17:01:15
python基于concurrent模块实现多线程
2023-09-10 18:33:46
Django websocket原理及功能实现代码
2023-04-18 16:49:11
Django结合ajax进行页面实时更新的例子
2023-02-14 21:15:45
pygame实现贪吃蛇小游戏
2023-04-18 19:09:07
pytorch加载自己的数据集源码分享
2023-04-16 08:46:09
Python抓取京东图书评论数据
2023-10-16 09:26:37
MySQL学习笔记5:修改表(alter table)
2024-01-23 23:01:16
python中的Numpy二维数组遍历与二维数组切片后遍历效率比较
2022-11-23 04:47:50
Go语言程序查看和诊断工具详解
2023-06-22 02:40:38
keras读取h5文件load_weights、load代码操作
2023-05-21 18:00:22
python实现简单温度转换的方法
2021-04-12 10:14:51
mysql表名忽略大小写配置方法详解
2024-01-24 11:49:19
Python爬虫之Selenium警告框(弹窗)处理
2021-10-06 23:59:12
Pytorch中的图像增广transforms类和预处理方法
2022-09-10 22:21:06
解决layui-table单元格设置为百分比在ie8下不能自适应的问题
2024-04-29 13:18:26