uniapp自定義仿微信/ios彈窗組件

UniApp自定義彈出框uniPop組件、uniapp仿微信、android、ios彈窗效果

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

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

uniPop組件引入方式

使用如下兩種引入方式都可：

• 在main.js裏引入全局組件
  

import uniPop from './components/uniPop/uniPop.vue'
Vue.component('uni-pop', uniPop)

• 在頁面引入組件
  

<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>
複製代碼

調用方式  this.$refs.uniPop.show({...})

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

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

uniPop自定義模板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>
複製代碼

可供選擇的參數配置defaultOptions

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
    }
},
複製代碼

emmmm，以上就是uniPop自定義模態彈窗介紹，但願能喜歡😀😀~~

◆ 附上 uniapp自定義導航欄：juejin.im/post/5d806b…