基于Vue.js+Nuxt開發(fā)自定義彈出層組件
更新時間：2020年10月09日 17:34:34 作者：xiaoyan_2018
這篇文章主要介紹了基于Vue.js+Nuxt開發(fā)自定義彈出層組件,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
今天給大家分享VPopup 基于Vue.js構(gòu)建的輕量級移動端彈出框組件，詳情如下所示：
一款融合了Vant、NutUI等熱門Vue組件庫中的Popup彈層、Dialog對話框、Toast提示框、ActionSheet動作面板框、Notify通知框等功能。
快速使用
在main.js中引入組件
// 引入彈窗Popup import Popup from './components/popup' Vue.use(Popup)
支持如下兩種 組件式 及 函數(shù)式 調(diào)用插件。
組件式
<template>
<view id="root">
...
<!-- 彈窗模板 -->
<v-popup
v-model="showDialog"
anim="scaleIn"
title="標(biāo)題"
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" title="標(biāo)題內(nèi)容" 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~~ 看了如上效果，是不是覺得還不錯喲！那就繼續(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)擊遮罩時關(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 打開彈出層時觸發(fā)（@open="xxx"） close 關(guān)閉彈出層時觸發(fā)（@close="xxx"） @@Event ------------------------------------------ onOpen 打開彈窗回調(diào) onClose 關(guān)閉彈窗回調(diào)
彈窗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++;
}
// 倒計時關(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)容同時存在，只顯示插槽內(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" style="width:100%;" @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 = {}) {
// 同一個頁面中，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;
這樣就實(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í)例項(xiàng)目
基于vue+uniapp直播項(xiàng)目實(shí)現(xiàn)uni-app仿抖音/陌陌直播室功能
到此這篇關(guān)于基于Vue.js+Nuxt開發(fā)自定義彈出層組件的文章就介紹到這了,更多相關(guān)Vue+Nuxt自定義彈窗內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue2中無法監(jiān)聽數(shù)組和對象的某些變化問題
這篇文章主要介紹了Vue2中無法監(jiān)聽數(shù)組和對象的某些變化問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
Vue源碼學(xué)習(xí)之響應(yīng)式是如何實(shí)現(xiàn)的
最近接觸了vue.js,一度非常好奇vue.js是如何監(jiān)測數(shù)據(jù)更新并且重新渲染頁面,這篇文章主要給大家介紹了關(guān)于Vue源碼學(xué)習(xí)之響應(yīng)式是如何實(shí)現(xiàn)的相關(guān)資料,需要的朋友可以參考下2021-10-10
這篇文章主要介紹了vue 微信掃碼登錄(自定義樣式)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-01-01
這篇文章主要為大家詳細(xì)介紹了vue?extend+promise封裝全局彈窗組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
vue router使用query和params傳參的使用和區(qū)別
本篇文章主要介紹了vue router使用query和params傳參的使用和區(qū)別，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
這篇文章主要介紹了vue請求后端數(shù)據(jù)和跨域問題,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-05-05
vue router 跳轉(zhuǎn)后回到頂部的實(shí)例
今天小編就為大家分享一篇vue router 跳轉(zhuǎn)后回到頂部的實(shí)例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
vue實(shí)現(xiàn)全匹配搜索列表內(nèi)容
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)全匹配搜索列表內(nèi)容，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-09-09
這篇文章主要為大家介紹了vue的Des加密解密使用實(shí)例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
這篇文章主要為大家詳細(xì)介紹了vue更多篩選項(xiàng)小組件的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-06-06