官方示例:uni-popup 弹出层
弹出层组件用于弹出一个覆盖到页面上的内容,使用场景如:底部弹出分享弹窗、页面插屏广告等
一、基本用法
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | <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) 示例
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 | <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 + 延迟关闭)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | <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> |
四、底部分享示例
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | <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弹出层的使用的文章就介绍到这了。