手记
下载APP

Vue/NuxtJS自定义Popup弹出层|vue底部弹窗|nuxt模态框

> 一个聚合了有赞Vant及京东NutUI组件库中的Popup弹层、Dialog对话框、Notify通知信息、Toast加载框、ActionSheet底部弹出框等功能的轻量级弹窗组件。

图片描述
如下图:在Nuxt.js项目中的实例应用场景。
图片描述

使用方法

在main.js中引入组件

import Popup from './components/popup'
Vue.use(Popup)

组件提供了标签式及函数式两种调用方式。

  • 标签式使用

        ...
        
        
        
  • 函数式使用

图片描述
大家可以根据实际项目需求,任意搭配使用方式,让你想要的效果均可实现。

图片描述
图片描述

图片描述

图片描述

图片描述

图片描述

图片描述

图片描述

图片描述

图片描述

图片描述

参数配置

提供如下丰富的参数配置,随意组合出想要的效果。
是不是觉得这种参数很眼熟,没错,就是有名的Dialog及Layer弹窗常用的配置参数。

@@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        弹窗自动关闭秒数(123)
zIndex      弹窗层叠(默认8080)
btns        弹窗按钮(参数:text|style|disabled|click)
 
@@$emit
------------------------------------------
open        打开弹出层时触发(@open="xxx")
close       关闭弹出层时触发(@close="xxx")
 
@@Event
------------------------------------------
onOpen      打开弹窗回调
onClose     关闭弹窗回调

弹窗模板

<div class="nuxt__popup">
    <div class="nuxt__overlay"></div>
    <div class="nuxt__wrap">
      <div class="nuxt__wrap-section">
        <div class="nuxt__wrap-child">
          <div class="nuxt__wrap-tit"></div>
          <div class="nuxt__toast-icon"></div>
          <div class="nuxt__wrap-cnt"></div><div class="nuxt__wrap-cnt"></div><div class="nuxt__wrap-btns">
            <span class="btn"></span>
          </div>
          <span class="nuxt__xclose"></span>
        </div>
      </div>
    </div>
  </div>

/**
 * @Desc     VueJs自定义弹窗组件VPopup
 * @Time     andy by 2020-10-06
 * @About    Q:282310962  wx:xy190310
 */

另外组件还支持 右键弹窗/长按弹窗自定义插槽 内容。让你的弹窗实现千变万化的效果。
图片描述

图片描述

自定义插槽内容!
<div>自定义插槽内容!</div>
以上两种方法均可以实现自定义插槽内容。

当 content 和 自定义插槽 内容同时存在,只显示插槽内容!!!<div style="padding:30px 15px;">
		<img src="https://img.yzcdn.cn/vant/apple-3.jpg" alt="apple-3.jpg" /></div>

okey,基于Vue/Nuxt自定义弹出框组件就分享到这里。希望对大家有所帮助哈!
另外VPopup组件正在NuxtJs项目中实例应用,后续也会分享出来。💪💪

> 作者:xiaoyan2017
链接: https://www.cnblogs.com/xiaoyan2017/p/13776977.html
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

打开App,阅读手记
3人推荐
随时随地看视频慕课网APP