uniapp組件uni-popup彈出層的使用
官方示例:uni-popup 彈出層 - DCloud 插件市場(chǎng)
彈出層組件用于彈出一個(gè)覆蓋到頁(yè)面上的內(nèi)容,使用場(chǎng)景如:底部彈出分享彈窗、頁(yè)面插屏廣告等
一、基本用法
<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 內(nèi)容,此示例沒有動(dòng)畫效果 </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 + ' ,狀態(tài):'+e.show }) } } }; </script>
二、自定義彈出層(dialog + message) 示例
<template> <view> <button style="background-color: #4cd964;" @click="toggleMessage('success')">成功</button> <button style="background-color: #dd524d;" @click="toggleMessage('error')">錯(cuò)誤</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> <!-- 對(duì)話框 --> <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 = '這是一條錯(cuò)誤消息提示'; break; } this.$refs['popupDialog'].open(); }, dialogConfirm() { this.$refs.popupMessage.open(); this.$refs['popupDialog'].close(); }, dialogClose() { this.msgType = 'info'; this.message = '點(diǎn)擊了對(duì)話框的取消按鈕'; this.$refs.popupMessage.open(); this.$refs.popupDialog.close(); } } }; </script>
三、提交信息 (input + 延遲關(guān)閉)
<template> <view> 輸入內(nèi)容:{{value}} <button type="primary" @click="confirmDialog">輸入對(duì)話框</button> <uni-popup ref="dialogInput" type="dialog"> <uni-popup-dialog mode="input" title="輸入內(nèi)容" value="對(duì)話框預(yù)置提示內(nèi)容!" placeholder="請(qǐng)輸入內(nèi)容" @confirm="dialogInputConfirm"/> </uni-popup> </view> </template> <script> export default { data() { return { msgType: 'success', value: '默認(rèn)輸入的內(nèi)容' } }, methods: { confirmDialog() { this.$refs['dialogInput'].open() }, dialogConfirm(done) { this.$refs['popupMessage'].open() }, dialogInputConfirm( val) { uni.showLoading({ title: '1秒后會(huì)關(guān)閉' }) 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}項(xiàng):${e.item.text}`, icon: 'none' }) } }, } </script>
到此這篇關(guān)于uniapp組件uni-popup彈出層的使用的文章就介紹到這了,更多相關(guān)uniapp uni-popup彈出層內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JavaScript中創(chuàng)建類/對(duì)象的幾種方法總結(jié)
這篇文章主要是對(duì)JavaScript中創(chuàng)建類/對(duì)象的幾種方法進(jìn)行了詳細(xì)的總結(jié)介紹,需要的朋友可以過來參考下,希望對(duì)大家有所幫助2013-11-11理解 JavaScript Scoping & Hoisting(二)
這篇文章主要介紹了理解 JavaScript Scoping & Hoisting,盡管對(duì)于有經(jīng)驗(yàn)的程序員來說這只是小菜一碟,不過我還是順著初學(xué)者常見的思路做一番描述2015-11-11JavaScript操作XML實(shí)例代碼(獲取新聞標(biāo)題并分頁(yè),并分頁(yè))
XML 代碼部分 這是一個(gè)新聞的XML 文件,如果 NBody部分包含 XML 和Html 不可識(shí)別部分, 就 包含在DATA 表示附中。2010-05-05JavaScript基于遍歷操作實(shí)現(xiàn)對(duì)象深拷貝功能示例
這篇文章主要介紹了JavaScript基于遍歷操作實(shí)現(xiàn)對(duì)象深拷貝功能,涉及javascript元素遍歷與屬性操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2019-03-03javascript實(shí)現(xiàn)前端成語(yǔ)點(diǎn)擊驗(yàn)證優(yōu)化
這篇文章主要介紹了javascript實(shí)現(xiàn)前端成語(yǔ)點(diǎn)擊驗(yàn)證優(yōu)化,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-06-06Bootstrap模態(tài)對(duì)話框中顯示動(dòng)態(tài)內(nèi)容的方法
今天小編就為大家分享一篇Bootstrap模態(tài)對(duì)話框中顯示動(dòng)態(tài)內(nèi)容的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-08-08