uni-app自定義Modal彈窗組件|仿ios、微信彈窗效果

介紹

uniapp自定義彈窗組件uniPop，基於uni-app開發的自定義模態彈窗|msg信息框|alert對話框|confirm確認框|toast弱提示框

支持多種動畫效果、多彈窗類型ios/android、能夠自定義彈窗樣式/自定義多按鈕及事件/彈窗顯示位置、自動關閉秒數、遮罩層透明度及點擊遮罩是否關閉

H5/小程序/App三端效果以下，親測多端效果兼容性一致。(後續大圖均展現App端)

用法

◆ 彈窗uniPop.vue組件兩種引入方式

一、在main.js裏引入全局組件

import uniPop from './components/uniPop/uniPop.vue'

Vue.component('uni-pop', uniPop) 

二、在相應頁面引入組件

import uniPop from './components/uniPop/uniPop.vue' export default { data() { return { ... } }, components:{ uniPop }, ... }

<template>
    <view class="container"> ... <!-- 彈窗模板 -->
        <uni-pop ref="uniPop"></uni-pop>
    </view>
</template>

• msg信息框效果

 

this.$refs.uniPop.show({ content: 'msg消息提示框（5s後窗口關閉）', shade: true, shadeClose: false, time: 5, anim: 'fadeIn', })

• toast弱提示信息 - 支持success / info / error / loading四種圖標

 

this.$refs.uniPop.show({ skin: 'toast', content: 'loading', icon: 'loading', //success | info | error | loading
    shade: false, time: 3 })

• ios彈窗效果

 

let uniPop = this.$refs.uniPop uniPop.show({ skin: 'ios', title: '開啓新郵件提醒', content: '爲了保證新郵件能及時收到提醒，請前往系統 [設置] - [電池] 中關閉應用鎖屏清理。', shadeClose: false, btns: [ { text: '取消', style: 'color: #2a83f2', onTap() { uniPop.close(); } }, { text: '前往設置', style: 'color: #2a83f2', onTap() { console.log('您點擊了前往設置！'); } } ] })

調用方式如上，只是傳入參數不同，下面就不一 一展現了

◆ uniapp自定義模板template

 /** * @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 } },

◆ 經過Object.assign函數進行參數合併處理

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) } }, ... }

好了，uni-app自定義彈窗組件介紹就到這裏，但願能喜歡😀😀~~

◆ 最後附上以前開發的小程序/RN版彈窗插件

小程序彈窗：http://www.javashuo.com/article/p-exlmycvb-cw.html

ReactNative彈窗：http://www.javashuo.com/article/p-rrrwkkcz-w.html