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

時間 2020-10-16

標籤 html vue android ios 微信 app svg 函數測試動畫欄目 iOS 简体版

原文原文鏈接

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

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

用法

▍在main.js中引入vpopup組件android

import Popup from './components/popup' ios

Vue.use(Popup) 微信

vpopup支持標籤式及函數式調用方式。app

標籤式

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

函數式

經過 this.$vpopup({...options}) 方式調用便可，函數會返回彈窗實例。svg

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

so nice，看到了這裏，是否是感受還行！這但是犧牲了一點國慶假期倒騰出來的 😀測試

還有一些效果這裏就不一一貼上演示代碼了。動畫

vpopup彈窗實現

默認參數配置

@@Props
------------------------------------------
v-model     當前組件是否顯示
title       標題
content     內容（支持自定義插槽內容）
type        彈窗類型（toast | footer | actionsheet | actionsheetPicker | android/ios）
popupStyle  自定義彈窗樣式
icon        toast圖標（loading | success | fail）
shade       是否顯示遮罩層
shadeClose  是否點擊遮罩時關閉彈窗
opacity     遮罩層透明度
round       是否顯示圓角
xclose      是否顯示關閉圖標
xposition   關閉圖標位置（left | right | top | bottom）
xcolor      關閉圖標顏色
anim        彈窗動畫（scaleIn | fadeIn | footer | fadeInUp | fadeInDown）
position    彈出位置（top | right | bottom | left）
follow      長按/右鍵彈窗（座標點）
time        彈窗自動關閉秒數（一、二、3）
zIndex      彈窗層疊（默認8080）
btns        彈窗按鈕（參數：text|style|disabled|click）

@@$emit
------------------------------------------
open        打開彈出層時觸發（@open="xxx"）
close       關閉彈出層時觸發（@close="xxx"）

@@Event
------------------------------------------
onOpen      打開彈窗回調
onClose     關閉彈窗回調

彈窗模板template

<template>
  <div v-show="opened" class="nuxt__popup" :class="{'nuxt__popup-closed': closeCls}" :id="id">
    <div v-if="JSON.parse(shade)" class="nuxt__overlay" @click="shadeClicked" :style="{opacity}"></div>
    <div class="nuxt__wrap">
      <div class="nuxt__wrap-section">
        <div class="nuxt__wrap-child" :class="['anim-'+anim, type&&'popui__'+type, round&&'round', position]" :style="popupStyle">
          <div v-if="title" class="nuxt__wrap-tit" v-html="title"></div>
          <div v-if="type=='toast'&&icon" class="nuxt__toast-icon" :class="['nuxt__toast-'+icon]" v-html="toastIcon[icon]"></div>
          <template v-if="$slots.content"><div class="nuxt__wrap-cnt"><slot name="content" /></div></template>
          <template v-else><div v-if="content" class="nuxt__wrap-cnt" v-html="content"></div></template>
          <slot />
          <div v-if="btns" class="nuxt__wrap-btns">
            <span v-for="(btn,index) in btns" :key="index" class="btn" :style="btn.style" v-html="btn.text"></span>
          </div>
          <span v-if="xclose" class="nuxt__xclose" :class="xposition" :style="{'color': xcolor}" @click="close"></span>
        </div>
      </div>
    </div>
  </div>
</template>

/**
 * @Desc     VueJs自定義彈窗組件VPopup
 * @Time     andy by 2020-10-06
 * @About    Q：282310962  wx：xy190310
 */
