Vue自定义Popup弹窗组件|vue仿ios、微信弹窗|vue右键弹层

<template>
    <view class="demo">
        ...
        
        <!-- 弹窗模板 -->
        <v-popup 
            v-model="showDialog" 
            type="ios"
            anim="fadeIn" 
            title="标题"
            content="弹窗内容信息，弹窗内容信息！" 
            shadeClose="false" 
            xclose
            :btns="[
                {...},
                {...},
            ]"
        />
    </view>
</template>

<script>
    export default {
        ...
        methods: {
            handleShowPopup() {
                let $el = this.$vpopup({
                    type: 'ios',
                    title: '标题',
                    content: '弹窗内容信息，弹窗内容信息！',
                    anim: 'scaleIn',
                    shadeClose: false,
                    xclose: true,
                    onOpen: () => {
                        console.log('vpopup is opened！')
                    },
                    btns: [
                        {text: '取消'},
                        {
                            text: '确定',
                            style: 'color:#00e0a1',
                            click: () => {
                                $el.close()
                            }
                        }
                    ]
                });
            }
        }
    }
</script>

<!-- msg提示 -->
<v-popup v-model="showMsg" anim="fadeIn" content="msg提示框测试（3s后窗口关闭）" shadeClose="false" time="3" />

<!-- msg提示（自定义背景） -->
<v-popup v-model="showMsgBg" anim="footer" content="自定义背景颜色" shade="false" time="2" 
    popup-style="background:rgba(0,0,0,.6);color:#fff;"
/>

<!-- ActionSheet底部弹出式菜单 -->
<v-popup v-model="showActionSheet" anim="footer" type="actionsheet" :z-index="2020"
    content="弹窗内容，告知当前状态、信息和解决方法，描述文字尽量控制在三行内"
    :btns="[
        {text: '拍照', style: 'color:#09f;', disabled: true, click: handleInfo},
        {text: '从手机相册选择', style: 'color:#00e0a1;', click: handleInfo},
        {text: '保存图片', style: 'color:#e63d23;', click: () => null},
        {text: '取消', click: () => showActionSheet=false},
    ]"
/>

<!-- 底部对话框 -->
<v-popup v-model="showFooter" anim="footer" type="footer" :shadeClose="false" z-index="8080"
    content="确定删除该条数据吗？删除后可在7天之内恢复数据，超过7天后数据就无法恢复啦！"
    :btns="[
        {text: '恢复', style: 'color:#00e0a1;', click: handleInfo},
        {text: '删除', style: 'color:#ee0a24;', click: () => null},
        {text: '取消', style: 'color:#a9a9a9;', click: () => showFooter=false},
    ]"
/>

<!-- Toast弹窗 -->
<v-popup v-model="showToast" type="toast" icon="loading" time="5" content="加载中..." />
<v-popup v-model="showToast" type="toast" icon="success" shade="false" time="3" content="成功提示" />
<v-popup v-model="showToast" type="toast" icon="fail" shade="false" time="3" content="失败提示" />

<!-- Android样式1 -->
<v-popup v-model="showAndroid1" type="android" shadeClose="false" xclose title="标题内容" z-index="2001"
    content="弹窗内容，告知当前状态、信息和解决方法，描述文字尽量控制在三行内"
    :btns="[
        {text: '知道了', click: () => showAndroid1=false},
        {text: '确定', style: 'color:#00e0a1;', click: handleInfo},
    ]"
>
</v-popup>