xiaoyan2015个人页面-阿里云开发者社区

Vue移动端弹窗组件|Nuxt模态框|Vue仿天猫底部弹出框

一个产品的诞生，必然是有它的应用场景存在！趁着国庆假期也给自己充充电，就使用NuxtJs开发了个实例项目，由于项目中多处需要用到对话框功能，本想着是使用Vant组件，经过再三考虑后，还是决定自己造一个轮子，于是就有了Nuxt自定义弹窗VPopup。说明 VPopup 一个多功能移动端弹框组件。集合了 Vant 及 NutUI 中的 Msg信息框、Popup 弹出层、Notify 通知信息、Dialog 对话框、ActionSheet 动作面板框及 Toast 弱提示框等功能。快速使用引入组件 import Popup from './components/popup' Vue.use(Popup) 标签式使用 <template> <view id="root"> ...  <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> 非常棒的一个Vue弹窗组件。可以说是你想要的效果，基本上是都可以组合搭配实现出来的。参数配置 @@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 关闭弹窗回调弹窗模板 <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> 另外弹窗还支持右键/长按弹窗，自定义slot插槽内容。  <v-popup v-model="showContextMenu2" type="contextmenu" :follow="followPos" opacity="0" :btns="[ {text: '标为未读', click: handleContextPopup}, {text: '消息免打扰'}, {text: '置顶聊天'}, {text: '删除', click: () => showContextMenu2=false}, ]" /> 根据项目需要，任意搭配参数，即可实现想要的效果。 ok，基于Nuxt|Vue开发自定义提示框组件就介绍到这里。希望对大家有所帮助！✍

xiaoyan2015个人页面-阿里云开发者社区

个人介绍

擅长的技术

Vue移动端弹窗组件|Nuxt模态框|Vue仿天猫底部弹出框

h5仿同程、携程、去哪儿酒店预订webapp项目实例

【精】H5移动端webapp开发(快装app)项目案例

HTML5手机端弹窗、提示框、loading加载（多功能xwPop弹窗升级版）

H5css3圆形进度条、css3动画指针旋转特效

Vue移动端弹窗组件|Nuxt模态框|Vue仿天猫底部弹出框

nuxt聊天实例|nuxt.js+vue仿微信界面|朋友圈

Vue|Nuxt移动端仿探探|vue卡片堆叠滑动效果

Vue移动端弹窗组件|Nuxt模态框|Vue仿天猫底部弹出框

h5仿同程、携程、去哪儿酒店预订webapp项目实例

【精】H5移动端webapp开发(快装app)项目案例

HTML5手机端弹窗、提示框、loading加载（多功能xwPop弹窗升级版）

H5css3圆形进度条、css3动画指针旋转特效