基于Vue.js+Nuxt開發自定義彈出層組件

    今天給大家分享VPopup 基于Vue.js構建的輕量級移動端彈出框組件,詳情如下所示:

    一款融合了Vant、NutUI等熱門Vue組件庫中的Popup彈層、Dialog對話框、Toast提示框、ActionSheet動作面板框、Notify通知框等功能。愛掏網 - it200.com

    快速使用

    在main.js中引入組件

    // 引入彈窗Popup
    import Popup from './components/popup'
    Vue.use(Popup)

    支持如下兩種 組件式 及 函數式 調用插件。愛掏網 - it200.com

    組件式

    函數式

    
    
    

    在實際項目開發中,大家可根據需要自行選擇調用。愛掏網 - it200.com

    msg信息提示

    
    
    

    ActionSheet動作面板框

    
    

    IOS風格彈窗

    
    

    Toast加載提示框

    
    

    emmm~~ 看了如上效果,是不是覺得還不錯喲!那就繼續往下看實現過程吧😀

    彈窗參數配置

    彈窗支持如下參數配置,大家根據需要自行組合搭配使用。愛掏網 - it200.com

    @@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 彈窗自動關閉秒數(1、2、3)
    zIndex 彈窗層疊(默認8080)
    btns 彈窗按鈕(參數:text|style|disabled|click)
     
    @@$emit
    ------------------------------------------
    open 打開彈出層時觸發(@open="xxx")
    close 關閉彈出層時觸發(@close="xxx")
     
    @@Event
    ------------------------------------------
    onOpen 打開彈窗回調
    onClose 關閉彈窗回調

    彈窗template模板

    /**
     * @Desc VueJs自定義彈窗組件VPopup
     * @Time andy by 2024-10-06
     * @About Q:282310962 wx:xy190310
     */
    

    通過監聽組件傳過來的v-model值調用open和close方法。愛掏網 - it200.com

    watch: {
    	value(val) {
    		const type = val ? 'open' : 'close';
    		this[type]();
    	},
    },

    另外還支持右鍵彈窗/長按彈窗自定義插槽內容。愛掏網 - it200.com

    
    
     
    
    

    如果想通過函數式調用組件,需要用到Vue.extend擴展構造器來實現。愛掏網 - it200.com

    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 組件。愛掏網 - it200.com

    設置圓角及關閉按鈕

    設置round、xclose即可,另外可以配置xposition來設置關閉按鈕位置。愛掏網 - it200.com

    設置按鈕禁用狀態

    設置disabled: true 可禁用按鈕事件。愛掏網 - it200.com

    Okay,基于Vue.js+Nuxt開發自定義彈出層組件就介紹到這里。愛掏網 - it200.com目前VPopup正在Nuxt新項目中使用,屆時也會分享出來。愛掏網 - it200.com

    最后附上最近兩個實例項目

    基于vue+uniapp直播項目實現uni-app仿抖音/陌陌直播室功能

    react native 仿微信聊天室實例代碼

    到此這篇關于基于Vue.js+Nuxt開發自定義彈出層組件的文章就介紹到這了,更多相關Vue+Nuxt自定義彈窗內容請搜索以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持!


    聲明:所有內容來自互聯網搜索結果,不保證100%準確性,僅供參考。如若本站內容侵犯了原著者的合法權益,可聯系我們進行處理。
    發表評論
    更多 網友評論0 條評論)
    暫無評論

    返回頂部

    主站蜘蛛池模板: 精品一区二区三区3d动漫| av无码一区二区三区| 国产拳头交一区二区| 男人的天堂av亚洲一区2区| 国产日产久久高清欧美一区| 内射少妇一区27P| 一区二区三区精密机械| 一区二区三区国产| 一区五十路在线中出| 一区二区免费国产在线观看| 人妻体体内射精一区二区| 国产av成人一区二区三区| 国产精品一区二区久久乐下载| 日本内射精品一区二区视频| 一区二区日韩国产精品| 日韩一区二区三区免费播放| 午夜视频久久久久一区 | 伊人色综合网一区二区三区| 日本伊人精品一区二区三区| 三上悠亚亚洲一区高清| 99在线精品一区二区三区| 久久亚洲日韩精品一区二区三区| 波多野结衣在线观看一区| 国产在线观看一区二区三区四区| 亚洲一区免费视频| 无码人妻一区二区三区免费| 91在线精品亚洲一区二区| 国产91精品一区二区麻豆网站 | 福利一区福利二区| 亚洲一区精品伊人久久伊人| 亚洲视频在线一区二区| 国产一区二区三区在线看片| 日本免费一区尤物| 蜜桃视频一区二区三区| 亚洲国产精品一区二区第一页免 | 精品一区二区三区在线观看l| 精品久久综合一区二区| 日韩毛片一区视频免费| 国产经典一区二区三区蜜芽| 亚洲一区二区三区在线播放| 久久无码人妻精品一区二区三区|