今天給大家分享VPopup 基于Vue.js構(gòu)建的輕量級移動端彈出框組件，詳情如下所示：

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

快速使用

在main.js中引入組件

// 引入彈窗Popupimport Popup from ’./components/popup’Vue.use(Popup)

支持如下兩種 組件式 及 函數(shù)式 調(diào)用插件。

組件式

<template> <view id='root'> ... <!-- 彈窗模板 --> <v-popup v-model='showDialog' anim='scaleIn' content='這里顯示彈出框內(nèi)容！' shadeClose='false' xclose :btns='[ {...}, {...}, ]' /> </view></template>

函數(shù)式

<script> export default { ... methods: { handleShowDialog() { let $el = this.$vpopup({ title: ’標(biāo)題’, content: ’這里顯示彈出框內(nèi)容！’, anim: ’scaleIn’, shadeClose: false, xclose: true, onClose: () => { console.log(’vpopup is closed！’) }, btns: [ {text: ’關(guān)閉’}, { text: ’確定’, style: ’color:#00e0a1’, click: () => { $el.close() } } ] }); } } }</script>

在實(shí)際項(xiàng)目開發(fā)中，大家可根據(jù)需要自行選擇調(diào)用。

msg信息提示

<script> export default { ... methods: { handleShowDialog() { let $el = this.$vpopup({ title: ’標(biāo)題’, content: ’這里顯示彈出框內(nèi)容！’, anim: ’scaleIn’, shadeClose: false, xclose: true, onClose: () => { console.log(’vpopup is closed！’) }, btns: [ {text: ’關(guān)閉’}, { text: ’確定’, style: ’color:#00e0a1’, click: () => { $el.close() } } ] }); } } }</script>

ActionSheet動作面板框

<!-- ActionSheet底部彈出式菜單 --><v-popup v-model='showActionSheet' anim='footer' type='actionsheet' :z-index='1011' content='彈窗內(nèi)容，告知當(dāng)前狀態(tài)、信息和解決方法，描述文字盡量控制在三行內(nèi)' :btns='[ {text: ’拍照’, style: ’color:#09f;’, disabled: true, click: handleInfo}, {text: ’從手機(jī)相冊選擇’, style: ’color:#00e0a1;’, click: handleInfo}, {text: ’保存圖片’, style: ’color:#e63d23;’, click: () => null}, {text: ’取消’, click: () => showActionSheet=false}, ]'/>

IOS風(fēng)格彈窗

<!-- Ios風(fēng)格樣式 --><v-popup v-model='showIos1' type='ios' shadeClose='false' z-index='1990'content='彈窗內(nèi)容，告知當(dāng)前狀態(tài)、信息和解決方法，描述文字盡量控制在三行內(nèi)':btns='[{text: ’知道了’, click: () => showIos1=false},{text: ’確定’, style: ’color:#00e0a1;’, click: handleInfo},]'></v-popup>

Toast加載提示框

<!-- 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='失敗提示' />

emmm~~ 看了如上效果，是不是覺得還不錯(cuò)喲！那就繼續(xù)往下看實(shí)現(xiàn)過程吧😀

彈窗參數(shù)配置

彈窗支持如下參數(shù)配置，大家根據(jù)需要自行組合搭配使用。

@@Props------------------------------------------v-model 當(dāng)前組件是否顯示title 標(biāo)題content 內(nèi)容（支持自定義插槽內(nèi)容）type 彈窗類型（toast | footer | actionsheet | actionsheetPicker | android/ios）popupStyle 自定義彈窗樣式icon toast圖標(biāo)（loading | success | fail）shade 是否顯示遮罩層shadeClose 是否點(diǎn)擊遮罩時(shí)關(guān)閉彈窗opacity 遮罩層透明度round 是否顯示圓角xclose 是否顯示關(guān)閉圖標(biāo)xposition 關(guān)閉圖標(biāo)位置（left | right | top | bottom）xcolor 關(guān)閉圖標(biāo)顏色anim 彈窗動畫（scaleIn | fadeIn | footer | fadeInUp | fadeInDown）position 彈出位置（top | right | bottom | left）follow 長按/右鍵彈窗（坐標(biāo)點(diǎn)）time 彈窗自動關(guān)閉秒數(shù)（1、2、3）zIndex 彈窗層疊（默認(rèn)8080）btns 彈窗按鈕（參數(shù)：text|style|disabled|click） @@$emit------------------------------------------open 打開彈出層時(shí)觸發(fā)（@open='xxx'）close 關(guān)閉彈出層時(shí)觸發(fā)（@close='xxx'） @@Event------------------------------------------onOpen 打開彈窗回調(diào)onClose 關(guān)閉彈窗回調(diào)

彈窗template模板

<template> <div v-show='opened' : :id='id'> <div v-if='JSON.parse(shade)' @click='shadeClicked' :style='{opacity}'></div> <div class='nuxt__wrap'> <div class='nuxt__wrap-section'> <div : :style='popupStyle'> <div v-if='title' v-html='title'></div> <div v-if='type==’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' v-html='content'></div></template> <slot /> <div v-if='btns' class='nuxt__wrap-btns'> <span v-for='(btn,index) in btns' :key='index' : v-html='btn.text'></span> </div> <span v-if='xclose' : : @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++; } // 倒計(jì)時(shí)關(guān)閉 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’; }); } }, // 關(guān)閉彈窗 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; }, // 獲取彈窗坐標(biāo)點(diǎn) 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>

通過監(jiān)聽組件傳過來的v-model值調(diào)用open和close方法。

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

另外還支持右鍵彈窗/長按彈窗及自定義插槽內(nèi)容。

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

如果想通過函數(shù)式調(diào)用組件，需要用到Vue.extend擴(kuò)展構(gòu)造器來實(shí)現(xiàn)。

import Vue from ’vue’;import VuePopup from ’./popup.vue’; let PopupConstructor = Vue.extend(VuePopup); let $instance; let VPopup = function(options = {}) { // 同一個(gè)頁面中，id相同的Popup的DOM只會存在一個(gè) 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;

這樣就實(shí)現(xiàn)了在Vue原型 prototype 上掛載 $vpopup 方法及注冊 v-popup 組件。

設(shè)置圓角及關(guān)閉按鈕

設(shè)置round、xclose即可，另外可以配置xposition來設(shè)置關(guān)閉按鈕位置。

設(shè)置按鈕禁用狀態(tài)

設(shè)置disabled: true 可禁用按鈕事件。

Okay，基于Vue.js+Nuxt開發(fā)自定義彈出層組件就介紹到這里。目前VPopup正在Nuxt新項(xiàng)目中使用，屆時(shí)也會分享出來。

最后附上最近兩個(gè)實(shí)例項(xiàng)目

基于vue+uniapp直播項(xiàng)目實(shí)現(xiàn)uni-app仿抖音/陌陌直播室功能

react native 仿微信聊天室實(shí)例代碼

到此這篇關(guān)于基于Vue.js+Nuxt開發(fā)自定義彈出層組件的文章就介紹到這了,更多相關(guān)Vue+Nuxt自定義彈窗內(nèi)容請搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！