基于Vue.js+Nuxt開發(fā)自定義彈出層組件
更新時間：2020年10月09日 17:34:34 作者：xiaoyan_2018
這篇文章主要介紹了基于Vue.js+Nuxt開發(fā)自定義彈出層組件,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
今天給大家分享VPopup 基于Vue.js構建的輕量級移動端彈出框組件，詳情如下所示：
一款融合了Vant、NutUI等熱門Vue組件庫中的Popup彈層、Dialog對話框、Toast提示框、ActionSheet動作面板框、Notify通知框等功能。
快速使用
在main.js中引入組件
// 引入彈窗Popup import Popup from './components/popup' Vue.use(Popup)
支持如下兩種 組件式 及 函數(shù)式 調用插件。
組件式
<template>
<view id="root">
...
<!-- 彈窗模板 -->
<v-popup
v-model="showDialog"
anim="scaleIn"
title="標題"
content="這里顯示彈出框內容！"
shadeClose="false"
xclose
:btns="[
{...},
{...},
]"
/>
</view>
</template>
函數(shù)式
<script>
export default {
...
methods: {
handleShowDialog() {
let $el = this.$vpopup({
title: '標題',
content: '這里顯示彈出框內容！',
anim: 'scaleIn',
shadeClose: false,
xclose: true,
onClose: () => {
console.log('vpopup is closed！')
},
btns: [
{text: '關閉'},
{
text: '確定',
style: 'color:#00e0a1',
click: () => {
$el.close()
}
}
]
});
}
}
}
</script>
在實際項目開發(fā)中，大家可根據(jù)需要自行選擇調用。
msg信息提示
<script>
export default {
...
methods: {
handleShowDialog() {
let $el = this.$vpopup({
title: '標題',
content: '這里顯示彈出框內容！',
anim: 'scaleIn',
shadeClose: false,
xclose: true,
onClose: () => {
console.log('vpopup is closed！')
},
btns: [
{text: '關閉'},
{
text: '確定',
style: 'color:#00e0a1',
click: () => {
$el.close()
}
}
]
});
}
}
}
</script>
ActionSheet動作面板框
<!-- ActionSheet底部彈出式菜單 -->
<v-popup v-model="showActionSheet" anim="footer" type="actionsheet" :z-index="1011"
content="彈窗內容，告知當前狀態(tài)、信息和解決方法，描述文字盡量控制在三行內"
: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},
]"
/>
IOS風格彈窗
<!-- Ios風格樣式 -->
<v-popup v-model="showIos1" type="ios" shadeClose="false" title="標題內容" z-index="1990"
content="彈窗內容，告知當前狀態(tà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ù)往下看實現(xiàn)過程吧😀
彈窗參數(shù)配置
彈窗支持如下參數(shù)配置，大家根據(jù)需要自行組合搭配使用。
@@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 彈窗自動關閉秒數(shù)（1、2、3） zIndex 彈窗層疊（默認8080） btns 彈窗按鈕（參數(shù)：text|style|disabled|click） @@$emit ------------------------------------------ open 打開彈出層時觸發(fā)（@open="xxx"） close 關閉彈出層時觸發(fā)（@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>
通過監(jiān)聽組件傳過來的v-model值調用open和close方法。
watch: {
value(val) {
const type = val ? 'open' : 'close';
this[type]();
},
},
另外還支持右鍵彈窗/長按彈窗及自定義插槽內容。
<!-- 組件調用 -->
<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>
如果想通過函數(shù)式調用組件，需要用到Vue.extend擴展構造器來實現(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;
這樣就實現(xiàn)了在Vue原型 prototype 上掛載 $vpopup 方法及注冊 v-popup 組件。
設置圓角及關閉按鈕
設置round、xclose即可，另外可以配置xposition來設置關閉按鈕位置。
設置按鈕禁用狀態(tài)
設置disabled: true 可禁用按鈕事件。
Okay，基于Vue.js+Nuxt開發(fā)自定義彈出層組件就介紹到這里。目前VPopup正在Nuxt新項目中使用，屆時也會分享出來。
最后附上最近兩個實例項目
基于vue+uniapp直播項目實現(xiàn)uni-app仿抖音/陌陌直播室功能
到此這篇關于基于Vue.js+Nuxt開發(fā)自定義彈出層組件的文章就介紹到這了,更多相關Vue+Nuxt自定義彈窗內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
ios密碼框輸入密碼光標離開之后會提示存儲密碼的彈窗,關于這樣的問題怎么解決呢,下面給大家分享IOS上微信小程序密碼框光標離開提示存儲密碼的完美解決方案,感興趣的朋友一起看看吧2024-07-07
vue如何使用vant組件的field組件disabled修改默認樣式
這篇文章主要介紹了vue如何使用vant組件的field組件disabled修改默認樣式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
這篇文章主要介紹了Vue的組件間傳值(包括Vuex)，全文通過舉例子及代碼的形式進行了一個簡單的介紹，希望大家能夠理解并且學習到其中知識2021-08-08
這篇文章主要給大家介紹了關于vscode下vue項目中eslint的使用方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-01-01
詳解如何實現(xiàn)Element樹形控件Tree在懶加載模式下的動態(tài)更新
這篇文章主要介紹了詳解如何實現(xiàn)Element樹形控件Tree在懶加載模式下的動態(tài)更新，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-04-04
這篇文章主要為大家詳細介紹了vue實現(xiàn)頭像上傳功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
這篇文章主要介紹了vue中使用GraphQL的實例代碼,本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2019-11-11
這篇文章主要介紹了Vue3.0在組件外使用VueI18n的情況，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
要在Vue?3和Electron中實現(xiàn)本地化,可以使用類似于在Vue項目中進行本地化的方式,本文為大家介紹了一種常見的做法,希望對大家有所幫助2024-03-03
這篇文章主要介紹了vue更改數(shù)組中的值，本文通過兩個例子，給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2020-02-02