前言
最近趁着国庆假期始终在捣鼓 Nuxt.js 我的项目开发,因为我的项目中须要多个中央应用到弹窗性能,鉴于网上的一些组件可能不能很好满足我的项目需要,于是就本人入手开发了个自定义对话框组件 Vpopup。
介绍
VPopup 轻量级挪动端 Vue 弹窗组件。集中交融了有赞 Vant、京东 NutUI 等 Vue 组件库中的 Msg 信息框、Popup 弹层、Dialog 对话框、Toast 提示框、ActionSheet 动作面板框、Notify 告诉框 等性能。
用法
在 main.js 中引入组件
import Popup from './components/popup'
Vue.use(Popup)
反对标签式和函数式两种形式调用组件。
<!-- 标签式调用 -->
<template>
<view id="root">
...
<!-- VPopup 模板 -->
<v-popup
v-model="showDialog"
anim="scaleIn"
title="题目内容"
content="弹窗内容,告知以后状态、信息和解决办法,形容文字尽量管制在三行内!"
shadeClose="false"
xclose
:btns="[{...},
{...},
]"
/>
</view>
</template>
<!-- 函数式调用 -->
<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>
这里能够依据我的项目需要,自行抉择调用形式即可。
- Msg 信息框
<!-- msg 提示框 -->
<v-popup v-model="showMsg" anim="fadeIn" content="msg 提示框测试(3s 后窗口敞开)" shadeClose="false" time="3" />
<v-popup v-model="showMsgBg" anim="footer" content="自定义背景色彩" shade="false" time="2"
popup-style="background:rgba(0,0,0,.6);color:#fff;"
/>
<!-- 询问框 -->
<v-popup v-model="showConfirm" shadeClose="false" title="正告信息" xclose z-index="2001"
content="<div style='color:#00e0a1;padding:20px 40px;'> 确认框(这里是确认框提示信息)</div>"
:btns="[{text: '勾销', click: () => showConfirm=false},
{text: '确定', style: 'color:#e63d23;', click: handleInfo},
]"
/>
- Toast 轻提示框
<!-- Toast 轻提醒弹窗 -->
<v-popup v-model="showToast" type="toast" icon="loading" time="2" content="加载中..." />
<v-popup v-model="showToast" type="toast" icon="success" shade="false" time="2" content="胜利提醒" />
<v-popup v-model="showToast" type="toast" icon="fail" shade="false" time="2" content="失败提醒" />
- 微信 /android 格调弹窗
<!-- Android 格调弹窗 -->
<v-popup v-model="showAndroid1" type="android" shadeClose="false" xclose title="题目内容" z-index="2001"
content="弹窗内容,告知以后状态、信息和解决办法,形容文字尽量管制在三行内"
:btns="[{text: '晓得了', click: () => showAndroid1=false},
{text: '确定', style: 'color:#00e0a1;', click: handleInfo},
]"
>
</v-popup>
- ActionSheet 动作面板弹窗
<!-- ActionSheet 底部菜单 -->
<v-popup v-model="showActionSheet" anim="footer" type="actionsheet" :z-index="1011"
content="弹窗内容,告知以后状态、信息和解决办法,形容文字尽量管制在三行内"
: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},
]"
/>
soga,这里就不一一贴上示例代码了。如果感觉还不错,那就往下看实现过程吧。
实现形式
参数配置
弹窗反对如下参数自定义配置,大家依据须要自行搭配应用。
@@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 敞开弹窗回调
弹窗模板 popup.vue
<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>
通过组件传过来的 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>
通过 Vue.extend 扩大结构器来实现函数式调用 this.$vpopup({…})
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 组件。
好了,基于 Vue+Nuxt 自定义弹窗组件就介绍到这里。目前该组件正在 Nuxt 我的项目中应用,到时也会分享进去。心愿对大家有所帮忙!!????????
最初附上基于 Uniapp+Vue 跨端仿抖音 | 聊天实例我的项目
https://segmentfault.com/a/1190000020972307