uni-app自定義彈窗模板uniPop組件
- 2019 年 10 月 8 日
- 筆記
uni-app自定義彈窗uniPop.vue模板|uniapp仿微信彈窗/仿ios彈窗效果|msg信息框|alert對話框|loading提示框
uniPop支持多種動畫效果、可供選擇類型ios/android、可以自定義彈窗內容樣式/自定義多按鈕及事件/彈窗顯示位置、自動關閉秒數、遮罩層透明度及點擊遮罩是否關閉
如下圖：H5/小程序/App三端效果兼容性一致。(後續大圖均以App端展示)
引入
以下兩種方式均可引入uniPop彈窗組件：
1、在main.js里引入全局組件
import uniPop from './components/uniPop/uniPop.vue' Vue.component('uni-pop', uniPop)
2、在相應頁面引入組件
<template> <view class="container"> ... <!-- 彈窗模板 --> <uni-pop ref="uniPop"></uni-pop> </view> </template> <script> import uniPop from './components/uniPop/uniPop.vue' export default { data() { return { ... } }, components:{ uniPop }, ... } </script>
alert對話框效果
let uniPop = this.$refs.uniPop uniPop.show({ title: '提示', content: '詢問框 （彈窗內容，用於告知當前狀態、提示信息和解決方法，描述文字/文案盡量控制在三行內）', shadeClose: false, anim: 'fadeIn', btns: [ { text: '取消', onTap() { console.log('您點擊了取消！'); uniPop.close(); } }, { text: '確定', style: 'color: #41a863', onTap() { console.log('您點擊了確定！'); } } ] })
Toast加載層效果 – 支持loading/success/info/error四種圖標
this.$refs.uniPop.show({ skin: 'toast', content: 'loading', icon: 'loading', //success | info | error | loading shade: false, time: 3 })
/** * @tpl uni-app自定義彈窗組件 - uniPop.vue * @author andy by 2019-09-20 * @about Q：282310962 wx：xy190310 */ <template> <view v-if="opts.isVisible" class="uniPop" :class="opts.isCloseCls"> <view class="unipop__ui_panel"> <view v-if="opts.shade" class="unipop__ui_mask" @tap="shadeTaped"></view> <view class="unipop__ui_main"> <view class="unipop__ui_child" :style="opts.style"> <!-- 標題 --> <view v-if="opts.title" class="unipop__ui_tit">{{opts.title}}</view> <!-- 內容 --> <view v-if="opts.content" class="unipop__ui_cnt" :style="opts.contentStyle"> {{opts.content}} </view> <view v-if="opts.btns" class="unipop__ui_btns"> <text v-for="(item,index) in opts.btns" :key="index" class="btn" :style="item.style" @tap="btnTaped(item)">{{item.text}}</text> </view> </view> <!-- xclose --> <view v-if="opts.xclose" class="unipop__xclose" @tap="close"></view> </view> </view> </view> </template>
data() { return { defaultOptions: { isVisible: false, //是否顯示彈窗 title: '', //標題 content: '', //內容 contentStyle: '', //內容樣式 style: null, //自定義彈窗樣式 skin: '', //彈窗風格 icon: '', //彈窗圖標 xclose: false, //自定義關閉按鈕 shade: true, //遮罩層 shadeClose: true, //點擊遮罩關閉 opacity: '', //遮罩透明度 time: 0, //自動關閉秒數 end: null, //銷毀彈窗回調函數 anim: 'scaleIn', //彈窗動畫 scaleIn(默認) | fadeIn | shake | top | right | bottom | left position: '', //彈窗位置 top | right | bottom | left btns: null, //彈窗按鈕 }, opts: {}, timer: null } },
methods: { // 顯示彈窗事件（處理傳參） show(args) { this.opts = Object.assign({}, this.defaultOptions, args, {isVisible: true}) // console.log(this.opts) // 自動關閉 if(this.opts.time) { this.timer = setTimeout(() => { this.close() }, this.opts.time * 1000) } }, ... }
好了，今天的uniapp彈窗組件分享就到這裡，希望能喜歡??~~
◆ 最後附上uniApp自定義導航實現
uniapp自定義頂部導航欄：https://cloud.tencent.com/developer/article/1508009
