vue3弹出层V3Popup实例详解


Posted in Vue.js onJanuary 04, 2021

Vue3-Popup 基于vue3构建的手机端自定义弹层组件。

一款集合了msg、alert、dialog、modal、actionSheet、toast等多种效果的Vue3自定义弹层组件。支持上下左右弹出、圆角、自定义弹层样式、多按钮及长按/右键功能。

vue3弹出层V3Popup实例详解

引入v3popup

// 在main.js中全局引入
import { createApp } from 'vue'
import App from './App.vue'
 
// 引入弹窗组件v3popup
import V3Popup from './components/v3popup'
 
createApp(App).use(V3Popup).mount('#app')

调用方式支持标签式+函数式,根据项目需要选择合适的调用方法。

<!-- 提示框 -->
<v3-popup v-model="showMsg" anim="fadeIn" content="msg提示框测试(3s后窗口关闭)" shadeClose="false" time="3" />
 
<!-- 询问框 -->
<v3-popup v-model="showConfirm" shadeClose="false" title="标题" xclose z-index="2020"
 content="<div style='color:#1be769;padding:20px;'>确认框(这里是确认框提示信息,这里确认框提示信息,这里是确认框提示信息)</div>"
 :btns="[
  {text: '取消', click: () => showConfirm=false},
  {text: '确定', style: 'color:#f90;', click: handleInfo},
 ]"
/>
// 函数式调用
let $el = this.$v3popup({
 title: '标题',
 content: '<div style='color:#f90;padding:10px;'>这里是内容信息!</div>',
 type: 'android',
 shadeClose: false,
 xclose: true,
 btns: [
  {text: '取消', click: () => { $el.close(); }},
  {text: '确认', style: 'color:#f90;', click: () => handleOK},
 ],
 onSuccess: () => {},
 onEnd: () => {}
})

vue3弹出层V3Popup实例详解

vue3中可通过vue3弹出层V3Popup实例详解 和vue3弹出层V3Popup实例详解

 两种方式挂载类似vue2中prototype原型链方法。

通过 vue3弹出层V3Popup实例详解方式挂载。

// vue2中调用
methods: {
 showDialog() {
  this.$v3popup({...})
 }
}
 
// vue3中调用
setup() {
 // 获取上下文
 const { ctx } = getCurrentInstance()
 ctx.$v3popup({...})
}

通过vue3弹出层V3Popup实例详解 方式挂载。

// vue2中调用
methods: {
 showDialog() {
  this.v3popup({...})
 }
}
 
// vue3中调用
setup() {
 const v3popup = inject('v3popup')
 
 const showDialog = () => {
  v3popup({...})
 }
 
 return {
  v3popup,
  showDialog
 }
}

预览效果

vue3弹出层V3Popup实例详解

vue3弹出层V3Popup实例详解

vue3弹出层V3Popup实例详解

vue3弹出层V3Popup实例详解

vue3弹出层V3Popup实例详解

vue3弹出层V3Popup实例详解

vue3弹出层V3Popup实例详解

vue3弹出层V3Popup实例详解

v3popup参数配置

组件支持如下20+种参数灵活配置。

|props参数|
v-model   是否显示弹框
title   标题
content   内容(支持String、带标签内容、自定义插槽内容)***如果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)
teleport  指定挂载节点(默认是挂载组件标签位置,可通过teleport自定义挂载位置) teleport="body | #xxx | .xxx"
btns   弹窗按钮(参数:text|style|disabled|click)
++++++++++++++++++++++++++++++++++++++++++++++
|emit事件触发|
success   层弹出后回调(@success="xxx")
end    层销毁后回调(@end="xxx")
++++++++++++++++++++++++++++++++++++++++++++++
|event事件|
onSuccess  层打开回调事件
onEnd   层关闭回调事件

vpopop.vue模板核心代码

<template>
 <div ref="elRef" v-show="opened" class="vui__popup" :class="{'vui__popup-closed': closeCls}" :id="id">
  <!-- //蒙层 -->
  <div v-if="JSON.parse(shade)" class="vui__overlay" @click="shadeClicked" :style="{opacity}"></div>
  <div class="vui__wrap">
   <div class="vui__wrap-section">
    <div class="vui__wrap-child" :class="['anim-'+anim, type&&'popupui__'+type, round&&'round', position]" :style="[popupStyle]">
     <div v-if="title" class="vui__wrap-tit" v-html="title"></div>
     <div v-if="type=='toast'&&icon" class="vui__toast-icon" :class="['vui__toast-'+icon]" v-html="toastIcon[icon]"></div>
     <!-- 判断插槽是否存在 -->
     <template v-if="$slots.content">
      <div class="vui__wrap-cnt"><slot name="content" /></div>
     </template>
     <template v-else>
      <div v-if="content" class="vui__wrap-cnt" v-html="content"></div>
     </template>
     <slot />
     <div v-if="btns" class="vui__wrap-btns">
      <span v-for="(btn, index) in btns" :key="index" class="btn" :style="btn.style" @click="btnClicked($event, index)" v-html="btn.text"></span>
     </div>
     <span v-if="xclose" class="vui__xclose" :class="xposition" :style="{'color': xcolor}" @click="close"></span>
    </div>
   </div>
  </div>
 </div>
