
一枚web前端开发骚年,拥有多年前端开发经验,无聊的时间看看书,写些技术案例分享~~~ Q:282310962 wx:xy190310
一个产品的诞生,必然是有它的应用场景存在! 趁着国庆假期也给自己充充电,就使用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"> ... <!-- 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> 非常棒的一个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开发自定义提示框组件就介绍到这里。希望对大家有所帮助!✍
最近利用html5开发的仿携程、去哪儿酒店预订系统——微酒店预订weHotelOrd,使用到了html5+css3+jqUI+layerMobile+swiper+dateRangePicker等技术混合开发,jqUI实现了双日历区间控件选择。
现代人生活品质愈来愈高,之前想要了解家居的话,必须去实体门店,现在各类app如繁花乍现,也改变了人们的生活理念。app在手,全都不愁。如是利用了HTML5+css3开发了一个快速装修移动端app,界面新颖、功能不错,利用iscroll实现页面上拉刷新、下拉加载,swiper实现区块轮播。 效果截图如下: ===主张原创开发,拒绝数量、追求质量! ===建立营销型网站,全新清新风格,协助每个用户更加高效的工作。 ===追求完美是我们一贯的信念。我们重视每一个细节,每个作品都细心雕琢,精确到像素级。 本文为博主原创文章,未经博主允许不得转载,欢迎大家一起交流 QQ(282310962) wx(xy190310)
手机移动端响应式动画弹窗提示框插件xwPop,原生JS实现,带CSS3动画效果,丰富的JS弹出框提示信息插件,支持基本信息提示、带图标loading信息提示、confirm提示、自定义信息提示图标,仿Ios信息提示,支持较现代的浏览器。 在没有压缩的情况下,代码大小只有6KB,功能强大不输网上其他一些弹窗插件。 调用方式: 代码展示: 效果图展示: xwPop.js插件已经在项目中有应用,而且兼容性还可以,可能还有些地方写的不够完善,欢迎大家指正并逐步的完善解决。 感兴趣可以一起讨论:QQ(282310962) wx(xy190310)