<script>
  let $index = 0, $lockCount = 0, $timer = {};
  export default {
    props: {
      ...
    },
    data() {
      return {
        opened: false,
        closeCls: '',
        toastIcon: {
          ...
        }
      }
    },
    watch: {
      value(val) {
        const type = val ? 'open' : 'close';
        this[type]();
      },
    },
    methods: {
      // 打開彈窗
      open() {
        if(this.opened) return;
        this.opened = true;
        this.$emit('open');
        typeof this.onOpen === 'function' && this.onOpen();
        
        if(JSON.parse(this.shade)) {
          if(!$lockCount) {
            document.body.classList.add('nt-overflow-hidden');
          }
          $lockCount++;
        }
        
        // 倒計時關閉
        if(this.time) {
          $index++;
          if($timer[$index] !== null) clearTimeout($timer[$index])
          $timer[$index] = setTimeout(() => {
            this.close();
          }, parseInt(this.time) * 1000);
        }
        
        if(this.follow) {
          this.$nextTick(() => {
            let obj = this.$el.querySelector('.nuxt__wrap-child');
            let oW, oH, winW, winH, pos;

            oW = obj.clientWidth;
            oH = obj.clientHeight;
            winW = window.innerWidth;
            winH = window.innerHeight;
            pos = this.getPos(this.follow[0], this.follow[1], oW, oH, winW, winH);

            obj.style.left = pos[0] + 'px';
            obj.style.top = pos[1] + 'px';
          });
        }
      },
      // 關閉彈窗
      close() {
        if(!this.opened) return;
        
        this.closeCls = true;
        setTimeout(() => {
          this.opened = false;
          this.closeCls = false;
          if(JSON.parse(this.shade)) {
            $lockCount--;
            if(!$lockCount) {
              document.body.classList.remove('nt-overflow-hidden');
            }
          }
          if(this.time) {
            $index--;
          }
          this.$emit('input', false);
          this.$emit('close');
          typeof this.onClose === 'function' && this.onClose();
        }, 200);
      },
      shadeClicked() {
        if(JSON.parse(this.shadeClose)) {
          this.close();
        }
      },
      btnClicked(e, index) {
        let btn = this.btns[index];
        if(!btn.disabled) {
          typeof btn.click === 'function' && btn.click(e)
        }
      },
      getZIndex() {
        for(var $idx = parseInt(this.zIndex), $el = document.getElementsByTagName('*'), i = 0, len = $el.length; i < len; i++)
          $idx = Math.max($idx, $el[i].style.zIndex)
        return $idx;
      },
      // 獲取彈窗座標點
      getPos(x, y, ow, oh, winW, winH) {
        let l = (x + ow) > winW ? x - ow : x;
        let t = (y + oh) > winH ? y - oh : y;
        return [l, t];
      }
    },
  }
</script>

經過Vue.extend擴展實例構造器函數來實現函數式調用。

import Vue from 'vue';
import VuePopup from './popup.vue';

let PopupConstructor = Vue.extend(VuePopup);

let $instance;

let VPopup = function(options = {}) {
    // 同一個頁面中，id相同的Popup的DOM只會存在一個
    options.id = options.id || 'nuxt-popup-id';
    $instance = new PopupConstructor({
        propsData: options
    });
    $instance.vm = $instance.$mount();
    
    let popupDom = document.querySelector('#' + options.id);
    if(options.id && popupDom) {
        popupDom.parentNode.replaceChild($instance.$el, popupDom);
    } else {
        document.body.appendChild($instance.$el);
    }

    Vue.nextTick(() => {
        $instance.value = true;
    })
    
    return $instance;
}

VPopup.install = () => {
    Vue.prototype['$vpopup'] = VPopup;
    Vue.component('v-popup', VuePopup);
}

export default VPopup;

這樣就實現了在Vue的 prototype 上掛載 $vpopup 方法及註冊 v-popup 組件了。

另外還支持自定義slot插槽內容，當content和自定義插槽內容同時存在，只會顯示插槽內容。

<!-- 組件調用 -->
<v-popup v-model="showComponent" xclose xposition="bottom" :shadeClose="false" content="這裏是內容信息"
    :btns="[
        {text: '確認', style: 'color:#f60;', click: () => showComponent=false},
    ]"
    @open="handleOpen" @close="handleClose"
>
    <template #content><b style="color:#00e0a1;">當 content 和 自定義插槽 內容同時存在，只顯示插槽內容！！！</b></template>
    <!-- <div slot="content">顯示自定義插槽內容！</div> -->
    <div style="padding:30px 15px;">
        <img src="https://img.yzcdn.cn/vant/apple-3.jpg" style="width:100%;" @click="handleContextPopup" />
    </div>
</v-popup>