</template>
 
/**
 * @Desc  Vue3自定义弹出层组件V3Popup
 * @Time  andy by 2020-12
 * @About Q:282310962 wx:xy190310
 */
<script>
 import { onMounted, ref, reactive, watch, toRefs, nextTick } from 'vue'
 let $index = 0, $locknum = 0, $timer = {}
 export default {
  props: {
   // 接收父组件v-model值,如果v-model:open,则这里需写open: {...}
   modelValue: { type: Boolean, default: false },
   // 标识符,相同ID共享一个实例
   id: {
    type: String, default: ''
   },
   title: String,
   content: String,
   type: String,
   popupStyle: String,
   icon: String,
   shade: { type: [Boolean, String], default: true },
   shadeClose: { type: [Boolean, String], default: true },
   opacity: { type: [Number, String], default: '' },
   round: Boolean,
   xclose: Boolean,
   xposition: { type: String, default: 'right' },
   xcolor: { type: String, default: '#333' },
   anim: { type: String, default: 'scaleIn' },
   position: String,
   follow: { type: Array, default: null },
   time: { type: [Number, String], default: 0 },
   zIndex: { type: [Number, String], default: '8080' },
   teleport: [String, Object],
   btns: {
    type: Array, default: null
   },
   onSuccess: { type: Function, default: null },
   onEnd: { type: Function, default: null },
  },
  emits: [
   'update:modelValue'
  ],
  setup(props, context) {
   const elRef = ref(null)
 
   const data = reactive({
    opened: false,
    closeCls: '',
    toastIcon: {
     ...
    }
   })
 
   onMounted(() => {
    ...
   })
 
   // 监听弹层v-model
   watch(() => props.modelValue, (val) => {
    if(val) {
     open()
    }else {
     close()
    }
   })
 
   // 打开弹层
   const open = () => {
    if(data.opened) return
    data.opened = true
    typeof props.onSuccess === 'function' && props.onSuccess()
 
    const dom = elRef.value
    dom.style.zIndex = getZIndex() + 1
 
    ...
 
    // 倒计时
    if(props.time) {
     $index++
     // 避免重复操作
     if($timer[$index] !== null) clearTimeout($timer[$index])
     $timer[$index] = setTimeout(() => {
      close()
     }, parseInt(props.time) * 1000)
    }
 
    // 长按|右键菜单
    if(props.follow) {
     ...
    }
   }
 
   // 关闭弹层
   const close = () => {
    if(!data.opened) return
 
    data.closeCls = true
    setTimeout(() => {
     ...
 
     context.emit('update:modelValue', false)
     typeof props.onEnd === 'function' && props.onEnd()
    }, 200)
   }
 
   // 点击遮罩层
   const shadeClicked = () => {
    if(JSON.parse(props.shadeClose)) {
     close()
    }
   }
   // 按钮事件
   const btnClicked = (e, index) => {
    let btn = props.btns[index];
    if(!btn.disabled) {
     typeof btn.click === 'function' && btn.click(e)
    }
   }
   
   ...
 
   return {
    ...toRefs(data),
    elRef,
    close,
    shadeClicked,
    btnClicked,
   }
  }
 }
</script>

vue2.x中通过Vue.extends扩展函数实例来实现挂载弹窗到body上。

vue3.x中则可以通过 vue3弹出层V3Popup实例详解 和 vue3弹出层V3Popup实例详解  vue3弹出层V3Popup实例详解 来实现挂载到body上。

import { createApp } from 'vue'
import PopupConstructor from './popup.vue'
 
let $inst
// 创建挂载实例
let createMount = (opts) => {
 const mountNode = document.createElement('div')
 document.body.appendChild(mountNode)
 
 const app = createApp(PopupConstructor, {
  ...opts, modelValue: true,
  remove() {
   app.unmount(mountNode)
   document.body.removeChild(mountNode)
  }
 })
 return app.mount(mountNode)
}
 
function V3Popup(options = {}) {
 options.id = options.id || 'v3popup_' + generateId()
 $inst = createMount(options)
 
 return $inst
}
 
V3Popup.install = app => {
 app.component('v3-popup', PopupConstructor)
 // app.config.globalProperties.$v3popup = V3Popup
 app.provide('v3popup', V3Popup)
}

这样就可以实现函数式来调用组件了。

另外vue2.x中给v-model传值 this.$emit('input', false)

vue3中modelValue是默认的。 则是 context.emit('update:modelValue', false)

