Vue自定義Popup彈窗元件|vue仿ios、微信彈窗|vue右鍵彈層

阿新 • • 發佈：2020-10-07

基於vue.js構建的輕量級Vue移動端彈出框元件Vpopup

vpopup 匯聚了有贊Vant、京東NutUI等Vue元件庫的Msg訊息框、Popup彈層、Dialog對話方塊、Toast弱提示、ActionSheet動作面板框、Notify通知框等功能。

用法

▍在main.js中引入vpopup元件

import Popup from './components/popup'

Vue.use(Popup)

vpopup支援標籤式及函式式呼叫方式。

標籤式

<template>
    <view class="demo">
        ...
        
         
<!-- 彈窗模板 -->
        <v-popup 
            v-model="showDialog" 
            type="ios"
            anim="fadeIn" 
            title="標題"
            content="彈窗內容資訊，彈窗內容資訊！" 
            shadeClose="false" 
            xclose
            :btns="[
                {...},
                {...},
            ]" 

        />
    </view>
</template>

函式式

通過 this.$vpopup({...options}) 方式呼叫即可，函式會返回彈窗例項。

<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訊息提示

<!-- 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及footer動作面板框

<!-- 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弱提示框（loading | success | info三種svg圖示）

<!-- 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/微信彈窗效果

<!-- 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>