基于Vue3.0开发轻量级手机端弹框组件V3Popup的场景分析


Posted in Vue.js onDecember 30, 2020

之前有分享一个vue2.x移动端弹框组件,今天给大家带来的是Vue3实现自定义弹框组件。

V3Popup 基于vue3.x实现的移动端弹出框组件,集合msg、alert、dialog、modal、actionSheet、toast等多种效果。支持20+种自定义参数配置,旨在通过极简的布局、精简的调用方式解决多样化的弹框场景。

基于Vue3.0开发轻量级手机端弹框组件V3Popup的场景分析

v3popup 在开发之初参考借鉴了Vant3、ElementPlus等组件化思想。并且功能效果和之前vue2.0保持一致。

◆ 快速引入

在main.js中全局引入v3popup组件。

import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)

// 引入弹窗组件v3popup
import V3Popup from './components/v3popup'

app.use(V3Popup)
app.mount('#app')

v3popup同样支持标签式+函数式两种调用方式。

标签写法

<v3-popup 
  v-model="showDialog"
  title="标题"
  content="<p style='color:#df6a16;padding:10px;'>这里是内容信息!</p>"
  type="android"
  shadeClose="false"
  xclose
  :btns="[
    {text: '取消', click: () => showDialog=false},
    {text: '确认', style: 'color:#f90;', click: handleOK},
  ]"
  @success="handleOpen"
  @end="handleClose"
/>
  <template #content>这里是自定义插槽内容信息!</template>
</v3-popup>

函数写法

let $el = this.$v3popup({
  title: '标题',
  content: '<p style='color:#df6a16;padding:10px;'>这里是内容信息!</p>',
  type: 'android',
  shadeClose: false,
  xclose: true,
  btns: [
    {text: '取消', click: () => { $el.close(); }},
    {text: '确认', style: 'color:#f90;', click: () => handleOK},
  ],
  onSuccess: () => {},
  onEnd: () => {}
})

Vue3.0中挂载全局函数有2种方式app.config.globalPropertiesapp.provide

通过 app.config.globalProperties.$v3popup = V3Popup 方式挂载。

// vue2.x中调用
methods: {
  showDialog() {
    this.$v3popup({...})
  }
}

// vue3.x中调用
setup() {
  // 获取上下文
  const { ctx } = getCurrentInstance()
  ctx.$v3popup({...})
}

通过 app.provide('v3popup', V3Popup) 方式挂载。

// vue2.x中调用
methods: {
  showDialog() {
    this.v3popup({...})
  }
}

// vue3.x中调用
setup() {
  const v3popup = inject('v3popup')
  
  const showDialog = () => {
    v3popup({...})
  }

  return {
    v3popup,
    showDialog
  }
}

不过vue.js作者是推荐使用 provide inject 方式来挂载原型链函数。

◆ 效果预览

基于Vue3.0开发轻量级手机端弹框组件V3Popup的场景分析

基于Vue3.0开发轻量级手机端弹框组件V3Popup的场景分析

基于Vue3.0开发轻量级手机端弹框组件V3Popup的场景分析

基于Vue3.0开发轻量级手机端弹框组件V3Popup的场景分析

基于Vue3.0开发轻量级手机端弹框组件V3Popup的场景分析

基于Vue3.0开发轻量级手机端弹框组件V3Popup的场景分析

基于Vue3.0开发轻量级手机端弹框组件V3Popup的场景分析

基于Vue3.0开发轻量级手机端弹框组件V3Popup的场景分析

◆ 参数配置

v3popup支持如下参数配置。

|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      层关闭回调事件

v3popup.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.0自定义弹框组件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>

Vue3中可通过createApp或createVNode | render 来挂载实例到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)
}

这样就实现了在vue3中注册原型链函数和v3-popup组件,就可以使用函数式调用了。

基于Vue3.0开发轻量级手机端弹框组件V3Popup的场景分析

