最近趁着国庆假期给自己充充电，一直在捣鼓Nuxt.js项目，由于项目中需要用到定制化弹窗功能，本来是想着使用Vant组件库，经过再三考虑，最后决定还是自己重新造一个，于是就有了Vue自定义弹出层VPopup。
vpopup 汇合了有赞Vant、京东NutUI等Vue组件库中的 Msg信息框、Popup弹层、Dialog对话框、Toast提示框、ActionSheet动作面板框、Notify通知框 等功能。
快速开始
在main.js中引入组件// 引入弹窗Popupimport Popup from './components/popup';Vue.use(Popup);标签式调用
<view id="demo"> ... <v-popup v-model="showPopup" anim="fadeIn" title="标题内容" content="弹窗内容，描述文字尽量控制在三行内！" shadeClose="false" xclose :btns="[ {...}, {...}, ]" /> view>template>函数式调用
<script> export default { ... methods: { handleShowPopup() { let $el = this.$vpopup({ title: '标题内容', content: '弹窗内容，描述文字尽量控制在三行内！', anim: 'fadeIn', shadeClose: false, xclose: true, onClose: () => { console.log('vpopup is closed！') }, btns: [ {text: '取消'}, { text: '确定', style: 'color:#00a0f1', click: () => { $el.close() } } ] }); } } }script>
- 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="3" popup-style="background:rgba(0,0,0,.6);color:#fff;"/><v-popup v-model="showConfirm" shadeClose="false" title="警告信息" xclose z-index="2001" content="确认框(这里是确认框提示信息)
" :btns="[ {text: '取消', click: () => showConfirm=false}, {text: '确定', style: 'color:#e63d23;', click: handleInfo}, ]"/>
- IOS弹窗效果
<v-popup v-model="showIos1" type="ios" shadeClose="false" title="标题内容" z-index="1001" content="弹窗内容，描述文字尽量控制在三行内" :btns="[ {text: '知道了', click: () => showIos1=false}, {text: '确定', style: 'color:#00e0a1;', click: handleInfo}, ]">v-popup>- 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="失败提示" />- ActionSheet底部面板框
<v-popup v-model="showFooter" anim="footer" type="footer" :shadeClose="false" z-index="1001" content="确定删除该条数据吗？删除后可在7天之内恢复数据，超过7天后数据就无法恢复啦！" :btns="[ {text: '恢复', style: 'color:#00e0a1;', click: handleInfo}, {text: '删除', style: 'color:#ee0a24;', click: () => null}, {text: '取消', style: 'color:#a9a9a9;', click: () => showFooter=false}, ]"/><v-popup v-model="showActionPicker" anim="footer" type="actionsheetPicker" round title="标题内容" :btns="[ {text: '取消', click: () => showActionPicker=false}, {text: '确定', style: 'color:#00e0a1;', click: () => null}, ]"> <ul class="goods-list" style="padding:50px;text-align:center;"> <li>双肩包li> <li>鞋子li> <li>运动裤li> ul>v-popup>okey，这里不一一贴示例代码了。往下看具体实现过程哈~~
实现方式
参数配置：
@@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 关闭弹窗回调弹窗模板：
"opened" class="nuxt__popup" :class="{'nuxt__popup-closed': closeCls}" :id="id">
if="JSON.parse(shade)" class="nuxt__overlay" @click="shadeClicked" :style="{opacity}"> class="nuxt__wrap"> class="nuxt__wrap-section"> class="nuxt__wrap-child" :class="['anim-'+anim, type&&'popui__'+type, round&&'round', position]" :style="popupStyle"> if="title" class="nuxt__wrap-tit" v-html="title"> if="type=='toast'&&icon" class="nuxt__toast-icon" :class="['nuxt__toast-'+icon]" v-html="toastIcon[icon]"> if="$slots.content">class="nuxt__wrap-cnt">"content" /> else>if="content" class="nuxt__wrap-cnt" v-html="content"> if="btns" class="nuxt__wrap-btns"> for="(btn,index) in btns" :key="index" class="btn" :style="btn.style" v-html="btn.text"> if="xclose" class="nuxt__xclose" :class="xposition" :style="{'color': xcolor}" @click="close"> /** * @Desc VueJs自定义弹窗组件VPopup * @Time andy by 2020-10-06 */ 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]; } }, }组件通过监听传过来的 v-model 值来调用open和close方法。
watch: { value(val) { const type = val ? 'open' : 'close'; this[type](); },},
<v-popup v-model="showContextMenu2" type="contextmenu" :follow="followPos" opacity="0" :btns="[ {text: '标为未读', click: handleContextPopup}, {text: '消息免打扰'}, {text: '置顶聊天'}, {text: '删除', click: () => showContextMenu2=false}, ]"/>函数式调用
组件通过 Vue.extend 扩展实例构造器来实现函数式调用方式。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;通过如上方法就实现了把 $vpopup 方法挂载到Vue原型上并注册 v-popup 组件。
就可以愉快的使用 this.$vpopup({...}) 函数来进行调用。
好了，基于Vue开发自定义弹窗就介绍到这里。希望对大家有所帮助！
2865
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
