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

更新時(shí)間：2020年10月09日 17:34:34 作者：xiaoyan_2018

這篇文章主要介紹了基于Vue.js+Nuxt開發(fā)自定義彈出層組件,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

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

一款融合了Vant、NutUI等熱門Vue組件庫(kù)中的Popup彈層、Dialog對(duì)話框、Toast提示框、ActionSheet動(dòng)作面板框、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動(dòng)作面板框

<!-- 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ī)相冊(cè)選擇', 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~~ 看了如上效果，是不是覺得還不錯(cuò)喲！那就繼續(xù)往下看實(shí)現(xiàn)過(guò)程吧😀

彈窗參數(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 彈窗動(dòng)畫（scaleIn | fadeIn | footer | fadeInUp | fadeInDown）
position 彈出位置（top | right | bottom | left）
follow 長(zhǎng)按/右鍵彈窗（坐標(biāo)點(diǎn)）
time 彈窗自動(dòng)關(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" 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++;
 }
 
 // 倒計(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>

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

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

另外還支持右鍵彈窗/長(zhǎng)按彈窗及自定義插槽內(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" style="width:100%;" @click="handleContextPopup" />
 </div>
</v-popup>

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

import Vue from 'vue';
import VuePopup from './popup.vue';
 
let PopupConstructor = Vue.extend(VuePopup);
 
let $instance;
 
let VPopup = function(options = {}) {
 // 同一個(gè)頁(yè)面中，id相同的Popup的DOM只會(huì)存在一個(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 方法及注冊(cè) v-popup 組件。

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

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