到此这篇关于基于Vue3.0开发轻量级手机端弹框组件V3Popup的场景分析的文章就介绍到这了,更多相关Vue3自定义弹框组件内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Vue.js 相关文章推荐
vue 插槽简介及使用示例
Nov 19 Vue.js
vue使用echarts图表自适应的几种解决方案
Dec 04 Vue.js
Vue使用鼠标在Canvas上绘制矩形
Dec 24 Vue.js
在vue项目中封装echarts的步骤
Dec 25 Vue.js
利用Vue实现简易播放器的完整代码
Dec 30 Vue.js
vue中实现点击空白区域关闭弹窗的两种方法
Dec 30 Vue.js
vue 动态创建组件的两种方法
Dec 31 Vue.js
Vue项目中使用mock.js的完整步骤
Jan 12 Vue.js
Vue常用API、高级API的相关总结
Feb 02 Vue.js
vue中三级导航的菜单权限控制
Mar 31 Vue.js
vue配置型表格基于el-table拓展之table-plus组件
Apr 12 Vue.js
SpringBoot+Vue 前后端合并部署的配置方法
Dec 30 #Vue.js
vue中实现点击空白区域关闭弹窗的两种方法
Dec 30 #Vue.js
梳理一下vue中的生命周期
Dec 30 #Vue.js
Vue实现简易购物车页面
Dec 30 #Vue.js
利用Vue实现简易播放器的完整代码
Dec 30 #Vue.js
vue+element UI实现树形表格
Dec 29 #Vue.js
vue实现树状表格效果
Dec 29 #Vue.js
You might like
我的论坛源代码(九)
2006/10/09 PHP
一个颜色轮换的简单例子
2006/10/09 PHP
PHP统计数值数组中出现频率最多的10个数字的方法
2015/04/20 PHP
深入浅析php json 格式控制
2015/12/24 PHP
php实现的三个常用加密解密功能函数示例
2017/11/06 PHP
PHP实现基本留言板功能原理与步骤详解
2020/03/26 PHP
用js实现的仿sohu博客更换页面风格(简单版)
2007/03/22 Javascript
Jquery之美中不足小结
2011/02/16 Javascript
对table和ul实现js分页示例分享
2014/02/24 Javascript
JS运动框架之分享侧边栏动画实例
2015/03/03 Javascript
js实现的二级横向菜单条实例
2015/08/22 Javascript
分享有关jQuery中animate、slide、fade等动画的连续触发、滞后反复执行的bug
2016/01/10 Javascript
nodejs和C语言插入mysql数据库乱码问题的解决方法
2017/04/14 NodeJs
HTML5实现微信拍摄上传照片功能
2017/04/21 Javascript
jQuery条件分页 代替离线查询(附代码)
2017/08/17 jQuery
Hexo已经看腻了,来手把手教你使用VuePress搭建个人博客
2018/04/26 Javascript
JavaScript 正则命名分组【推荐】
2018/06/07 Javascript
解决vue数组中对象属性变化页面不渲染问题
2018/08/09 Javascript
jquery.param()实现数组或对象的序列化方法
2018/10/08 jQuery
如何优雅的在一台vps(云主机)上面部署vue+mongodb+express项目
2019/01/20 Javascript
Javascript 关于基本类型和引用类型的个人理解
2019/11/01 Javascript
完美解决通过IP地址访问VUE项目的问题
2020/07/18 Javascript
Python实现的文本简单可逆加密算法示例
2017/05/18 Python
Python多进程multiprocessing.Pool类详解
2018/04/27 Python
python tqdm库的使用
2020/11/30 Python
html5移动端价格输入键盘的实现
2019/09/16 HTML / CSS
环境科学专业个人求职信
2013/12/15 职场文书
高二历史教学反思
2014/01/25 职场文书
学习十八大报告感言
2014/02/04 职场文书
2014年消防工作实施方案
2014/02/20 职场文书
小学三年级学生评语
2014/04/22 职场文书
出租房屋协议书
2014/09/14 职场文书
现实表现材料范文
2014/12/23 职场文书
OpenCV3.3+Python3.6实现图片高斯模糊
2021/05/18 Python
你知道哪几种MYSQL的连接查询
2021/06/03 MySQL
MySQL快速插入一亿测试数据
2021/06/23 MySQL