如果定义的是v-model:visible,则需要先在props: { visible: Boolean }中声明,然后context.emit('update:visible': false)

Ok,基于vue3.0开发自定义弹框组件就介绍到这里。感兴趣的可以动手去试试哈。??

到此这篇关于vue3弹出层V3Popup实例详解的文章就介绍到这了,更多相关vue3弹出层内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Vue.js 相关文章推荐
vue在图片上传的时候压缩图片
Nov 18 Vue.js
vue开发chrome插件,实现获取界面数据和保存到数据库功能
Dec 01 Vue.js
vue项目中openlayers绘制行政区划
Dec 24 Vue.js
Vue实现圆环进度条的示例
Feb 06 Vue.js
如何封装Vue Element的table表格组件
Feb 06 Vue.js
vue 使用 v-model 双向绑定父子组件的值遇见的问题及解决方案
Mar 01 Vue.js
vite2.0+vue3移动端项目实战详解
Mar 03 Vue.js
vue实现可拖拽的dialog弹框
May 13 Vue.js
vue+elementui 实现新增和修改共用一个弹框的完整代码
Jun 08 Vue.js
Vue+TypeScript中处理computed方式
Apr 02 Vue.js
vue 实现弹窗关闭后刷新效果
Apr 08 Vue.js
vue 数字翻牌器动态加载数据
Apr 20 Vue.js
vue3自定义dialog、modal组件的方法
Jan 04 #Vue.js
vue中父子组件的参数传递和应用示例
Jan 04 #Vue.js
如何在VUE中使用vue-awesome-swiper
Jan 04 #Vue.js
vue项目如何监听localStorage或sessionStorage的变化
Jan 04 #Vue.js
手写Vue源码之数据劫持示例详解
Jan 04 #Vue.js
vue+vant 上传图片需要注意的地方
Jan 03 #Vue.js
vue调用微信JSDK 扫一扫,相册等需要注意的事项
Jan 03 #Vue.js
You might like
destoon常用的安全设置概述
2014/06/21 PHP
推荐25款php中非常有用的类库
2014/09/29 PHP
thinkphp5实现微信扫码支付
2019/12/23 PHP
javascript alert乱码的解决方法
2013/11/05 Javascript
javascript间隔刷新的简单实例
2013/11/14 Javascript
超简单JS二级、多级联动的简单实例
2014/02/18 Javascript
JavaScript实现网站访问次数统计代码
2015/08/12 Javascript
深入解析JavaScript框架Backbone.js中的事件机制
2016/02/14 Javascript
BootStrap实现带有增删改查功能的表格(DEMO详解)
2016/10/26 Javascript
bootstrap多层模态框滚动条消失的问题
2017/07/21 Javascript
vue插件vue-resource的使用笔记(小结)
2017/08/04 Javascript
laravel5.4+vue+element简单搭建的示例代码
2017/08/29 Javascript
浅谈angularJS2中的界面跳转方法
2018/08/31 Javascript
vue父子组件间引用之$parent、$children
2020/05/20 Javascript
vue项目中openlayers绘制行政区划
2020/12/24 Vue.js
Python的函数嵌套的使用方法
2014/01/24 Python
Python实现的求解最小公倍数算法示例
2018/05/03 Python
Python实现随机漫步功能
2018/07/09 Python
Python3 Post登录并且保存cookie登录其他页面的方法
2018/12/28 Python
Python学习笔记之读取文件、OS模块、异常处理、with as语法示例
2019/06/04 Python
python中xlutils库用法浅析
2020/12/29 Python
用CSS3的box-reflect来制作倒影效果
2016/11/15 HTML / CSS
详解使用canvas保存网页为pdf文件支持跨域
2018/11/23 HTML / CSS
html2canvas生成的图片偏移不完整的解决方法
2020/05/19 HTML / CSS
Dockers鞋官网:Dockers Shoes
2018/11/13 全球购物
写一个函数返回1+2+3+…+n的值(假定结果不会超过长整型变量的范围)
2014/09/05 面试题
某/etc/fstab文件中的某行如下: /dev/had5 /mnt/dosdata msdos defaults,usrquota 1 2 请解释其含义
2013/04/11 面试题
药物学专业学生的自我评价
2013/10/27 职场文书
负责人任命书范本
2014/06/04 职场文书
医学专业毕业生推荐信
2014/07/12 职场文书
优秀党员学习焦裕禄精神思想汇报范文
2014/09/10 职场文书
2015年平安创建工作总结
2015/04/29 职场文书
pytest配置文件pytest.ini的详细使用
2021/04/17 Python
web前端之css水平居中代码解析
2021/05/20 HTML / CSS
「睡美人」爱洛公主粘土人开订
2022/03/22 日漫
Spring boot实现上传文件到本地服务器
2022/08/14 Java/Android