基于Vue.js+Nuxt开发自定义弹出层组件
(编辑:jimmy 日期: 2024/12/24 浏览:3 次 )
今天给大家分享VPopup 基于Vue.js构建的轻量级移动端弹出框组件,详情如下所示:
一款融合了Vant、NutUI等热门Vue组件库中的Popup弹层、Dialog对话框、Toast提示框、ActionSheet动作面板框、Notify通知框等功能。
快速使用
在main.js中引入组件
// 引入弹窗Popup 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>
在实际项目开发中,大家可根据需要自行选择调用。
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="弹窗内容,告知当前状态、信息和解决方法,描述文字尽量控制在三行内" :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="弹窗内容,告知当前状态、信息和解决方法,描述文字尽量控制在三行内" :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~~ 看了如上效果,是不是觉得还不错哟!那就继续往下看实现过程吧"htmlcode">
@@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模板
<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 "htmlcode">上一篇:在Vue中使用Echarts实例图的方法实例watch: { value(val) { const type = val "text-align: center">另外还支持右键弹窗/长按弹窗及自定义插槽内容。
<!-- 组件调用 --> <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="/UploadFiles/2021-04-02/apple-3.jpg">如果想通过函数式调用组件,需要用到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;这样就实现了在Vue原型 prototype 上挂载 $vpopup 方法及注册 v-popup 组件。
设置圆角及关闭按钮
设置round、xclose即可,另外可以配置xposition来设置关闭按钮位置。
设置按钮禁用状态
设置disabled: true 可禁用按钮事件。
Okay,基于Vue.js+Nuxt开发自定义弹出层组件就介绍到这里。目前VPopup正在Nuxt新项目中使用,届时也会分享出来。
最后附上最近两个实例项目
基于vue+uniapp直播项目实现uni-app仿抖音/陌陌直播室功能
react native 仿微信聊天室实例代码
下一篇:IDEA配置jQuery, $符号不再显示黄色波浪线的问题
荣耀猎人回归!七大亮点看懂不只是轻薄本,更是游戏本的MagicBook Pro 16.
人们对于笔记本电脑有一个固有印象:要么轻薄但性能一般,要么性能强劲但笨重臃肿。然而,今年荣耀新推出的MagicBook Pro 16刷新了人们的认知——发布会上,荣耀宣布猎人游戏本正式回归,称其继承了荣耀 HUNTER 基因,并自信地为其打出“轻薄本,更是游戏本”的口号。
众所周知,寻求轻薄本的用户普遍更看重便携性、外观造型、静谧性和打字办公等用机体验,而寻求游戏本的用户则普遍更看重硬件配置、性能释放等硬核指标。把两个看似难以相干的产品融合到一起,我们不禁对它产生了强烈的好奇:作为代表荣耀猎人游戏本的跨界新物种,它究竟做了哪些平衡以兼顾不同人群的各类需求呢?
人们对于笔记本电脑有一个固有印象:要么轻薄但性能一般,要么性能强劲但笨重臃肿。然而,今年荣耀新推出的MagicBook Pro 16刷新了人们的认知——发布会上,荣耀宣布猎人游戏本正式回归,称其继承了荣耀 HUNTER 基因,并自信地为其打出“轻薄本,更是游戏本”的口号。
众所周知,寻求轻薄本的用户普遍更看重便携性、外观造型、静谧性和打字办公等用机体验,而寻求游戏本的用户则普遍更看重硬件配置、性能释放等硬核指标。把两个看似难以相干的产品融合到一起,我们不禁对它产生了强烈的好奇:作为代表荣耀猎人游戏本的跨界新物种,它究竟做了哪些平衡以兼顾不同人群的各类需求呢?