请选择 进入手机版 | 继续访问电脑版

Vue3.0移动端自定义弹框组件|vue3弹出层V3Popup

[复制链接]
为你演绎 发表于 2021-1-2 11:52:00 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
Vue3-Popup 基于vue3构建的手机端自界说弹层组件。

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

引入v3popup

  1. // 在main.js中全局引入import { createApp } from 'vue'import App from './App.vue'// 引入弹窗组件v3popupimport V3Popup from './components/v3popup'createApp(App).use(V3Popup).mount('#app')
复制代码
调用方式支持标签式+函数式,根据项目需要选择符合的调用方法。
  1. [/code] [code]// 函数式调用let $el = this.$v3popup({    title: '标题',    content: '[color=#f90]这里是内容信息![/color]
  2. ',    type: 'android',    shadeClose: false,    xclose: true,    btns: [        {text: '取消', click: () => { $el.close(); }},        {text: '确认', style: 'color:#f90;', click: () => handleOK},    ],    onSuccess: () => {},    onEnd: () => {}})
复制代码

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


  • 通过
     方式挂载。
  1. // vue2中调用methods: {    showDialog() {        this.$v3popup({...})    }}// vue3中调用setup() {    // 获取上下文    const { ctx } = getCurrentInstance()    ctx.$v3popup({...})}
复制代码


  • 通过
     方式挂载。
  1. // vue2中调用methods: {    showDialog() {        this.v3popup({...})    }}// vue3中调用setup() {    const v3popup = inject('v3popup')        const showDialog = () => {        v3popup({...})    }    return {        v3popup,        showDialog    }}
复制代码
预览效果









v3popup参数设置

组件支持如下20+种参数机动设置。
  1. |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模板焦点代码
  1.                     
  2.                                                         
  3.                     
  4.                                                                
  5.                                                                
  6.                                                                                                         
  7.                                     
  8.             
  9.         
  10.    
  11. /** * @Desc     Vue3自界说弹出层组件V3Popup * @Time     andy by 2020-12 * @About    Q:282310962  wx:xy190310 */
复制代码
vue2.x中通过Vue.extends扩展函数实例来实现挂载弹窗到body上。
vue3.x中则可以通过
 和 
 
 来实现挂载到body上。
  1. 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开发自界说弹框组件就先容到这里。感兴趣的可以动手去试试哈。
来源:https://blog.csdn.net/yanxinyun1990/article/details/111975487
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

发布主题

专注素材教程免费分享
全国免费热线电话

18768367769

周一至周日9:00-23:00

反馈建议

27428564@qq.com 在线QQ咨询

扫描二维码关注我们

Powered by Discuz! X3.4© 2001-2013 Comsenz Inc.( 蜀ICP备2021001884号-1 )